How to create Google + cards UI in a list view?

Question

I want to create a listView of cards, but after reading this blog post goolge-plus-layout, I'm cards are a viable solution for a list of anything. The animation part seems too memory intensive to load say a listview with more than 40 elements simultaneously.

Is there a better way to achieve a cards UI in listView?

Answer 1

You can create a custom drawable, and apply that to each of your listview elements.

I use this one for cards in my UI. I don't think there is significant performance issues with this approach.

The drawable code (in drawable\big_card.xml) looks like this:

<?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="@color/second_grey" />         </shape>     </item>     <item         android:bottom="10dp"         android:left="10dp"         android:right="10dp"         android:top="10dp">         <shape android:shape="rectangle" >             <corners android:radius="3dp" />              <solid android:color="@color/card_shadow" />         </shape>     </item>     <item         android:bottom="12dp"         android:left="10dp"         android:right="10dp"         android:top="10dp">         <shape android:shape="rectangle" >             <corners android:radius="3dp" />              <solid android:color="@color/card_white" />         </shape>     </item>   </layer-list> 

I apply the background to my listview elements like this:

<ListView     android:id="@+id/apps_fragment_list"     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:listSelector="@drawable/big_card" /> 

If you want to add this as a background to any View (not just a list), you just make the custom drawable that View's background element:

<TextView         android:id="@+id/any_view"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:background="@drawable/big_card" />