Android listview: Create 3D rotation effect for listview item

I spent a lot of time to search on the web a class which allows to create a rotation effect on each item of an Android listview.

Here is a good implementation which works fine :

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 here is how to use it in your getView(..) methof of your adapter :

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

Sources : #

[1] 3d rotation animation for Android https://gist.github.com/methodin/5678214

 
47
Kudos
 
47
Kudos

Now read this

Some web and mobile design for inspiration (Week 19)

Here is some great design found on the web for inspiration purpose. Profile Card : Source : https://dribbble.com/shots/1542116-Profile-Card?list=searches&tag=web&offset=87 Weather app : Source :... Continue →