androidandroid-layoutgoogle-plusgoogle-now

New Google Now and Google+ card interface


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.


Solution

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