Google Now ListView Style

In this protip, I'll be sharing how to design a Google Now Cards design for your ListView elements. The reason why I'm making this tip is because this is a design pattern that is becoming prominent in Android applications.

Now for the code.

card_background.xml:

<?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>

The code above is used for defining the card container that will be surrounding each element of your ListView, this will come in handy when you are defining the list item.

For the list_item.xml:

<?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/card_background">

        <TextView
        android:layout_gravity="left|center_vertical"
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:textColor="@android:color/primary_text_light"
        android:layout_height="wrap_content" />

    </LinearLayout>

</FrameLayout>

Make note of the use of a FrameLayout in this case! This is what helps offset the cards from the container.

For the ListView activity, here's listview_activity.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#e5e5e5">

<ListView
android:id="@+id/cardListView"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:divider="@null"
android:dividerHeight="0dp">
</ListView>

</LinearLayout>

"#e5e5e5" is the same light gray background as seen in Google Now, make sure to set the divider to null and the height to 0dp to remove the black line that separates ListView elements by default.