transitions.md

Sexy transition between Activities (based on Twitter transition)

Looking at the officiel Twitter Android client I've noticed the slight cool & sexy transition between activities. I was curious to know how that worked so I had fun with android xml animations and ended up with that:

push_left_in.xml

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

push_right_out.xml

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

zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
            android:fromXScale="0.8"
            android:toXScale="1.0"
            android:fromYScale="0.8"
            android:toYScale="1.0"
            android:pivotX="50%p"
            android:pivotY="50%p"
            android:interpolator="@android:anim/decelerate_interpolator"
            android:duration="@android:integer/config_shortAnimTime"/>
    <alpha
            android:fromAlpha="0.0"
            android:toAlpha="1.0"
            android:interpolator="@android:anim/decelerate_interpolator"
            android:duration="@android:integer/config_shortAnimTime"/>
</set>

zoom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
            android:fromXScale="1.0"
            android:toXScale="0.8"
            android:fromYScale="1.0"
            android:toYScale="0.8"
            android:pivotX="50%p"
            android:pivotY="50%p"
            android:interpolator="@android:anim/decelerate_interpolator"
            android:duration="@android:integer/config_shortAnimTime"/>
    <alpha
            android:fromAlpha="1.0"
            android:toAlpha="0.0"
            android:interpolator="@android:anim/decelerate_interpolator"
            android:duration="@android:integer/config_shortAnimTime"/>
</set>

Then right after a startActivity(), just call that:

overridePendingTransition(R.anim.push_left_in, R.anim.zoom_out);

And then override your activity's onBackPressed():

@Override
public void onBackPressed() {
  super.onBackPressed();
  overridePendingTransition(R.anim.zoom_in, R.anim.push_right_out);
}

Voila! Enjoy!

Works perfect! Thank you for share.