New Google Now and Google+ card interface

Question

Google Now and Google+ (Android) both make use of a card-like interface.

enter image description here

I was wondering if anyone had any idea how this interface can be replicated on Android.

They both have quite interesting animations for displaying new cards too; any thoughts would be great.

Just to clarify - it's more the look and feel of the card view I'm after. Essentially I need it to behave like a ListView i.e. I can populate the screen with cards dynamically but I'd like each row of the list to look like a card. If there's another layout I could adapt instead, that would be great — HBG, Jul 25 '12 at 10:10
After studying video on youtube, I thinks it s something like a listview with two views, one for the closed cards, and one for the open one. There is also the animation between the two views... I don't think we sould need to reinvent all the API to obtain a similar result. — pommedeterresautee, Aug 16 '12 at 21:35

score 53 · Accepted Answer · answered Sep 07 '12 at 10:20

I have posted a tutorial on how to replicate / create Google Cards style layout here.

Key steps

Create a custom layout
Add observer for drawing children
Animate alternating cards

Heres a code snippet

@Override
public void onGlobalLayout() {
    getViewTreeObserver().removeGlobalOnLayoutListener(this);

    final int heightPx = getContext().getResources().getDisplayMetrics().heightPixels;

    boolean inversed = false;
    final int childCount = getChildCount();

    for (int i = 0; i < childCount; i++) {
        View child = getChildAt(i);

        int[] location = new int[2];

        child.getLocationOnScreen(location);

        if (location[1] > heightPx) {
            break;
        }

        if (!inversed) {
            child.startAnimation(AnimationUtils.loadAnimation(getContext(),
                    R.anim.slide_up_left));
        } else {
            child.startAnimation(AnimationUtils.loadAnimation(getContext(),
                    R.anim.slide_up_right));
        }

        inversed = !inversed;
    }

}

Good One! Think the below links would be helpful. https://github.com/nadavfima/cardsui-for-android http://nhaarman.github.io/ListViewAnimations/ — AnhSirk Dasarp, Jul 19 '13 at 11:19
@Sharddul I need to put views dynamically into ---> . Instead of those textviews in tutorial. How to achieve that? I tried addView(view), but :( — AnhSirk Dasarp, Aug 05 '13 at 12:28

userM1433372 · Answer 2 · 2014-03-03T10:10:21.970

Take a look at http://ryanharter.com/blog/2013/01/31/how-to-make-an-android-card-list/

Copy of the example:

/res/drawable/bg_card.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>

Use it as the background of your layout:

<?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"
    android:padding="12dp">

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

You may need to add padding field to the first rect-item. – lalitm Mar 01 '14 at 05:02 — lalitm, Mar 01 '14 at 05:02

userM1433372 · Answer 3 · 2014-09-29T08:38:20.503

==== Start update 2014-09-29 ====

Use the CardView from the Google Compatibility library (from Android 2.1+):

<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

See https://developer.android.com/preview/material/ui-widgets.html

==== End update ====

(at least) two options:

https://github.com/gabrielemariotti/cardslib

or

https://github.com/afollestad/Cards-UI is a UI library for showing Cards.

See https://github.com/afollestad/Cards-UI/wiki/2.-Intro-Tutorial for an simple introduction. enter image description here

Great work , I hope this is supports all android version afters 11 — Harshit, Feb 12 '14 at 20:50
Cardslib is awesome but a minsdk of 14 makes it impossible for me. Cardsui also has a min of 15 and it isn't as good IMHO. — frostymarvelous, Jun 19 '14 at 17:24

score 10 · Answer 4 · edited Jan 16 '14 at 00:24

10

I made a very similar Layout you can look at here https://github.com/Nammari/GooglePlusLayout and for a video demo here http://youtu.be/jvfDuJz4fw4 for the animation that get applied to children , for more details look here http://nammari.tumblr.com/post/41893669349/goolge-plus-layout for a blog post that clarify every thing .

enter image description here

edited Jan 16 '14 at 00:24

user4o01

2,688
4
39
54

answered Jan 31 '13 at 00:26

confucius

13,127
10
47
66

Just for curiosity, using this implementation can make scrolling slow in an app that uses large sets of data due to memory usage? It does not recycle views like ListView. – João Melo Feb 07 '13 at 19:05
perhaps you should read the blog post and don't miss the performance tip section... thanks for you comment – confucius Feb 07 '13 at 19:46
Love it but lack of recycling just makes it a no go for me – frostymarvelous Jun 19 '14 at 17:19

score 7 · Answer 5 · edited Dec 15 '15 at 22:23

The card look and feel shouldn't be hard. You just need a ListView without dividers and your list view items should have a margin.

Like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_margin="16dp"
    android:layout_height="wrap_content"
    android:background="@android:color/background_light">

     <TextView
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:paddingTop="16dp"
             android:paddingRight="16dp"
             android:paddingLeft="16dp"
             android:text="Title"
             android:textSize="18dp"
             android:textColor="@android:color/primary_text_holo_light"
             />

     <TextView
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:paddingRight="16dp"
             android:paddingLeft="16dp"
             android:text="Subtitle"
             android:textSize="14dp"
             android:textColor="@android:color/primary_text_holo_light"
             />

     <ImageView android:layout_marginTop="16dp" 
              android:layout_marginBottom="16dp" 
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:background="@drawable/background"/> 
</LinearLayout>

According to the comment of the main post, I think it is more about the animation of the cards, and how the list is constructed than the content of the layout. — pommedeterresautee, Aug 16 '12 at 21:32
Thanks for your answer. I've been able to replicate the look - now I'd just like to get the overall feel going too! — HBG, Aug 29 '12 at 17:14

dparnas · Answer 6 · 2012-08-16T20:05:50.173

Have the same need, and have started investigating a bit. I've been looking at the apktool output I've been able to get from the com.google.android.googlequicksearchbox apk. (no sources only the res xmls)

This layout (at_place_card.xml) is used for displaying a location. It has three text lines and two actions buttons (details and checkin) on the right and an image on the left.

Unfortunately, I am not able to get any style information out from the apk, so the font size, dimensions and colors are just guesses.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="horizontal" android:background="@drawable/card_background" android:layout_width="fill_parent" android:layout_height="wrap_content"
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:thegoogle="http://schemas.android.com/apk/res/com.google.android.googlequicksearchbox">
    <LinearLayout android:orientation="vertical" android:layout_width="0.0dip" android:layout_height="fill_parent" android:baselineAligned="false" android:layout_weight="1.0">
        <FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
            <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" style="@style/CardTextBlock">
                <TextView android:id="@id/entry_title" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/CardTitle" />
                <TextView android:id="@id/open_hours" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/CardText" />
                <TextView android:textColor="@color/card_light_text" android:id="@id/known_for_terms" android:paddingBottom="4.0dip" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxLines="4" style="@style/CardText" />
            </LinearLayout>
            <ImageButton android:layout_gravity="top|right|center" android:id="@id/card_menu_button" android:layout_width="@dimen/card_action_button_height" android:layout_height="@dimen/card_action_button_height" android:contentDescription="@string/accessibility_menu_button" style="@style/CardMenuButton" />
        </FrameLayout>
        <Space android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />
        <Button android:id="@id/details_button" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="@dimen/card_action_button_height" android:text="@string/more_details" android:drawableLeft="@drawable/ic_action_pin" style="@style/CardActionButtonWithIcon" />
        <Button android:id="@id/checkin_button" android:layout_width="fill_parent" android:layout_height="@dimen/card_action_button_height" android:text="@string/check_in" android:drawableLeft="@drawable/ic_action_check_in" style="@style/CardActionButtonWithIcon" />
    </LinearLayout>
    <com.google.android.velvet.ui.CrossfadingWebImageView android:id="@id/place_photo" android:visibility="gone" android:layout_width="0.0dip" android:layout_height="fill_parent" android:scaleType="centerCrop" android:adjustViewBounds="true" android:baselineAligned="false" android:minHeight="@dimen/at_place_card_content_height" android:layout_weight="1.0" android:contentDescription="@string/at_place_card_image_desc" thegoogle:crossfadeDuration="@integer/image_crossfade_duration" />
</LinearLayout>

Update: Was able to get some style information also now. If you're interested here is a zip file with the information I have currently (some resource files from google now). https://dl.dropbox.com/u/4379928/android/googlenow2.zip

New Google Now and Google+ card interface

6 Answers6

Linked