Android: How to make the flip animation for android activity, as like iphone flip horizontal from left to right?

Question

In My application i want to flip the view.. I have seen such animation in iPhone. And Same thing i want in to my android application.

I want to flip the whole activity

Answer 1

One of the most convincing 3D flip animations for Android I've seen is done here https://code.google.com/p/android-3d-flip-view-transition.

A lot of the other tutorials and sample codes don't produce believable 3D flips. A simple rotation on the y-axis isn't what's done in iOS.

There is also a video here: http://youtu.be/52mXHqX9f3Y

Answer 2

Firstly define your own animation and either store it in XML under res->anim or java class. I don't have any working example other than API Demos that comes with the SDK download in Eclipse, if you're looking for a flipping animation try to look at 3D Transition class.

After that have your activity to load that animation, preferably load it in onCreate. Please refer to this question

Answer 3

You can make a very similar with these xml files.

rotate_out.xml

<?xml version="1.0" encoding="utf-8"?>

<scale
    android:duration="300"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.0"
    android:toYScale="0.90" />

<alpha
    android:duration="1"
    android:fromAlpha="1.0"
    android:startOffset="500"
    android:toAlpha="0.0" />

rotate_in.xml

<?xml version="1.0" encoding="utf-8"?>

<scale
    android:duration="200"
    android:fromXScale="0.0"
    android:fromYScale="0.90"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="500"
    android:toXScale="1.0"
    android:toYScale="1.0" />

<alpha
    android:duration="1"
    android:fromAlpha="0.0"
    android:startOffset="500"
    android:toAlpha="1.0" />

Then in your code override transition after startActivity() or finish():

overridePendingTransition(R.anim.rotate_in, R.anim.rotate_out);

Answer 4

At iOS portrait:

"A lot of the other tutorials and sample codes don't produce believable 3D flips. A simple rotation on the y-axis isn't what's done in iOS." After almost 30h searching for samples I have to agree. I have a movie, where I could take a screenshot at the middle. The right side of the view has: - a movement to left AND a shrink to 95%. The left side of the view has: - a movement to right side AND a shrink to 80%.

At Android Full ( initial state):

Android middle:

Android code:

// @param interpolatedTime The value of the normalized time (0.0 to 1.0)
// @param t The Transformation object to fill in with the current transforms.
protected void applyTransformation(float interpolatedTime, Transformation t){

    float degrees = toDegree*interpolatedTime;
    //float rad = (float) (degrees * Math.PI / 180.0f);

    Matrix matrix = t.getMatrix();
    camera.save();

    camera.rotateY(degrees);
    camera.getMatrix(matrix);
    camera.restore();

    matrix.preTranslate(-centerX, -centerY);// M' = M * T(dx, dy)
    matrix.postTranslate(centerX, centerY); // M' = T(dx, dy) * M
}

An improved version of the code can be found in the most examples:

    // @param interpolatedTime The value of the normalized time (0.0 to 1.0)
    // @param t The Transformation object to fill in with the current transforms.
    protected void applyTransformation(float interpolatedTime, Transformation t){

        float degrees = toDegree*interpolatedTime;
        //float rad = (float) (degrees * Math.PI / 180.0f);

        Matrix matrix = t.getMatrix();
        camera.save();

        camera.translate(0.0f, 0.0f, mDepthZ *  interpolatedTime);
        camera.rotateY(degrees);

        camera.getMatrix(matrix);
        camera.restore();

        matrix.preTranslate(-centerX, -centerY);// M' = M * T(dx, dy)
        matrix.postTranslate(centerX, centerY); // M' = T(dx, dy) * M
    }

Some differences are: - the right side of the view doesn't move as how the iOS.

Here is the Android Camera axes:

I do believe a traslation on Z axes doesn't fix it. Maybe needed a shrink too somehow.

float dz = (float) (centerX *  Math.sin(rad));
camera.translate(0f, 0f, -dz);

Still not enough. To much is the shrink the left side.