Ryan Harter

Freelance Android Developer

How to Make an Android Card List

| Comments

Ever since the launch of Google Now more than six months ago the Card View that it made famous has been kind of a big deal.  It makes sense, we Android users spent many years overlooking the lack of style on Android, and arguing over whether that was even important.  Now Android is finally getting a sense of style with the Holo theme, the the Card View plays into that amazingly. Google Now’s cards have a lot of functionality, including stacking, swipe to remove, and much more.  If you’re looking for that kind of functionality check out Nadav Fima’s excellent CardsUI library. Adding a card look to your ListViews can really make them pop, and its much easier than you might think.

Show Me the Code!

All you need to do is add a background drawable to your list items. Create a file called bg_card.xml in your /res/drawable folder with the following content:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
	<item>
		<shape android:shape="rectangle"
			android:dither="true">

			<corners android:radius="2dp"/>

			<solid android:color="#ccc" />

		</shape>
	</item>

	<item android:bottom="2dp">
		<shape android:shape="rectangle"
			android:dither="true">

			<corners android:radius="2dp" />

			<solid android:color="@android:color/white" />

			<padding android:bottom="8dp"
				android:left="8dp"
				android:right="8dp"
				android:top="8dp" />
		</shape>
	</item>
</layer-list>
Then, just set that drawable as the background for your row, and add some margins.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="?android:attr/listPreferredItemHeight">

	<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="match_parent" 
		android:layout_marginLeft="6dp"
		android:layout_marginRight="6dp"
		android:layout_marginTop="4dp"
		android:layout_marginBottom="4dp"
		android:background="@drawable/bg_card">

		<!-- Card Contents go here -->

	</LinearLayout>

</FrameLayout>
That’s all there is to it.  No graphic assets are required and now you’ve got a fast, Holo friendly card view.  You could also do use the same drawable for a grid view for a similar effect.

Want something more?

Mix it with Drag Sort ListView if you want to enable reordering or swipe to delete (swipe to do anything really) or Nadav Fima’s CardsUI if you want stacks and other advanced functionality.