Navigate between fragments using animations

The Fragment API provides two ways to use motion effects and transformations to visually connect fragments during navigation. One of these is the Animation Framework, which uses both Animation and Animator. The other is the Transition Framework, which includes shared element transitions.

You can specify custom effects for entering and exiting fragments and for transitions of shared elements between fragments.

  • An enter effect determines how a fragment enters the screen. For example, you can create an effect to slide the fragment in from the edge of the screen when you navigate to it.
  • An exit effect determines how a fragment exits the screen. For example, you can create an effect to fade the fragment out when navigating away from it.
  • A shared element transition determines how a view that is shared between two fragments moves between them. For example, an image displayed in an ImageView in fragment A transitions to fragment B once B becomes visible.

Set animations

First, you need to create animations for your enter and exit effects, which are run when navigating to a new fragment. You can define animations as tween animation resources. These resources allow you to define how fragments should rotate, stretch, fade, and move during the animation. For example, you might want the current fragment to fade out and the new fragment to slide in from the right edge of the screen, as shown in figure 1.

Enter and exit animations. The current fragment fades out while the next fragment slides in from the right.
Figure 1. Enter and exit animations. The current fragment fades out while the next fragment slides in from the right.

These animations can be defined in the res/anim directory:

<!-- res/anim/fade_out.xml -->
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="1"
    android:toAlpha="0" />

<!-- res/anim/slide_in.xml -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromXDelta="100%"
    android:toXDelta="0%" />

You can also specify animations for the enter and exit effects that are run when popping the back stack, which can happen when the user taps the Up or Back button. These are called the popEnter and popExit animations. For example, when a user pops back to a previous screen, you might want the current fragment to slide off the right edge of the screen and the previous fragment to fade in.

popEnter and popExit animations. The current fragment slides off the screen to the right while the previous fragment fades in.
Figure 2. popEnter and popExit animations. The current fragment slides off the screen to the right while the previous fragment fades in.

These animations can be defined as follows:

<!-- res/anim/slide_out.xml -->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromXDelta="0%"
    android:toXDelta="100%" />

<!-- res/anim/fade_in.xml -->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="0"
    android:toAlpha="1" />

Once you've defined your animations, use them by calling FragmentTransaction.setCustomAnimations(), passing in your animation resources by their resource ID, as shown in the following example:

Kotlin

supportFragmentManager.commit {
    setCustomAnimations(
        R.anim.slide_in, // enter
        R.anim.fade_out, // exit
        R.anim.fade_in, // popEnter
        R.anim.slide_out // popExit
    )
    replace(R.id.fragment_container, fragment)
    addToBackStack(null)
}

Java

Fragment fragment = new FragmentB();
getSupportFragmentManager().beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in,  // enter
        R.anim.fade_out,  // exit
        R.anim.fade_in,   // popEnter
        R.anim.slide_out  // popExit
    )
    .replace(R.id.fragment_container, fragment)
    .addToBackStack(null)
    .commit();

Set transitions

You can also use transitions to define enter and exit effects. These transitions can be defined in XML resource files. For example, you might want the current fragment to fade out and the new fragment to slide in from the right edge of the screen. These transitions can be defined as follows:

<!-- res/transition/fade.xml -->
<fade xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"/>

<!-- res/transition/slide_right.xml -->
<slide xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:slideEdge="right" />

Once you've defined your transitions, apply them by calling setEnterTransition() on the entering fragment and setExitTransition() on the exiting fragment, passing in your inflated transition resources by their resource ID, as shown in the following example:

Kotlin

class FragmentA : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val inflater = TransitionInflater.from(requireContext())
        exitTransition = inflater.inflateTransition(R.transition.fade)
    }
}

class FragmentB : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val inflater = TransitionInflater.from(requireContext())
        enterTransition = inflater.inflateTransition(R.transition.slide_right)
    }
}

Java

public class FragmentA extends Fragment {
    @Override
    public