Home Android & Kotlin Books Android Animations by Tutorials

4
Animating Activity & Fragment Transitions With XML Written by Alex Sullivan

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

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:

public void overridePendingTransition(int enterAnim, int exitAnim)

Getting started

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

Csiwdwiya Jahu Uf
Npeki Cmarkridi Leko Iap

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.

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

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" />

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.

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

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

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" />

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)

Polishing the activity transitions

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

android:startOffset="200"

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.

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

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

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.

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

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.

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.

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.

<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" />

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.

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

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

Setting the navigation component animations

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

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.

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.

5. Transition Framework 3. XML Animations

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

© 2022 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99