Today as part of the 31 Days of Android series, we’re going to discuss how to use custom animations between activities. This is going to require both new XML and new Java code. Fortunately, none of this will be that different from stuff you’ve done before. To do this there are two parts. One that must occur whenever you launch a new Activity and one that must occur whenever you return to a previous Activity. We’re going to start using a some project code you can download here.
Creating some New Animations
To create new animations, you need to right click on your res folder and choose New—>Other and then Android XML File. From there you’ll need to change the Resource Type to Tween Animation. In the Root Element list, you should choose set. Lastly, you’ll need to name the file, for now, let’s do a slide in and slide out animation, so name your file “slide_in_left”. Let’s look at the XML for this animation:
<?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="400" />
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="100" android:startOffset="200" />
</set>
What is important here is the two elements: translate and alpha. The translate element is saying to translate from -100% to 0 over a duration of 400 ms. The alpha element is saying to go from a 0 alpha to a 1 alpha over a duration of 100 ms with a start offset of 200 ms. Next you need to create a slide out animation, so right click on the new anim folder and choose New—>Other and then pick Android XML File again.Tween Animation and set should already be selected so you should just need to enter a File name. Enter “slide_out_left”. Again, let’s look at the 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="400" />
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="100" android:startOffset="200" />
</set>
Where previously the animation went from -100 to 0, now it’s going from 0 to -100. Also, while previously it was going from a 0 alphas to a 1.0 alpha, now it goes from 1.0 to 0. Now that you have two animations, you’re ready to start using them.
Changing the Animation when you Start a New Activity
Take a look at the button2 onClickListener and you should see the following:
Button button2 = (Button) findViewById(R.id.button2);
button2.setOnClickListener(new OnClickListener() { public void onClick(View v) {
startActivity(new Intent(getApplicationContext(), ActivityTwo.class));
}
});
Now this is going to start a new Activity. Depending on the version of Android you’re running and what the provider has done to alter it, there may be some default animation between the two Activities though the default simulator shouldn’t have anything special. In order to alter this to use a custom animation, you need to make a call to overridePendingTransition and specify the incoming animation and the outgoing animation. For this you should use your slide in and slide out animation, respectively. Now your onClickListener should look like this:
Button button2 = (Button) findViewById(R.id.button2);
button2.setOnClickListener(new OnClickListener() { public void onClick(View v) {
startActivity(new Intent(getApplicationContext(), ActivityTwo.class));
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_left);
}
});
Now, when you click the second button, you should see the first Activity slide out to the left and then the new Activity slide in from the left. Depending on your computer hardware, you may or may not be able to visually see this in the emulator. You may need to run it on a device to really see it. Now, if you click the back button, you won’t be treated to a nice animation like you got going to the second Activity.
Using an Animation when Tapping Back
In order to do a proper animation when the user taps the back button, you will need to override the back button which we did back in Day 10:
@Override
public void onBackPressed() {
super.onBackPressed();
}
Today you’ll need to do a little bit more than just call the super implementation of onBackPressed. Thankfully, you just need to call overridePendingTransition again. Now your onBackPressed will look like this:
@Override
public void onBackPressed() {
super.onBackPressed();
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_left);
}
Notice that you’re doing the same in and out animations before. This will cause the appearance to be the same. Go ahead and run your app and when you back out of your second Activity it should slide out to the left and the first Activity will slide in from the left as well.
Orientation Specific Animations
Just like creating a Layout for a specific orientation, you can create an Animation for a specific orientation. If you wanted to slide up and down when the orientation was landscape and left and right when you were in portrait, the naming scheme wouldn’t make much sense. You could create a generic name that would be used for both landscape and portrait orientations. Or, you could put all your animations in the anim folder and then choose which to use in the code. Let’s do that to see how it works. First, add two new animations to your anim folder. The first should be named slide_up and will have this XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true">
<translate android:fromYDelta="100%p" android:toYDelta="0%p" android:duration="500" />
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="400"/>
</set>
Now add another named slide_down with the following XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:shareInterpolator="true">
<translate android:fromYDelta="0%p" android:toYDelta="100%p" android:duration="500" />
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500"/>
</set>
Now, you’ve already seen how to figure out what the current orientation is. You need to get an instance of Display and use that to check it’s rotation (as noted in the linked article, if you’re using an older version of Android, you’ll have to do something else). Your Button2 onClickListener should be changed to check the rotation and then specify the in and out animations depending on that like so:
Button button2 = (Button) findViewById(R.id.button2); button2.setOnClickListener(new OnClickListener() { public void onClick(View v) { startActivity(new Intent(getApplicationContext(), ActivityTwo.class)); Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); if ((display.getRotation() == Surface.ROTATION_0) || (display.getRotation() == Surface.ROTATION_180)) { overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_left); } else if ((display.getRotation() == Surface.ROTATION_90) || (display.getRotation() == Surface.ROTATION_270)) { overridePendingTransition(R.anim.slide_up, R.anim.slide_down); } } });
So here, you’re saying if the device is in a portrait orientation, slide out to the left and slide the new Activity in from the left. If you’re in landscape, slide down and slide up the new Activity. In the onBackPressed method of the second Activity you’ll use the exact same code to override the pending transaction.
Now that you know how to override the transactions going in and out of activities, provided you can figure out how to create a new animation, you should be able to get (nearly) any effect you want between activities. Sliding in and out, left and right, up and down, are very common and relatively easy to create. In the attached sort you’ll find a few more of the more common animation XMLs. You can download the latest source code here.
