Android listview: Animate listview item like Google plus effect

There a few weeks ago when I was working on Android “Cup of News” application, I wanted to replicate the effect “Google Plus” on the various items contained in a listview.

From my point of view, the use of such effects must do this sparingly. Everything depends on the content in each item that makes up your listview.

I have long sought a solution that is adequate but after some research on the web, I came to a rather acceptable solution.

Create a global variable which will be used to store the last item position the listview :

private int lastPosition = -1 ;

Create the first animation file: 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>

Create the second animation file: 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>

And add the following code at the end of your getView(..) method :

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

Sources : #

[1] AnimationUtils | Android Developers http://developer.android.com/reference/android/view/animation/AnimationUtils.html