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:
- In the Navigation editor, click on the action where the animation should occur.
- 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
- Exiting a destination via a pop action
- 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
In addition to transition animations, Navigation supports adding shared element
transitions between destinations. Shared element transitions are supplied
programmatically rather than through your navigation XML file, as they require
referencing the View
instances that you wish to include in the shared element
transition.
Each type of destination implements this programmatic API through a subclass of
the Navigator.Extras
interface. The Extras
are passed to a call to navigate()
.
Fragment Destination Shared Element Transitions
The FragmentNavigator.Extras
class allows you to attach shared elements to navigate()
calls to fragment
destinations, as shown in the example below:
Kotlin
val extras = FragmentNavigatorExtras( imageView to "header_image", titleView to "header_title") view.findNavController().navigate(R.id.confirmationAction, null, // Bundle of args null, // NavOptions extras)
Java
FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder() .addSharedElement(imageView, "header_image") .addSharedElement(titleView, "header_title") .build(); Navigation.findNavController(view).navigate(R.id.details, null, // Bundle of args null, // NavOptions extras);
Activity Destination Shared Element Transitions
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:
Kotlin
// Rename the Pair class from the Android framework to avoid a name clash import android.util.Pair as UtilPair ... val options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, UtilPair.create(imageView, "header_image"), UtilPair.create(titleView, "header_title")) val extras = ActivityNavigator.Extras(options) view.findNavController().navigate(R.id.details, null, // Bundle of args null, // NavOptions extras)
Java
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(imageView, "header_image"), Pair.create(titleView, "header_title")); ActivityNavigator.Extras extras = new ActivityNavigator.Extras.Builder() .setActivityOptions(options) .build(); Navigation.findNavController(view).navigate(R.id.details, null, // Bundle of args null, // NavOptions extras);
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:
Kotlin
override fun finish() { super.finish() ActivityNavigator.applyPopAnimationsToPendingTransition(this) }
Java
@Override public void finish() { super.finish(); ActivityNavigator.applyPopAnimationsToPendingTransition(this); }