Predictive back in Compose

Predictive back, a gesture navigation feature, lets users preview where the back swipe takes them. Predictive back seamlessly integrates with Compose to enhance your app's navigation experience. Users enjoy smoother and more intuitive transitions when navigating back within your app. Figure 1 shows how this works in the SociaLite sample app.

Figure 1. The back-to-home animation in the SociaLite sample app.

This guide describes how to do the following with predictive back:

  • Opt-in to the predictive back gesture
  • Enable default system animations
  • Enable predictive back with Navigation Compose
  • Integrate with shared element transitions
  • Support predictive back with Material Compose components
  • Access progress manually with PredictiveBackHandler
  • Test the predictive back gesture animation

Opt-in to the predictive back gesture

To enable predictive back animations, you must opt-in to support the predictive back gesture. To opt-in, add android:enableOnBackInvokedCallback="true" to the <application> tag or individual <activity> tags within your AndroidManifest.xml file.

Enable default system animations

The back-to-home, cross-activity, and cross-task system animations are available on Android 15 and later devices for apps that have migrated to the supported back handling APIs.

  • Back-to-home: Returns the user to the home screen.
  • Cross-activity: Transitions between activities within the app.
  • Cross-task: Transitions between tasks.

These animations are enabled by default on Android 15 and higher. On devices running Android 13 or 14, users can enable them through the Developer options.

To get the system animations, update your AndroidX Activity dependency to 1.6.0 or higher.

Enable predictive back with Navigation Compose

To use predictive back in Navigation Compose, ensure you're using the navigation-compose 2.8.0 library or higher.

Navigation Compose automatically cross-fades between screens when the user swipes back:

Figure 2. The default crossfade in-app animation in SociaLite.

When navigating, you can create custom transitions with popEnterTransition and popExitTransition. When applied to your NavHost, these modifiers let you define how the enter and exit screens animate. You can use them to create a variety of effects, such as scaling, fading, or sliding.

In this example, scaleOut is used within popExitTransition to scale down the exiting screen as the user navigates back. Additionally, the transformOrigin parameter determines the point around which the scaling animation occurs. By default, it's the center of the screen (0.5f, 0.5f). You can adjust this value to make the scaling originate from a different point.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

This code produces the following result:

Figure 3. A custom in-app animation in SociaLite.

popEnterTransition and popExitTransition specifically control animations when popping the back stack, with a back gesture, for example. You can also use enterTransition and exitTransition to define animations for entering and exiting composables in general, not only for predictive back. If you only set enterTransition and exitTransition, they are used for both regular navigation and popping the back stack. However, using popEnterTransition and popExitTransition lets you create distinct animations for back navigation.

Integrate with shared element transitions

Shared element transitions provide a smooth visual connection between composables with shared content, often used for navigation.

Figure 4. Shared element transition with predictive back in Navigation Compose.

To use shared elements with Navigation Compose, see Predictive back with shared elements.

Support predictive back with Material Compose components

Many components in the Material Compose library are designed to work seamlessly with predictive back gestures. To enable predictive back animations in these components, include the latest Material3 dependency (androidx.compose.material3:material3-*:1.3.0 or higher) in your project.

The Material components that support predictive back animations include:

SearchBar and ModalBottomSheet automatically animate with predictive back gestures. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet, and DismissibleNavigationDrawer require you to pass the drawerState to their respective sheet content composables.

Access progress manually with PredictiveBackHandler

The PredictiveBackHandler[5] composable in Jetpack Compose lets you intercept the back gesture and access its progress. You can react to the user's back gesture in real-time, creating custom animations or behaviors based on how far the user swipes.

To use the PredictiveBackHandler, ensure you are using androidx.activity:activity:1.6.0 or higher.

PredictiveBackHandler provides a Flow<BackEventCompat> that emits events representing the progress of the back gesture. Each event contains information such as:

  • progress: A float value between 0 and 1 indicating the progress of the back gesture (0 = gesture started, 1 = gesture completed).
  • touchX and touchY: The X and Y coordinates of the touch event.

The following snippet shows basic usage of PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

Example: Integrate with a navigation drawer

This example demonstrates how to implement a custom in-app animation using PredictiveBackHandler to create a smooth interaction with a navigation drawer in response to back gestures in JetLagged:

Figure 5. Navigation drawer with predictive back support.

In this example, PredictiveBackHandler is used to:

  • Track the progress of the back gesture.
  • Update the translationX of the drawer based on the gesture progress.
  • Use a velocityTracker to smoothly open or close the drawer based on the gesture velocity when the gesture is completed or canceled.

Test the predictive back gesture animation

If you still use Android 13 or Android 14, you can test the back-to-home animation.

To test this animation, follow these steps:

  1. On your device, go to Settings > System > Developer options.
  2. Select Predictive back animations.
  3. Launch your updated app, and use the back gesture to see it in action.

On Android 15 and later, this feature is enabled by default.

Additional resources