At first we will create a class called “Rotate3dAnimation” which is responsible for the 3D Animation.

The looks like this.

package com.example.transition3d;

import android.view.animation.Animation;
import android.view.animation.Transformation;

 * 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 mCenterX;
    private final float mCenterY;
    private final float mDepthZ;
    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 centerX, float centerY, float depthZ, boolean reverse) {
        mFromDegrees = fromDegrees;
        mToDegrees = toDegrees;
        mCenterX = centerX;
        mCenterY = centerY;
        mDepthZ = depthZ;
        mReverse = reverse;

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

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

        final float centerX = mCenterX;
        final float centerY = mCenterY;
        final Camera camera = mCamera;

        final Matrix matrix = t.getMatrix();;
        if (mReverse) {
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
        } else {
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));

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

The Matrix class holds a 3×3 matrix for transforming coordinates. Matrix does not have a constructor, so it must be explicitly initialized using either reset() – to construct an identity matrix, or one of the set..() functions (e.g. setTranslate, setRotate, etc.).

Read more about Matrix Classes here.

Now the MainActivity that contains a ListView and an Image.
What we are going to do here is When we click the ListView the ListView will rotate with a 3D Animation and show the Image on the other side.

package com.example.transition3d;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;

public class MainActivity extends Activity implements
		AdapterView.OnItemClickListener, View.OnClickListener {
	private ListView mPhotosList;
	private ViewGroup mContainer;
	private ImageView mImageView;

	// Names of the photos we show in the list
	private static final String[] PHOTOS_NAMES = new String[] { "Lyon",
			"Livermore", "Tahoe Pier", "Lake Tahoe", "Grand Canyon", "Bodie" };

	// Resource identifiers for the photos we want to display
	private static final int[] PHOTOS_RESOURCES = new int[] {
			R.drawable.photo1, R.drawable.photo2, R.drawable.photo3,
			R.drawable.photo4, R.drawable.photo5, R.drawable.photo6 };

	protected void onCreate(Bundle savedInstanceState) {


		mPhotosList = (ListView) findViewById(;
		mImageView = (ImageView) findViewById(;
		mContainer = (ViewGroup) findViewById(;

		// Prepare the ListView
		final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, PHOTOS_NAMES);


		// Prepare the ImageView

		// Since we are caching large views, we want to keep their cache
		// between each animation

	 * Setup a new 3D rotation on the container view.
	 * @param position
	 *            the item that was clicked to show a picture, or -1 to show the
	 *            list
	 * @param start
	 *            the start angle at which the rotation must begin
	 * @param end
	 *            the end angle of the rotation
	private void applyRotation(int position, float start, float end) {
		// Find the center of the container
		final float centerX = mContainer.getWidth() / 2.0f;
		final float centerY = mContainer.getHeight() / 2.0f;

		// Create a new 3D rotation with the supplied parameter
		// The animation listener is used to trigger the next animation
		final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end,
				centerX, centerY, 310.0f, true);
		rotation.setInterpolator(new AccelerateInterpolator());
		rotation.setAnimationListener(new DisplayNextView(position));


	public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
		// Pre-load the image then start the animation
		applyRotation(position, 0, 90);

	public void onClick(View v) {
		applyRotation(-1, 180, 90);

	 * This class listens for the end of the first half of the animation. It
	 * then posts a new action that effectively swaps the views when the
	 * container is rotated 90 degrees and thus invisible.
	private final class DisplayNextView implements Animation.AnimationListener {
		private final int mPosition;

		private DisplayNextView(int position) {
			mPosition = position;

		public void onAnimationStart(Animation animation) {

		public void onAnimationEnd(Animation animation) { SwapViews(mPosition));

		public void onAnimationRepeat(Animation animation) {

	 * This class is responsible for swapping the views and start the second
	 * half of the animation.
	private final class SwapViews implements Runnable {
		private final int mPosition;

		public SwapViews(int position) {
			mPosition = position;

		public void run() {
			final float centerX = mContainer.getWidth() / 2.0f;
			final float centerY = mContainer.getHeight() / 2.0f;
			Rotate3dAnimation rotation;

			if (mPosition > -1) {

				rotation = new Rotate3dAnimation(90, 180, centerX, centerY,
						310.0f, false);
			} else {

				rotation = new Rotate3dAnimation(90, 0, centerX, centerY,
						310.0f, false);

			rotation.setInterpolator(new DecelerateInterpolator());



Now the layout for the


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android=""

        android:layoutAnimation="@anim/layout_bottom_to_top_slide" />

        android:visibility="gone" />


Now we have some XML files for the animation of the ListView when it loads.
Here we are applying a bottom to top slide animation in the ListView when it loads.
So for that you have to first create a folder named “anim” in the “res” folder and create an XML named “layout_bottom_to_top_slide.xml” inside it.


<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android=""
        android:animation="@anim/slide_right" />

Now you will get an error at this line.


So for that we create another animation. Create another XML inside the same “anim” folder, but now it is named “slide_right.xml”


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="" android:interpolator="@android:anim/accelerate_interpolator">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
            android:duration="@android:integer/config_shortAnimTime" />

This is the translate animation that slides each row in the ListView.

Make sure you have six sample images with the named “photo1.jpg or png” , photo2.jpg etc…

Download the complete Android sample source code from here.

Join the Forum discussion on this post



  1. Pingback: Different types of Animation – Push Up in, Push Up Out, Push Left in, Push Left Out, HyperSpace In, HyperSpace Out in a ViewFlipper in Android. | CoderzHeaven

  2. akash savairam June 7, 2014 at 7:38 am

    Excellent example.

  3. bpatidar December 16, 2014 at 7:33 am

    awesome code……….


Leave a Reply

Your email address will not be published. Required fields are marked *




Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.