Chapters
Chapters

Chapters

Hide chapters

Android Animations by Tutorials

First Edition · Android 12 · Kotlin 1.5 · Android Studio Artic Fox

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: View & Property Animations

Section 1: 3 chapters
Show chapters Hide chapters

Section II: Screen Transitions

Section 2: 3 chapters
Show chapters Hide chapters

Section III: List & Gesture Animations

Section 3: 3 chapters
Show chapters Hide chapters

Section IV: Jetpack Compose Animations

Section 4: 2 chapters
Show chapters Hide chapters

5. Transition Framework
Written by Alex Sullivan

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, you learned all about using anim resource files to animate between different activities and fragments. But while you can create beautiful screen-to-screen animations that way, sometimes you want to apply different animations to specific views and create more complex behavior when transitioning between fragments or activities. That’s where the Transition framework comes into play.

In this chapter, you’ll:

  • Learn what the Transition framework is and how it differs from anim resource files.
  • Programmatically create transition animation objects to animate between fragments.
  • Create complex transitions using transition sets.
  • Troubleshoot common pitfalls when using the Transition framework.

Introducing the Transition framework

The Transition framework is yet another animation framework you can use when building Android apps. Unlike the other animation frameworks you’ve learned about, you use the transition framework on entire ViewGroups to animate either changes in visibility throughout the ViewGroups children or to animate complete changes to the ViewGroup‘s structure. So rather than focusing on one specific View to animate, you use Transition to build animations for changes to a whole set of Views. This makes it easy to do things like animate changes to a view’s visibility or create complex and beautiful fragment and activity animations!

Just as with the Animation and Animator frameworks, you can use the transition framework by either creating static XML files or programmatically instantiating Transition objects. In this chapter, you’ll focus on using transitions programmatically to define Fragment animations when switching between the AuthFragment, SignupFragment and LoginFragment objects.

The anatomy of a Fragment transition

In Chapter 4, “Animating Activity & Fragment Transitions With XML”, you learned how to apply navigation component fragment animations by using the enterAnim, exitAnim, popEnterAnim and popExitAnim fields in nav_graph.xml. The flow is similar when you use the transition framework, except you apply the animation arguments on the actual Fragment instead of in the navigation graph XML file.

Creating a fade transition

The first animation you’ll build with the transition framework is a simple fade between the AuthFragment and the SignupFragment. The user triggers this animation by tapping the I’m new to Cinematic button on the initial authorization screen.

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
}

exitTransition = Fade()

Fading the signup screen in

Now that you’ve set the exitTransition on AuthFragment, it’s time to do the same song and dance in SignupFragment. Start by opening SignupFragment.kt and overriding onCreate:

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
}

enterTransition = Fade()

Using Material Design transitions

Google produced the Material Design library for Android to help developers make Material Design-oriented apps. Open build.gradle and you’ll see that it already includes the Material Design library:

implementation 'com.google.android.material:material:1.3.0'

exitTransition = MaterialSharedAxis(MaterialSharedAxis.X, true)


exitTransition = MaterialSharedAxis(MaterialSharedAxis.X, true).apply {
  duration = 1000
}

Cleaning up the material transition

Two major areas need improvement in the existing AuthFragment-to-SignupFragment animation:

returnTransition = MaterialSharedAxis(MaterialSharedAxis.X, false).apply {
  duration = 1000
}


reenterTransition = MaterialSharedAxis(MaterialSharedAxis.X, false)

Fixing flashing views with transition groups

Before tackling the flashing view bug, you need to understand how a transition typically animates views within a ViewGroup. The transition framework will attempt to animate each view individually within a ViewGroup unless you tell the system that it should animate the ViewGroup as a singular view. You do that using the transitionGroup property on ViewGroup.

android:transitionGroup="true"

Animating individual views

One of the coolest things about the transition framework is that you can target individual views to run different animations. For this app, you’ll add a special animation to the Cinematic TextView so it slides up in the AuthFragment exit transition and slides back down in the SignupFragment enter transition.

Combining transitions with transition sets

A TransitionSet is a special transition that acts as a container for multiple other transitions. You can think of it as the transition framework version of the AnimationSet utility you used in Chapter 4, “Animating Activity & Fragment Transitions With XML”. Here, you’ll use a TransitionSet to combine the MaterialSharedAxis transition with a new Slide transition to achieve the animation you want.

val exitTransitionSet = TransitionSet().apply { 

}

val materialSlideOut = MaterialSharedAxis(MaterialSharedAxis.X, true).apply {
  duration = 1000
}

val logoSlideUp = Slide(Gravity.TOP).apply {
  duration = 700
}

addTransition(materialSlideOut)
addTransition(logoSlideUp)

ordering = TransitionSet.ORDERING_TOGETHER

exitTransition = exitTransitionSet

Targeting a specific view in a transition

Now that you’ve defined your transitions, all that’s left is to make sure the Slide transition only runs for the logo TextView while the MaterialSharedAxis transition runs for everything else.

excludeTarget(R.id.logo, true)

addTarget(R.id.logo)

Sliding the logo view back down

The only thing left to do to finish this beautiful animation is to have the logo TextView slide down when you get to the SignupFragment.

enterTransition = Slide(Gravity.TOP).addTarget(R.id.signup_logo).setDuration(700)

android:transitionGroup="false"

Changing the transition group logic

The screen flashes because, now that the layout isn’t a transition group, the top-level layout fades out at a different time than the other views on the screen. Because the top-level layout contains the background for the screen, you see the bare white screen exposed behind it.

// 1
activity?.onBackPressedDispatcher?.addCallback(viewLifecycleOwner) {
  // 2
  binding.root.isTransitionGroup = true
  // 3
  parentFragmentManager.popBackStack()
}

Challenges

Challenge 1: Add transition animations to LoginFragment

Right now, the animations run beautifully when you navigate from AuthFragment to SignupFragment, but the LoginFragment doesn’t have any transitions. As a result, the animation looks off when you navigate from AuthFragment to LoginFragment. In this challenge, you’ll update the LoginFragment to show the same animations as you used for SignupFragment.

Challenge 2: Add a fade transition to work with the logo slide transition

Now that the logo slides in on both the LoginFragment and SignupFragment, you can take it one step farther! In this challenge, you’ll have the logo slide in while also fading in.

Key points

  • The Transition framework is an alternative way to create beautiful Fragment and Activity animations.
  • Make sure to use the AndroidX version of the transition framework, rather than the platform version.
  • You can use the enterTransition/exitTransition/reenterTransition/returnTransition properties on Fragment to set transitions for different Fragment scenarios.
  • Use the Material Design library and the MaterialSharedAxis transition for some easy animation wins.
  • TransitionSet lets you combine multiple transitions.
  • You can also use Fade and Slide to easily fade and slide views into the scene.
  • Target individual views with the addTarget API.
  • Remove individual views from a given transition by using the remoteTarget API.
  • If you want a ViewGroup to animate as one unit, set the transitionGroup flag in XML or the isTransitionGroup property in code.
  • If you see strange behavior like white flashes or views not animating, there’s a good chance you need to tweak the transitionGroup property.
4. Animating Activity & Fragment Transitions With XML
6. Element Transitions
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.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now