New Google Now and Google+ card interface

HBG picture HBG · Jul 25, 2012 · Viewed 44.1k times · Source

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.

Answer

Shardul picture Shardul · Sep 7, 2012

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

}