Animate transitions between destinations

The Navigation component lets you add both property and view animations to actions. To create your own animations, check out Animation resources.

Navigation also includes several default animations to get you started. To add animations to an action, do the following:

1. In the Navigation editor, click on the action where the animation should occur.
2. In the Animations section of the Attributes panel, click the dropdown arrow next to the animation you'd like to add. You can choose between the following types:
   • Entering a destination
   • Exiting a destination
   • Entering a destination via a pop action, an action that pops additional destinations off of the back stack when navigating.
   • Exiting a destination via a pop action
3. Choose an animation from the list of project animations that appears.

Once you've added animations, click the Text tab to toggle to the XML text view. The XML for the animations now appears in the corresponding <action> element. In the following example, specifyAmountFragment is the source destination for the confirmationAction action:

<fragment android:id="@+id/specifyAmountFragment" android:name="com.example.buybuddy.buybuddy.SpecifyAmountFragment" android:label="fragment_specify_amount" tools:layout="@layout/fragment_specify_amount"> <action android:id="@+id/confirmationAction" app:destination="@id/confirmationFragment" app:enterAnim="@anim/slide_in_right" app:exitAnim="@anim/slide_out_left" app:popEnterAnim="@anim/slide_in_left" app:popExitAnim="@anim/slide_out_right" /> </fragment>

Add shared element transitions between destinations

When a view is shared between two destinations, you can use a shared element transition to define how the view transitions when navigating from one destination to the other. Shared element transitions are part of the Transition Framework.

Note: When using shared elements transitions, you should not use the Animation Framework (enterAnim, exitAnim, and so on from the previous section). Instead, you should be using only the Transition Framework for setting your enter and exit transitions.

Shared elements are supplied programmatically rather than through your navigation XML file. Activity and fragment destinations each have a subclass of the Navigator.Extras interface that accepts additional options for navigation, including shared elements. You can pass these Extras when calling navigate().

Note: Be sure to familiarize yourself with shared element transitions before continuing. For fragment shared element transitions, see Navigate between fragments using animations. For activity shared element transitions, see Start an activity using an animation.

Shared element transitions to a fragment destination

The FragmentNavigator.Extras class allows you to map shared elements from one destination to the next by their transition name, similar to using FragmentTransaction.addSharedElement(). You can then pass the extras to navigate(), as shown in the following example:

Shared element transitions to an activity destination

Activities rely on ActivityOptionsCompat to control Shared Element Transitions as detailed in the Start an activity with a shared element documentation and as shown in the example below:

Apply pop animations to activity transitions

When you navigate to or from an Activity, pop animations are not applied automatically. Instead, you must call ActivityNavigator.applyPopAnimationsToPendingTransition() from the target Activity destination where the animation should occur: