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 view. is it possible ? I have seen some example for the flip in android. But in that all example the view is in the same activity. Is it possible to set such view for the different activity. or to do such effect while going from one activity to another ?

Please see the snap for the Flip effect in iPhone:

If Yes then please give reference to any demo example or code. Thanks.

Answer 1

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 2

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 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.