"Android Notes" quickly create a card-style listview

Let 's start by looking at the effect we're going to achieve: each item in the ListView is placed on the interface like a card, with a 3d shadow effect underneath each item.

After the requirements are clear, let's do this.
1. Make the shadow and fillet effect for each item. Create Card_background.xml in the drawable directory

<?xml version= "1.0" encoding= "Utf-8"? ><layer-list xmlns:android= "http://schemas.android.com/apk/res/ Android ><!--A cascading effect that shows stereoscopic effects through Shadows-    <item><!--Shadow Effects-        <shape android:shape= " Rectangle ">            <solid android:color=" #CABBBBBB "/><!--Shadow Color--            <corners android:radius=" 2DP "/><!--rounded corners-        </shape>    </item>    <item        android:bottom=" 2DP "         android:left= "0DP"        android:right= "0DP"        android:top= "0DP" ><!--from the bottom 2dp, leaking out the top item so that it can show shadows--        <shape android:shape= "Rectangle" >            <solid android:color= "@android: Color/white"/><!-- Item Color-            <corners android:radius= "2DP"/>        </shape>    </item></layer-list >

2. Create a post-click effect on the item. Create Card_state_pressed.xml in the drawable directory

<?xml version= "1.0" encoding= "Utf-8"? ><layer-list xmlns:android= "http://schemas.android.com/apk/res/ Android >    <item>        <shape android:shape= "Rectangle" >            <solid android:color= "#ca39883d "/>            <corners android:radius=" 2DP "/>        </shape>    </item>    <item        android: Bottom= "2DP"        android:left= "0DP"        android:right= "0DP"        android:top= "0DP" >        <shape android: Shape= "Rectangle" >            <solid android:color= "#ca4fbb5f"/>            <corners android:radius= "2DP"/>        </shape>    </item></layer-list>

3. Define a selector.      Create Card_background_selector.xml in the drawable directory

<?xml version= "1.0" encoding= "Utf-8"? ><selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item android:drawable=" @drawable/card_state_pressed "android:state_pressed=" true "/>    <item android:drawable= "@drawable/card_background"/></selector>

4. Define the item layout. Create the List_item_card.xml file under the layout directory.
Here you need to be aware that the root layout is framelayout, and you need to give it a left and right padding, because this is a card. Another linearlayout need to set background, that is, the above selector.

<?xml Version= "1.0" encoding= "Utf-8"? ><framelayoutxmlns:android= "Http://schemas.android.com/apk/res/android" Android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:paddingleft= "15DP" Android: paddingright= "15DP" android:descendantfocusability= "beforedescendants" ><!--to highlight the card effect, you need to set the left and right padding, Divider Settings--><linearlayoutandroid:orientation= "vertical" android:layout_width= "match_parent" through the ListView android:layout_height= "Wrap_content" android:paddingleft= "15DP" android:paddingtop= "15DP" android:paddingbottom= " 15DP "android:paddingright=" 15DP "android:background=" @drawable/card_background_selector "Android: Descendantfocusability= "Afterdescendants" ><!--Add background--><textviewandroid:id= "to each item" @+id/ Line1 "android:layout_width=" wrap_content "android:layout_height=" wrap_content "android:text=" text "/></ Linearlayout></framelayout> 

5. Create the main layout.Create a new activity_main.xml in the layout directory. It is important to note that the divider property of the ListView is set to a distance of two cards for the @null,dividerheight.

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayoutxmlns:android= "http://schemas.android.com/apk/res/ Android "android:orientation=" vertical "android:layout_width=" match_parent "android:layout_height=" Match_parent " Android:background= "#e2e4fe" ><!--Here you need to set the ListView background--><listviewandroid:id= "@+id/card_listview" Android : layout_width= "match_parent" android:layout_height= "match_parent" android:listselector= "@android: color/ Transparent "android:cachecolorhint=" @android: Color/transparent "android:divider=" @null "android:dividerheight=" 10DP "/><!--be sure to set divider to @null,dividerheight control card up and down distance--></linearlayout>

6. Populate the ListView with data.

public class Mainactivity extends Activity{private ListView listview;private static final string[] data = {"Beijing", "Shanghai", "Wu Han "," Guangzhou "," Xi ' an "," Nanjing "," Hefei "," Shanghai "," Wuhan "," Guangzhou "," Xi ' an "," Nanjing "," Hefei "}; @Overridepublic void OnCreate (Bundle savedinstancestate) {s Uper.oncreate (savedinstancestate); Setcontentview (r.layout.activity_main); listview = (ListView) Findviewbyid ( R.id.card_listview);/* Add header and tail */listview.addheaderview (new view (this)); Listview.addfooterview (new view); Listview.setadapter (New arrayadapter<string> (this, R.layout.list_item_card, r.id.line1, Data));}}

We have achieved the desired effect through the 6 steps above!
Project Address: Https://github.com/Rowandjj/CardStyleListView

"Android Notes" quickly create a card-style listview