Kyle Banks

Implementing Google Plus Style ListView Animations on Android

Written by @kylewbanks on Oct 12, 2013.

UPDATE: I have published an Android library called AnimatedListView that accomplishes the goal of this very post. If you would prefer to use the library than implement it yourself, read this post for instructions.


Google Plus style ListViews are all the rage these days on Android because of the slick animations it displays when presenting data. When a user scrolls down, new items animate up into view, and quite frankly it looks awesome. In my latest app I decided to implement the same style animation, and it turned out to be very easy to implement. I also decided to implement an animation when scrolling up in the ListView so that the rows animate down into view.

Animations

The first thing to do is to define the animations, and put them in your res/anim/ folder:

up_from_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="0%"
        android:fromYDelta="100%" android:toYDelta="0%"
        android:duration="400" />
</set>

down_from_top.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="0%"
        android:fromYDelta="-100%" android:toYDelta="0%"
        android:duration="400" />
</set>

The only difference in these animations is the fromYDelta which is 100% and -100%, respectively.

Applying Animations to ListView Rows

Now that the animations are defined, we can implement them on our ListView rows. In your ListView's adapter, add the following code:

private int lastPosition = -1;

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    //Load your view, populate it, etc...
    View view = ...;

    Animation animation = AnimationUtils.loadAnimation(getContext(), (position > lastPosition) ? R.anim.up_from_bottom : R.anim.down_from_top);
    view.startAnimation(animation);
    lastPosition = position;

    return view;
}

What this does it check if the position of the view that is being loaded is higher or lower then the last view that was loaded. With this information, we can determine if the user is scrolling up or down, and animate accordingly. If the user scrolls up, the view will animate down into place, and if they scroll down it will animate up into place. Originally I had played around with listening to onScrollChanged events on the ListView, but this actually turned out to be more reliable.

Well there you have it, a very lightweight implementation of a Google Plus style ListView animation. I may release this as a library project, but the code is so minimal that it almost doesn't seem worth it. For now, you can check out the full source on GitHub, or download the project and try it out.

For more Android animations, check out my post on Creating an Infinitely Rotating ImageView or Animating Toolbar, TabLayout, FloatingActionButton and StatusBar Background Colors.

Let me know if this post was helpful on Twitter @kylewbanks or down below!