rtm60w
Last Updated: February 08, 2017
·
16.83K
· iheanyi
E02ac480d0b92ec00e660be464d35c8d

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.

Say Thanks
Respond

15 Responses
Add your response

7577
2d81237d69f64ad6e3a06b09cbe54a39

Hey Iheanyi - this looks pretty cool but unfortunately the image is missing.
"drawable/card_background" - Please make sure to add this file. Can't wait! Thanks

over 1 year ago ·
7582
E02ac480d0b92ec00e660be464d35c8d

@arrichter The card_background.xml is a drawable file, I hope this helps out!

over 1 year ago ·
7612
2d81237d69f64ad6e3a06b09cbe54a39

OK - so for everyone else:

The card_background.xml file needs to be placed in a folder like drawable-hdpi (not layout Folder)
Thanks for the reply iheanyi.

over 1 year ago ·
7616
E02ac480d0b92ec00e660be464d35c8d

@arrichter - No problem, let me know how the layout works out for you!

over 1 year ago ·
7695
2d81237d69f64ad6e3a06b09cbe54a39

So after that - things went well! One thing I am missing though is the capability to have a headline, and multiple TextView elements in one "card". But other than that - great job. Thanks a lot.
http://goo.gl/fOWg7

over 1 year ago ·
7704
D920cb6f99adad3d497d6497c99b0a68

I think there should be a selector xml for the background.

Also, are u sure u don't need to set the selector of the list view to transparent, so that only the selector of the card is working?

over 1 year ago ·
7877
E02ac480d0b92ec00e660be464d35c8d

@arrichter - It should be extensible enough to modify it to fit your needs, I've used this layout for multiple text elements and the like within a card and it's worked just fine, but I haven't integrated expanding/collapsing cards yet, I'm working on it still!

over 1 year ago ·
8024
9115b020ff49c851f27f1758c8f34d0d

Hey this looks really good. I had one query though. How do I increase the height of the card in case my textview inside it is more than 2 or 3 lines etc. I have tried changing the value of android:minHeight but it didnt work ? Thanks

over 1 year ago ·
8301
E02ac480d0b92ec00e660be464d35c8d

@shivam101 - wrapcontent on the listitem.xml, rather than using the List Item Preferred Height?

over 1 year ago ·
9855

in my case it is not displaying any thing. is there any thing i require rather then this code ?

over 1 year ago ·
12295
04162d6f2ee294783048037aa291eacd

What does that link in the solid color do? Its showing error. Please explain.

over 1 year ago ·
14034
F9cb51532b3522d6eec468909aafabc0

Hi, @iheanyi thanks for the useful post. it is working like a charm but i need to do few modification but i m not able to do so. I m trying to change the card color according to the theme user has chosen. I m not pro in android coding just a beginner. i was able to change background color of LinearLayout of listviewactivity.xml but i m not able to change the color of solid in cardbackground.xml. To change the color as theme i made few changes which i have pasted in pastebin(it was not possible here)
http://goo.gl/SbpmGM

After doing all this only value of LinearLayout of listview_activity.xml changes after changing theme. I don't know why solid is not taking color from style.. Do you have any idea? Please give me some solution for this!!

over 1 year ago ·
14043
F9cb51532b3522d6eec468909aafabc0

Finally after thinking whole night, i made it work!!

over 1 year ago ·
15649
E066c31a8c1c773220fcf3793f88bc42 normal

Can someone upload a working example? :)

over 1 year ago ·
28581

Thank you

4 months ago ·