Introduction

Recently I have started learning Android development since I got a Nexus 5 and it seemed like a fun thing to do. It's been an interesting experience picking up something completely new - I really haven't touched Java since college and hadn't used an Android phone before. My first app hit the Google Play stores this morning and it's been a fun week of hacking away, check out Shiba. It's a great way to handle your Stripe payments.

So let's get to it! While furiously Googling around and searching Stack Overflow I ran into a few problems that weren't well documented on the internet (or at least that I could find), so this is the beginning of a series on some things I picked up along the way. We'll get started with transition animations between activities.

Transitioning Activities

When first starting your Android application you will have a single activity, and then as your application grows you will indubitably add another activity. The typical way of starting an activity is to package up an intent and call startActivity. It looks something like this:

Intent i = new Intent(this, <ActivityClass>.class);
startActivity(i);

This will create an intent that will be used to start an activity, the intent is packaged with the activity's class. The first thing to notice is that the default animation applied between activities is not the slide in and scale out animation that has been popularized by Twitter and Vine's Android applications (and by now, used by a good majority of Android applications). By default it is a small translation with a fade out and fade in of the started activity. Let's talk about overriding this animation to have the same animations as the Twitter application.

Overriding Transitions

Android provides a hook to override the activity animations (or any pending animation), it is called overridePendingTransition. It takes in two parameters: an enter animation for the started activity and an exit animation for the initial activity. We'll want one animation to scale and the other animation to slide. For the following code examples let's discuss a new activity being started: the enter animation will slide in from the right and the exit animation will scale down on the Z-axis. The animation for scaling down will go in the res/anim folder and will consist of two animation components: a scaling animation and a fade animation. It will look like this...

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="100%p"
           android:toXScale="80%p"
           android:fromYScale="100%p"
           android:toYScale="80%p"
           android:pivotX="50%p"
           android:pivotY="50%p"
           android:duration="@android:integer/config_mediumAnimTime" />
    <alpha android:fromAlpha="1"
           android:toAlpha="0.0"
           android:duration="@android:integer/config_mediumAnimTime" />
</set>

The animation to slide in from the right is available in android.R.anim but let's re-create it. It's a simple translation from the right with the same fade we used in the scaling animation.

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <translate android:duration="300" android:fromXDelta="100%" android:toXDelta="0%" />
    <alpha android:duration="300" android:fromAlpha="0.0" android:toAlpha="1.0" />
</set>

Transition Hooks

With these two animations we can animate the started activity by overriding the transition right after startActivity:

startActivity(intent);
overridePendingTransition(R.anim.slide_in_right, R.anim.scale_down);

Annoyingly (hopefully I can be corrected here), the transitions must be called from every single entry point of a started activity, it's easy enough to wrap the two together but confusing that no methods on Activity allow a hook for this. When going back the transition must be overridden for both the action bar up button and the phone's back button. Override onOptionsItemSelected and onBackPressed.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        finish();
        overridePendingTransition(R.anim.scale_up, R.anim.slide_out_right);
        return true;
    }

    return super.onOptionsItemSelected(item);
}

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

Hopefully that was enough to get your app's activities animating nicely! Stay tuned for more Android goodness in the coming weeks and feel free to reach out to me on Twitter @mduvall_ with any corrections/feedback!