How does Google achieve animated posts in their G+ app?

Question

I like the animation that occurs when scrolling through posts in the Google+ app, but I can't work out how they achieve it.

What techniques are employed to animate posts as they appear? I'm not looking for the animation itself, just how I'd apply any animation to a list of scrollable items.

Thanks.

Answer 1

After some testing I think I got something similar to work;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    final LinearLayout list = new LinearLayout(this);
    list.setOrientation(LinearLayout.VERTICAL);

    ScrollView scrollView = new ScrollView(this) {
        Rect mRect = new Rect();

        @Override
        public void onLayout(boolean changed, int l, int t, int r, int b) {
            super.onLayout(changed, l, t, r, b);

            for (int i = 0; i < list.getChildCount(); ++i) {
                View v = list.getChildAt(i);

                // Tag initially visible Views as 'true'.
                mRect.set(l, t, r, b);
                v.setTag(getChildVisibleRect(v, mRect, null));                  
            }
        }

        @Override
        public void onScrollChanged(int l, int t, int oldl, int oldt) {
            super.onScrollChanged(l, t, oldl, oldt);

            for (int i = 0; i < list.getChildCount(); ++i) {
                View v = list.getChildAt(i);
                mRect.set(getLeft(), getTop(), getRight(), getBottom());

                // If tag == 'false' and View is visible we know that
                // View became visible during this scroll event.
                if ((Boolean) v.getTag() == false
                        && getChildVisibleRect(v, mRect, null)) {
                    AlphaAnimation anim = new AlphaAnimation(0, 1);
                    anim.setDuration(1000);
                    v.startAnimation(anim);
                    v.setTag(true);
                }
            }
        }
    };
    scrollView.addView(list);

    for (int i = 0; i < 20; ++i) {
        TextView tv = new TextView(this);
        tv.setText("Test");
        tv.setTextSize(72);
        tv.setTextColor(Color.WHITE);
        tv.setBackgroundColor(Color.GRAY);
        list.addView(tv);
    }

    setContentView(scrollView);
}

Scrolling down the list should trigger alpha animation once new TextViews become visible.

Answer 2

There's a library for that, it seems to do the job well: https://github.com/cuub/sugared-list-animations