Tag Archives: Activity

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.

Tagged , , ,

Custom Animation while switching between Activities

It’s quite simple after all.
What you have to do is to call overridePendingTransition(int enterAnimation, int exitAnimation) immediately after startActivity(Intent) or finish() to specify an explicit transition animation to perform next.

You will have to create anim folder within res folder (if you already didn’t do it). In /res/anim/ add XML files that are representing single Animations.

Here are some common Animations that you can simply copy and paste separately into XML files:

/res/anim/left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator">
  <translate
      android:fromXDelta="0"
      android:toXDelta="-100%p"
      android:duration="500"/>
</set>

/res/anim/right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate
android:fromXDelta="100%p"
android:toXDelta="0"
android:duration="500"/>
</set>

/res/anim/bottom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate
android:fromYDelta="100%p"
android:toYDelta="0"
android:duration="500"/>
</set>

/res/anim/top_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate
android:fromYDelta="0"
android:toYDelta="-100%p"
android:duration="500"/>
</set>

/res/anim/fade_in.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="800"
android:repeatCount="0" />
</set>

/res/anim/fade_out.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="800"
android:repeatCount="0" />
</set>

Duration, repeatCount, and other values are on your behalf to modify to your preference.

Now, all you have to do is to put this kind of line of code after startActivity(Intent) or finish()
overridePendingTransition(R.anim.right_in, R.anim.left_out);

Play with two Animation parameters until you get transition effect that suits you. Also, if you have another ideas for XML transitional files, post them in comments so we could add them to a list above.

Tagged , , ,