Flip between two Activities

Let’s say there’s no realistic-enough way to do real flip between Android Activities that we are so far aware of.
However, when we wanted to do such animation effect, we came to this solution:

Ensure you have /res/anim folder created within your Android project.

You will have to create two XML files that will define animations that simulate flip effect, and then you can use common overridePendingTransition(animation,animation) method.

/res/anim/flipfadein

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
    android:duration="300"
    android:fromXScale="1.0"
    android:fromYScale="0.0"
    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" /></set>

/res/anim/flipfadeout

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
    android:duration="500"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="0.0" />

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

Add
overridePendingTransition(R.anim.flipfadein, R.anim.flipfadeout);
after startActivity or finish() lines, and there you go.

Now, when it’s about tweaking xml parameters, you will notice that these provide “flip” over x axis (horizontal axis). If you want it to be y (vertical) axis, just revert values of
android:toXScale=”1.0″, android:toYScale=”0.0″
to
android:toXScale=”0.0″ android:toYScale=”1.0″
Playing with this values could probably make it rotating over arbitary axis.

Durations are set to 500 in fadeout and 300 in fadein because it seems to “feel” more “flip” when flip in runs a bit faster. Feel free to change these, and to submit modifications in comments.

Advertisements
Tagged , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: