Predictive back and system animations are enabled by default. If your app intercepts the back event and you haven't migrated to predictive back,[update your app to use supported back navigation APIs](https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture#update-custom)  
The predictive back-to-home animation.  
The predictive cross-activity animation.  
The predictive cross-task animation.

## 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](https://developer.android.com/guide/components/activities/tasks-and-back-stack).

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](https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture#dev-option).
| **Note:** Intercepting back at the root activity (e.g.`MainActivity.kt`) disables the back-to-home animation, and intercepting back at an Activity disables the cross-activity animation.

To get the system animations, update your AndroidX`Activity`dependency to[1.6.0](https://developer.android.com/jetpack/androidx/releases/activity#version_160_3)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](https://developer.android.com/jetpack/androidx/releases/navigation#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`](https://developer.android.com/reference/kotlin/androidx/navigation/compose/package-summary#NavHost(androidx.navigation.NavHostController,kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.reflect.KClass,kotlin.collections.Map,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1))and[`popExitTransition`](https://developer.android.com/reference/kotlin/androidx/navigation/compose/package-summary#NavHost(androidx.navigation.NavHostController,kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.reflect.KClass,kotlin.collections.Map,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)). 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.

<br />

```kotlin
NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)https://github.com/android/snippets/blob/95aeebd507b29719a9e7d5a839f101bbbe42ea72/compose/snippets/src/main/java/com/example/compose/snippets/predictiveback/PredictiveBackSnippets.kt#L62-L75
```

<br />

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](https://developer.android.com/develop/ui/compose/animation/shared-elements/navigation#predictive-back).

## 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](https://developer.android.com/jetpack/androidx/releases/compose-material3)dependency (`androidx.compose.material3:material3-*:1.3.0`or higher) in your project.

The Material components that support predictive back animations include:

- [`SearchBar`](https://m3.material.io/components/search/guidelines#3f2d4e47-2cf5-4c33-b6e1-5368ceaade55)
- [`ModalBottomSheet`](https://m3.material.io/components/bottom-sheets/guidelines#c72ba2b1-906d-4cfa-9a6a-91e79555bad0)
- [`ModalDrawerSheet/DismissibleDrawerSheet`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))
- [`ModalNavigationDrawer/DismissibleNavigationDrawer`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))

[`SearchBar`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))and[`ModalBottomSheet`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1))automatically animate with predictive back gestures.[`ModalNavigationDrawer`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ModalNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Color,kotlin.Function0)),[`ModalDrawerSheet`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)),[`DismissibleDrawerSheet`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#DismissibleDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)), and[`DismissibleNavigationDrawer`](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#DismissibleNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,kotlin.Function0))require you to pass the`drawerState`to their respective sheet content composables.

## 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

- [Add predictive back animations codelab](https://developer.android.com/codelabs/predictive-back#0)
- [Advanced layout animations in Compose video](https://www.youtube.com/watch?v=PR6rz1QUkAM&t=1195s&ab_channel=AndroidDevelopers)