When using the system back APIs, you can opt in to receive in-app animations and support custom transitions.
After opting in, your app displays animations for back-to-home, cross-activity, and cross-task.
You can also upgrade your material component dependency to v1.10.0 of MDC Android to receive material component animations like the following:
See the material component developer guidance on GitHub for more information.
The video shows a brief example of predictive back animations for cross-activity and back-to-home using the Android Settings app.
- In the animation, the user swipes back to return to the previous settings screen—an example of a cross-activity animation.
- Now on the previous screen, the user begins swiping back a second time, showing a preview of the home screen with its wallpaper—an example of the back-to-home animation.
- The user continues to swipe right, showing an animation of the window shrinking down to the icon on the home screen.
- The user has now fully returned to the home screen.
Learn more about how to Add support for predictive back gestures.
Add custom in-app transitions and animations
You can create custom in-app property animations and transitions using the
Progress API and custom cross-activity animations method
overrideActivityTransition
.
Add custom transitions using the Progress API
With AndroidX Activity 1.8.0-alpha01 or higher, you can use the Predictive Back
Progress APIs to develop custom animations for
the predictive back gesture in your app. Within
OnBackPressedCallback
we've introduced the handleOnBackProgressed
, handleOnBackCancelled
and
handleOnBackStarted
methods to animate objects while the user swipes back. Use
these methods if you need something more custom than the default animations
provided by the new system animations or the Material Component animations.
We expect most apps to use the backward compatible AndroidX APIs, but there are
also similar platform APIs within the
OnBackAnimationCallback
interface available to test in Android 14 Developer Preview 1 and higher.
Use the Progress APIs with AndroidX Transitions
The Progress APIs can be used with AndroidX Transitions 1.5.0-alpha01 or higher on Android 14 and above to create Predictive Back transitions.
- Use
TransitionManager#controlDelayedTransition
instead ofbeginDelayedTransition
to play transitions as the user swipes back. - Create the transition within
handleOnBackStarted
. - Play the transition with the back event within
handleOnBackProgressed
by relatingcurrentFraction
toBackEvent.progress
which exposes how far the user has swiped back. - Finish the transition after the user has committed the back gesture in
handleOnBackPressed
. - Finally, reset the state of the transition within
handleOnBackCancelled
.
The following video, Kotlin code, and XML demonstrate a custom transition
between two boxes implemented with OnBackPressedCallback
:
class MyFragment : Fragment() { val transitionSet = TransitionSet().apply { addTransition(Fade(Fade.MODE_OUT)) addTransition(ChangeBounds()) addTransition(Fade(Fade.MODE_IN)) } ... override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) val callback = object : OnBackPressedCallback(enabled = false) { var controller: TransitionSeekController? = null @RequiresApi(34) override fun handleOnBackStarted(backEvent: BackEvent) { // Create the transition controller = TransitionManager.controlDelayedTransition( binding.card, transitionSet ) changeTextVisibility(ShowText.SHORT) } @RequiresApi(34) override fun handleOnBackProgressed(backEvent: BackEvent) { // Play the transition as the user swipes back if (controller?.isReady == true) { controller?.currentFraction = backEvent.progress } } override fun handleOnBackPressed() { // Finish playing the transition when the user commits back controller?.animateToEnd() this.isEnabled = false } @RequiresApi(34) override fun handleOnBackCancelled() { // If the user cancels the back gesture, reset the state transition(ShowText.LONG) } } binding.shortText.setOnClickListener { transition(ShowText.LONG) callback.isEnabled = true } this.requireActivity().onBackPressedDispatcher.addCallback(callback) } private fun transition(showText: ShowText) { TransitionManager.beginDelayedTransition( binding.card, transitionSet ) changeTextVisibility(showText) } enum class ShowText { SHORT, LONG } private fun changeTextVisibility(showText: ShowText) { when (showText) { ShowText.SHORT -> { binding.shortText.isVisible = true binding.longText.isVisible = false } ShowText.LONG -> { binding.shortText.isVisible = false binding.longText.isVisible = true } } } }
<?xml version="1.0" encoding="utf-8"?>
...
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...>
<TextView
android:id="@+id/short_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
... />
<TextView
android:id="@+id/long_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
.../>
</androidx.constraintlayout.widget.ConstraintLayout>
When working with Predictive Back transitions, keep the following in mind:
- Use
isSeekingSupported
to check if the transition supports Predictive Back. - Override
isSeekingSupported
to return true for your custom transitions. - Create one controller per animation.
- Predictive Back transitions are supported with AndroidX transitions, but not with framework transitions. We recommend migrating away from framework transitions.
- Predictive Back transitions are supported on devices running Android 14 and higher and are not backward compatible.
- Transitions created with XML scenes are also supported. In
handleOnBackStarted
, set yourTransitionSeekController
to the result ofTransitionManager.createSeekController
instead of the result ofcontrolDelayedTransition
.
Add custom activity transitions on Android 14 and higher
To ensure that custom Activity transitions support Predictive Back on Android 14
and higher, you can use overrideActivityTransition
instead of
overridePendingTransition
. This means that the transition animation plays as
the user swipes back.
To provide an example of how this might work, imagine a scenario in which Activity B is on top of Activity A in the back stack. You would handle custom Activity animations in the following way:
- Call either opening or closing transitions within Activity B's
onCreate
method. - When the user navigates to Activity B, use
OVERRIDE_TRANSITION_OPEN
. When the user swipes to navigate back to Activity A, useOVERRIDE_TRANSITION_CLOSE
. When specifying
OVERRIDE_TRANSITION_CLOSE
, theenterAnim
is Activity A's enter animation and theexitAnim
is Activity B's exit animation.
Add support for Predictive Back with fragments
Fragments now support Predictive Back transitions. With this feature, users can
swipe from the edge of their screen to manipulate your Animator
or
Androidx Transition
with the gesture. Whether you move the gesture past a
threshold determines whether it is completed and you return to the previous
fragment or it is cancelled and you remain on the current fragment.
For more information, see Navigate between fragments using animations.
When implementing Predictive Back with fragments, keep the following in mind:
- Import Transitions 1.5.0 or later and Fragments 1.7.0 or later. Much of predictive back support within Fragments relies on Transitions being able to seek animations, which is only possible in Transitions 1.5.0 or later.
- Use Fragments, with either
FragmentManager
or the Navigation Component, to handle the back stack. Predictive Back is not supported if you manage your own back stack. - Some libraries include Predictive Back support. Check the documentation to be sure.
- The
Animator
class andAndroidX Transition
library are supported. - The
Animation
class and frameworkTransition
library are not supported. - Predictive animations only work on devices that run Android 14 or higher.
Use predictive back cross-fragments in the following situations:
- Animate the navigation component.
- Animate with
setCustomAnimations
. - Animate shared element transitions with
setEnterTransition
,setExitTransition
,setReenterTransition
,setReturnTransition
,setSharedElementEnterTransition
, andsetSharedElementReturnTransition
.
Requirements
Use the following tables to understand what is controlled by developer options,
targetSdkVersion
and compileSdkVersion
, device version, dependencies,
manifest flags, and fragment flags. The first table refers to code requirements.
Category | Animation | compileSdk | targetSdk | android:enableOnBackInvokedCallback | Dependency |
---|---|---|---|---|---|
System Animations | Back-to-home | 33 | Any | TRUE | None |
Cross-activity | 34 | Any | TRUE | None | |
Cross-task | 34 | Any | TRUE | None | |
Platform | Custom cross-activity | 34 | Any | TRUE | None |
Progress API Platform | 34 | Any | TRUE | None | |
Material Components | Bottom Sheet | 34 | Any | TRUE | Material Component 1.10.0 |
Side Sheet | 34 | Any | TRUE | Material Component 1.10.0 | |
Navigation Drawer | 34 | Any | TRUE | Material Component 1.10.0 | |
Search | 34 | Any | TRUE | Material Component 1.10.0 | |
Jetpack Animations | Custom AndroidX cross-fragment | 34 | Any | TRUE | AndroidX Fragment 1.7 |
Custom AndroidX Transitions | 34 | Any | TRUE | AndroidX Transition 1.5 | |
Progress API Jetpack | 34 | Any | TRUE | AndroidX Activity 1.8 |
The following table refers to requirements that allow users to see animations.
Category | Animation | Developer Option enabled | Device version |
---|---|---|---|
System Animations | Back-to-home | TRUE | 33 |
Cross-activity | TRUE | 34 | |
Cross-task | TRUE | 34 | |
Platform | Custom cross-activity | TRUE | 34 |
Progress API Platform | FALSE | 34 | |
Material Components | Bottom Sheet | FALSE | 34 |
Side Sheet | FALSE | 34 | |
Navigation Drawer | FALSE | 34 | |
Search | FALSE | 34 | |
Jetpack Animations | Custom AndroidX cross-fragment | FALSE | 34 |
Custom AndroidX Transitions | FALSE | 34 | |
Progress API Jetpack | FALSE | 34 |