4. Animating Activity & Fragment Transitions With XML

Written by Alex Sullivan

The transition between screens is one of the most essential types of animation you can add to an app. Screen transitions add continuity as your user moves between different activities. They allow users to get a sense of where they are in your app and where the previous screen’s content went. All this makes screen transitions a fundamental part of a polished, enjoyable app.

In this chapter, you’ll:

• Use XML ANIM files to animate between the authorization and main activities.
• Learn about the different types of navigation component fragment animations.
• Add complex transitions between screens using animation sets.

First, you’ll learn about how to animate transitions between activities.

Transitioning between activities

Activities are fundamental building blocks of Android apps. An activity provides a window where the app can draw its UI. Typically, an activity will fill the entire screen, and each activity implements one screen in the app. While many newer Android apps are moving towards a single activity architecture, chances are you’ll work on apps with multiple activities, too, so you need to know how to create animations between them.

You can use two methods to animate between activities:

1. ANIM resource files
2. The Transition framework

In this chapter, you’ll focus on the first option: creating activity animations with ANIM resource files. While the Transition framework is a more modern and flexible way to create animations, old-fashioned ANIM resource files still drive most animations because they’re so simple. You’ll learn how to use the Transition framework for fragment animations in the next chapter.

Now, it’s time to see how activity animations work.

Components of an activity animation

Activity transitions have two core components:

1. The ANIM resource file that drives the animation.
2. The call to overridePendingTransition, which sets the animation on the activity.

You use the ANIM resource file to define the actual animation you want to run on the screen. Animation primitives like alpha, scale and translate define how the animation should look.

Finally, you supply those ANIM resource files to overridePendingTransition, which sets up the animation to run when you transition to another activity.

To see this in action, look at the method header for overridePendingTransition:

public void overridePendingTransition(int enterAnim, int exitAnim)

overridePendingTransition is a method in Activity that allows you to specify a resource for the enter and exit animations. You’ll typically call overridePendingTransition after a call to startActivity. The enterAnim resource describes the animation for the incoming animation. Conversely, the exitAnim resource describes the animation for the outgoing activity.

If you want to trigger a specific animation while finishing an Activity, use overridePendingTransition after a call to finish. In that scenario, exitAnim will describe the animation of the Activity when it finishes, while enterAnim will describe the animation of the Activity when it resumes.

Note: Since overridePendingTransition is a method in Activity, its challenging to use when you’re specifying an animation from a component outside of your Activity. In that case, use ActivityOptions.makeCustomAnimation to create a Bundle and pass it to startActivity. It takes the same enter and exit animations and works the same way as overridePendingTransition.

Now that you understand how activity transitions work, it’s time to see how to use them in your own apps.

Getting started

Open the starter project within 04-activity-transitions in the aat-materials repository, using Android Studio Arctic Fox or newer.

Once the project syncs, build and run the app the tap the Sign In button. You’ll see the login screen.

You’ll create a fancy animation to go between AuthActivity, where the user enters their login and signup credentials, and MainActivity, where the movie list lives.

You want to animate AuthActivity to fade into the background while MainActivity slides in. To emphasize that AuthActivity is leaving the screen, you’ll scale it down in size, move it lower on the screen and make it slowly fade away. MainActivity will slide up and fade in while AuthActivity disappears.

Here’s how the animations will look:

Creating the activity enter animation

You’ll start building the AuthActivity to MainActivity animation by focusing on the enter animation, which runs on the MainActivity UI as it comes into view.

First, open the ANIM resource file named auth_main_enter in the anim resource directory. You need to store the file in the anim resource directory because the activity animations API relies on the older, tween-style animations, rather than the newer animator animations.

Right now, the file has an empty set tag that defines AnimationSet, which contains a set of animations. You want your enter transition to include both moving the activity up and fading it in, so your set needs to contain both of those animations.

To start, create an alpha animation in the body of the set tag:

<alpha
  android:duration="150"
  android:fromAlpha="0.0"
  android:toAlpha="1.0" />

The alpha tag creates AlphaAnimation, which governs your view’s alpha. Since you want to fade the view in, you set fromAlpha to 0.0 and toAlpha to 1.0. That means the view goes from being fully invisible (transparent) to fully visible (opaque). You also set the duration to 150 milliseconds.

The code above takes care of fading in the view when presenting the activity. Next, you need to add the animation to slide the view up.

Moving the view upwards

You’ll use the translate tag to achieve the vertical slide. Add the following below the alpha animation block:

<translate
  android:duration="300"
  android:fromYDelta="100%p"
  android:toYDelta="0" />

The translate tag creates TranslateAnimation, which is in charge of moving your view along the X- and Y- axes. The fromYDelta and toYDelta fields determine where the view should move.

In this case, you instruct the translation animation to move the view from a Y-delta of 100% of the screen size to a Y-delta of 0. 0 represents the top of the screen, so you’re moving the view from the bottom of the screen up to the top. That is, the view is sliding up from the bottom.

The translate animation can also translate X coordinates using the fromXDelta and toXDelta fields.

Note: In the example above, you use a percentage value in fromYDelta. You could also use a raw pixel count by hardcoding a number. To translate from a Y-delta of 20 pixels to a Y-delta of 5 pixels, you’d just hardcode the numbers 20 and 5 without a percent sign.

At this point, you’ve finished the activity enter transition. Now, it’s time to work on the more complex exit transition.

Creating the activity exit transition

Now that you’ve created the enter animation, it’s time to build the exit animation to govern how AuthActivity leaves the screen when transitioning to MainActivity.

Start by opening the ANIM resource file in the anim resource directory named auth_main_exit. Just as you did with auth_main_enter, you’ll add animations to the empty set inside.

For a refresher, the goal of the exit animation is to scale the view to a smaller size while also translating the view down and fading it out.

Start by adding the alpha animation to the body of the set. This will fade the view out:

<alpha
  android:duration="@android:integer/config_mediumAnimTime"
  android:fromAlpha="1.0"
  android:toAlpha="0.0" />

This time, you change from an alpha value of 1 to an alpha value of 0, which fades the view out. You also use one of the default animation time durations included in the Android SDK.

Next, add the translation to move the view down:

<translate
  android:duration="@android:integer/config_mediumAnimTime"
  android:fromYDelta="0.0"
  android:toYDelta="20.0%p" />

This time, you translate the view from a starting position at the top of the screen down by 20% of the screen height. You slide down by 20% instead of 100% because you want the downward slide to be subtle.

Building the scale animation

Now that you’ve handled fading the view out and sliding it down, it’s time to add the scale animation. Start by adding the following below the translate block:

<scale
  android:duration="@android:integer/config_shortAnimTime"
  android:fromXScale="1.0"
  android:fromYScale="1.0"
  android:toXScale="0.9"
  android:toYScale="0.9"
  android:pivotX="50%p"
  android:pivotY="50%p" />

Here’s a breakdown of what’s going on:

• The scale animation scales a view up or down on both the X- and Y-axes. Here, you’re saying the animation should start from a scale of 1.0, the normal scaling for the view.
• toXScale and toYScale indicate what the final scaling should be. You used a value of 0.9 here, meaning that the final scaled-down view should be 90% of the size of the original view. It might not seem like much, but subtlety is important in animation.
• Finally, pivotX and pivotY indicate the center of the scale animation. In other words, it’s the point the view should scale toward. Using 50% indicates that the view should scale toward the center of the view.

Now that you’ve defined the enter and exit animations, you can wire them up and see the activity transition in action.

Wiring up the enter and exit activity transitions

Open AuthActivity.kt and navigate to the call to startActivity in onCreate. Add the following below the call to startActivity:

overridePendingTransition(R.anim.auth_main_enter, R.anim.auth_main_exit)

Here, you set the enter and exit animations for the activity using the animation files you fleshed out earlier.

Build and run the app. Tap the Sign In button, then the Log In button to progress to the main activity. You’ll see the authorization activity scale down and fade away, while the main activity slides up and fades in.

The animation looks good, but a couple of things stand out:

1. The exit animation gets lost in the background when the enter animation slides up. Ideally, you’d delay the enter animation until the exit animation finishes playing.
2. The animation is too linear. The enter animation slides up without any easing, which makes it feel mechanical and unnatural.

Next, you’ll solve both of these issues.

Polishing the activity transitions

Your first step is to delay the enter animation to give the exit animation more time to shine.

Open auth_main_enter.xml file. Add the following line to the set declaration at the top of the file:

android:startOffset="200"

startOffset delays the start of the animation by the amount of time you specify. In this scenario, you set an offset of 200 milliseconds to give the exit animation a bit more time to shine.

Build and run the app again. Navigate back to the main screen to trigger the animation. Now, the exit animation runs long enough to be fully emphasized before the enter transition starts. Much better!

Easing the animation

Now, it’s time to tackle the linear motion. You’ll use an interpolator to add some easing to the animation to make it feel more natural. The AccelerateDecelerate interpolator is a particularly good fit here. It’ll cause the motion to accelerate as the animation continues, then quickly decelerate before the end of the animation.

In auth_main_enter.xml, add the following line in the set declaration header, below the startOffset line:

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

The same interpolator will also improve the exit animation. Open auth_main_exit.xml and add the interpolator to the set declaration as well.

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

Run the app again. It’s subtle, but the interpolator adds a nice bit of polish that makes the animation feel more natural.

Your next goal is to apply the same transitions when navigating from the main activity back to the authorization activity.

Transitioning on back press

At this point, you’ve nearly finished your fancy new activity animations. However, the animation only plays when you navigate from the authorization activity to the main activity. Ideally, the same animation sequence would run when the user taps the back button to go from the main activity to the authorization activity.

Note: In a production app, you should set your login process up such that the user never “backs” into the login page, since they should stay logged in. This app has a fake login flow for the sake of emphasizing the animations.

To add an animation after a back press, you’ll use overridePendingTransition again. This time, rather than calling it after a new activity starts, you’ll call it after the main activity finishes.

Open MainActivity.kt. Add the following code below onCreate:

override fun finish() {
  super.finish()
  overridePendingTransition(R.anim.auth_main_enter, R.anim.auth_main_exit)
}

Here, you override finish so you can apply the animations after the activity finishes.

Build and run the app. Navigate to the main activity, then press the back button to transition back to the authorization activity. You’ll see the same animation.

Now that you’ve made the transition from the authorization to the main screen beautiful, you’ll add the same treatment to the transition from the main screen to the detail screen using the navigation component’s animation support.

Using architecture component animations

Run the app and navigate to the main movie list screen. Now, tap one of the movies. You’ll go to the movie details page, but there’s no transition or animation; you’ll change that now.

To do this, you’ll build a fairly simple animation. Your goal is to have the details screen slide in from the right, while the movies list screen slides slightly to the left and fades away. It will look like the details screen slides in over the movie list screen.

Before you start writing the animations, you need to understand how the Android navigation component applies to animations.

The anatomy of a navigation component animation

The Android navigation component works by building up a graph of fragments with connections between each other. Those connections are called actions, and you use them to trigger navigation from one fragment to another.

Each action holds the key to animating the transition. Just like activity animations, actions can have enter and exit animations.

However, in addition to exit and enter animations, you can also specify popEnter and popExit animations. Here’s a quick breakdown of the four different transition types:

• exitAnim: The exit animation governs the exiting fragment when you manually navigate from one fragment to another. So if you triggered a navigation action from PopularMoviesFragment to MovieDetailsFragment, exitAnim would govern how PopularMoviesFragment exits.
• enterAnim: The enter animation governs the entering fragment when you manually navigate from one fragment to another. In the example from the previous bullet, enterAnim would govern how MovieDetailsFragment enters.
• popEnterAnim: The pop enter animation is triggered when you pop the fragment back stack. It applies to the fragment that is re-entering the screen. So when you navigate from PopularMoviesFragment to MovieDetailsFragment and then tap back, the pop enter animation governs how PopularMoviesFragment comes back into the view.
• popExitAnim: The pop exit animation works similarly to the pop enter animation, except that it governs the animation for the fragment now exiting the view. So in the example above, the pop exit animation governs how MovieDetailsFragment leaves the view.

Now that you know all about how navigation component animations work, it’s time to dive in and create the enter and exit animations for Cinematic.

Creating the enter and exit fragment animations

Open the nav_graph_enter animation file in the anim resource directory. Just like before, it’s currently an empty set.

Remember, the enter animation governs the animation of the incoming fragment when you manually trigger a navigation event. That means that this animation governs MovieDetailsFragment when the user taps a movie in PopularMoviesFragment. When that happens, you want MovieDetailsFragment to slide in from the right.

The only animation you’ll need is a simple call to translate. Replace the empty set with the following:

<translate xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:fromXDelta="100%p"
  android:toXDelta="0"
  android:duration="@android:integer/config_mediumAnimTime" />

In the code above, you specify a fromXDelta value of 100%p, which means this animation will start by translating the view 100% of the screen width to the right. So the view will be off-screen on the right when it starts.

You then specify a toXDelta value of 0, meaning the view will slide back in from the left side of the screen, then stop.

Last but not least, you use AccelerateDecelerateInterpolator again to make the motion feel more natural.

Creating the exit animation for the fragment

Next, open the nav_graph_exit file in the anim resource directory. Again, it’s an empty set.

For the exit animation, you want the fragment to slide slightly to the left while fading out. You’ll use the translate and alpha animations to achieve that effect.

Start by adding the following block inside the body of the set:

<translate 
  android:fromXDelta="0" 
  android:toXDelta="-20%p"
  android:duration="@android:integer/config_longAnimTime"/>

Since this animation will govern PopularMoviesFragment when it leaves the view, you set fromXDelta to 0, meaning the animation won’t move the view initially. You then translate the view 20% to the left by using -20%p for toXDelta.

Next, add the alpha animation below the translate block:

<alpha 
  android:fromAlpha="1.0" 
  android:toAlpha="0.0"
  android:duration="@android:integer/config_mediumAnimTime" />

The alpha animation is pretty straightforward. While the animation is running, you fade from full alpha to zero alpha.

Now that you’ve set up the enter and exit animations, it’s time to wire them up and see how it looks.

Setting the navigation component animations

Open nav_graph.xml in res/navigation. Tap the connection between the popularMoviesFragment and movieDetailsFragment views.

Now that you’ve selected the connection, add nav_graph_exit and nav_graph_enter in the exitAnim and enterAnim sections of the attribute window.

Now, build and run the app. Navigate to the popular movies list and tap a movie. You’ll see the details screen slide in from the right while the popular movies screen slides to the left and fades away.

However, if you go back from the movie details page, no animation runs and the details page just disappears. You’ll fix that in the challenge section!

Challenge: Creating the pop enter and pop exit detail animations

In this challenge, you’ll finish up the navigation component animations you started earlier. You’ll first need to wire up the pop enter and pop exit animations in the navigation component.

There’s two ANIM resource files in the anim resource directory named nav_graph_pop_enter and nav_graph_pop_exit. You’ll need to use these two files to handle the popping animations.

In nav_graph.xml populate the popEnter and popExit animation fields in the attribute window with the new nav_graph_pop_enter and nav_graph_pop_exit resource files.

You’ll first need to add an animation to the nav_graph_pop_exit.xml file. Remember that the pop exit animation runs when the user pops a fragment off the back stack, so this animation will run when the user is on the details fragment screen and taps the back button. The animation should translate the details screen off of the screen to the right, so you’ll need to use the translate tag.

After adding the pop exit animation, you’ll then need to add the pop enter animation to the nav_graph_pop_exit.xml file. It again makes sense to reverse the movie list entrance animation, so you’ll want to both translate the movies list screen to the right while also fading it back in. You’ll have to use both the translate and alpha tags in a set to achieve the desired animation!

Once your animation is all finished, it should look like this:

Well done on completing this chapter! Learning to animate fragment and activity transitions is a complex topic. You’ve gotten a taste in this chapter, but you’ll learn more about the subject in the following chapters as well.

Key points

• Use overridePendingTransition for activity animations.
• If you’re outside the activity, use ActivityOptions.makeCustomAnimation.
• Combine sets of animations using the set tag.
• Use startOffset to emphasize one animation over another.
• To make screen transitions feel more natural, use interpolators.
• Use enter and exit animations to give your app a more complex and cohesive feeling.
• Override finish to handle animating when a user taps the back button.
• scale adds a shrinking animation to your screen transitions.
• translate adds vertical or horizontal motion to your screen transitions.
• alpha, in conjunction with scale or translate, creates a more natural and pleasing enter or exit animation.
• Control enter and exit animations by using the enter and exit arguments for the navigation component.
• The navigation component’s popEnter and popExit arguments control animations when popping a fragment off the back stack.

Where to go from here?

You’ve learned a lot about how to create beautiful animations when transitioning between activities or fragments. You animated the transition when the app uses Navigation Controller. To learn more about the Navigation Controller, check out the course https://www.raywenderlich.com/21959768-jetpack-navigation-getting-started. There are many different ways to combine the tools you’ve learned to make creative and fancy animations, so feel free to play around with them to create something beautiful.

In the next chapter, you’ll see how to use the transition framework to create beautiful fragment-to-fragment transitions. See you there!