New Google Now and Google+ card interface

Question

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

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.

Answer 1

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

Key steps

1. Create a custom layout
2. Add observer for drawing children
3. 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;     }  } 

Answer 2

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>