Animate adding item and item movement in listview like Google Plus app

Question

I would like to reproduce the effect on an listview item when it appears when the user scroll in the listview.

I would like to reproduce the same effect as the Google Plus application.

How can i do this ?

UPDATE :

Here is an extract of my code in my getView() :

    final float centerX = rowView.getWidth() / 2.0f;
    final float centerY = rowView.getHeight() / 2.0f;

    rowView.startAnimation(new Rotate3dAnimation(0.0f, -90.0f, centerX, centerY, 310.0f, true));

UPDATE 2 :

02-12 16:01:17.198: E/AndroidRuntime(21625): java.lang.NullPointerException
02-12 16:01:17.198: E/AndroidRuntime(21625):    at com.rss.home.ArticleListAdapterHome.getView(ArticleListAdapterHome.java:129)
02-12 16:01:17.198: E/AndroidRuntime(21625):    at android.widget.AbsListView.obtainView(AbsListView.java:2263)
02-12 16:01:17.198: E/AndroidRuntime(21625):    at android.widget.ListView.makeAndAddView(ListView.java:1790)
02-12 16:01:17.198: E/AndroidRuntime(21625):    at android.widget.ListView.fillDown(ListView.java:691)
02-12 16:01:17.198: E/AndroidRuntime(21625):    at android.widget.ListView.fillFromTop(ListView.java:752)

Answer 1

Thanks for the video.
This looks like a 3D-Rotation to me. The animation is probably started in the getView method of the adapter. This means there are three steps to do:

1. Check for custom ListAdapter, e.g. here. You will also find a lot of questions/answers on so
2. Click here to see how to start an animation in getView
3. Check this answer here. It describes where to find an example for 3D-Animation

I haven't checked for 3D-Animation myself, but the ListAdapter and the Animation on it should not be a big problem.

---

Edit:
You don't have to load the animation from xml. You may do it like this:

public View getView(int position, View view, ViewGroup viewGroup) {
    // normal handling
    // ...
    // now apply animation
    view.startAnimation(new Rotate3dAnimation(/*params*/));
}

---

Edit2:
I have now tested it myself, here are things I changed to make it working:

1. I forgot to set the duration of an animation, I did set this
2. The height and width of the view are not set in getView, so removed the parameters centerX and centerY and added View view and gave it the rowView
3. The animation is using camera.rotateY, but this needs to be changed to camera.rotateX

This is my updated Rotate3dAnimation:

package de.malaka.player.animation;

import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.graphics.Camera;
import android.graphics.Matrix;

/**
 * An animation that rotates the view on the Y axis between two specified angles.
 * This animation also adds a translation on the Z axis (depth) to improve the effect.
 */
public class Rotate3dAnimation extends Animation {
private final float mFromDegrees;
private final float mToDegrees;
private final float mDepthZ;
private final View mView;
private final boolean mReverse;
private Camera mCamera;

/**
 * Creates a new 3D rotation on the Y axis. The rotation is defined by its
 * start angle and its end angle. Both angles are in degrees. The rotation
 * is performed around a center point on the 2D space, definied by a pair
 * of X and Y coordinates, called centerX and centerY. When the animation
 * starts, a translation on the Z axis (depth) is performed. The length
 * of the translation can be specified, as well as whether the translation
 * should be reversed in time.
 *
 * @param fromDegrees the start angle of the 3D rotation
 * @param toDegrees the end angle of the 3D rotation
 * @param centerX the X center of the 3D rotation
 * @param centerY the Y center of the 3D rotation
 * @param reverse true if the translation should be reversed, false otherwise
 */
public Rotate3dAnimation(float fromDegrees, float toDegrees, float depthZ, boolean reverse, View view) {
    mFromDegrees = fromDegrees;
    mToDegrees = toDegrees;
    mDepthZ = depthZ;
    mReverse = reverse;
    mView = view;
}

@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
    super.initialize(width, height, parentWidth, parentHeight);
    mCamera = new Camera();
}

@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
    final float fromDegrees = mFromDegrees;
    float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);

    final float centerX = mView.getWidth()/2;
    final float centerY = mView.getHeight()/2;
    final Camera camera = mCamera;

    final Matrix matrix = t.getMatrix();

    camera.save();
    if (mReverse) {
        camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
    } else {
        camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
    }
    camera.rotateX(degrees);
    camera.getMatrix(matrix);
    camera.restore();

    matrix.preTranslate(-centerX, -centerY);
    matrix.postTranslate(centerX, centerY);
}
}

And this is how I use it in the adapter:

Animation anim = new Rotate3dAnimation(90.0f, 0.0f, 100.0f, false, convertView);
anim.setDuration(1000l);
convertView.startAnimation(anim);

The duration is pretty long right now, but this way you can adjust the values.