Cómo configurar el gesto atrás predictivo

Las animaciones del sistema y el gesto atrás predictivo están habilitados de forma predeterminada. Si tu app intercepta el evento de retroceso y no migraste al gesto atrás predictivo, actualiza tu app para que use las APIs de navegación hacia atrás compatibles.

Cómo habilitar las animaciones predeterminadas del sistema

Las animaciones del sistema para volver a la pantalla principal, cambiar de actividad y cambiar de tarea están disponibles en dispositivos con Android 15 y versiones posteriores para las apps que migraron a las APIs de control de atrás compatibles.

• Volver a la página principal: Regresa al usuario a la pantalla principal.
• Entre actividades: Transiciones entre actividades dentro de la app
• Tareas cruzadas: Transiciones entre tareas.

Estas animaciones están habilitadas de forma predeterminada en Android 15 y versiones posteriores. En los dispositivos que ejecutan Android 13 o 14, los usuarios pueden habilitarlas a través de las Opciones para desarrolladores.

Para obtener las animaciones del sistema, actualiza tu dependencia de AndroidX Activity a 1.6.0 o una versión posterior.

Habilita el gesto de atrás predictivo con Navigation Compose

Para usar el gesto atrás predictivo en Navigation Compose, asegúrate de usar la biblioteca navigation-compose 2.8.0 o una versión posterior.

Navigation Compose realiza automáticamente una transición cruzada entre las pantallas cuando el usuario desliza el dedo para volver:

Cuando navegas, puedes crear transiciones personalizadas con popEnterTransition y popExitTransition. Cuando se aplican a tu NavHost, estos modificadores te permiten definir cómo se animan las pantallas de entrada y salida. Puedes usarlas para crear una variedad de efectos, como escalar, desvanecer o deslizar.

En este ejemplo, se usa scaleOut dentro de popExitTransition para reducir la escala de la pantalla de salida a medida que el usuario navega hacia atrás. Además, el parámetro transformOrigin determina el punto alrededor del cual se produce la animación de escalamiento. De forma predeterminada, es el centro de la pantalla (0.5f, 0.5f). Puedes ajustar este valor para que el escalamiento se origine desde otro punto.

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

Este código produce el siguiente resultado:

popEnterTransition y popExitTransition controlan específicamente las animaciones cuando se extrae de la pila de actividades, por ejemplo, con un gesto de atrás. También puedes usar enterTransition y exitTransition para definir animaciones para ingresar y salir de elementos componibles en general, no solo para el gesto de atrás predictivo. Si solo configuras enterTransition y exitTransition, se usarán para la navegación normal y para quitar elementos de la pila de elementos atrás. Sin embargo, usar popEnterTransition y popExitTransition te permite crear animaciones distintas para la navegación hacia atrás.

Integración con transiciones de elementos compartidos

Las transiciones de elementos compartidos proporcionan una conexión visual fluida entre elementos componibles con contenido compartido, que a menudo se usan para la navegación.

Para usar elementos compartidos con Navigation Compose, consulta Atrás predictivo con elementos compartidos.

Compatibilidad con el gesto atrás predictivo con componentes de Material Compose

Muchos componentes de la biblioteca de Material Compose están diseñados para funcionar sin problemas con los gestos de atrás predictivo. Para habilitar las animaciones de atrás predictivo en estos componentes, incluye la dependencia de Material3 más reciente (androidx.compose.material3:material3-*:1.3.0 o posterior) en tu proyecto.

Los componentes de Material que admiten animaciones de atrás predictivo incluyen los siguientes:

• SearchBar
• ModalBottomSheet
• ModalDrawerSheet/DismissibleDrawerSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

SearchBar y ModalBottomSheet se animan automáticamente con los gestos de retroceso predictivos. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet y DismissibleNavigationDrawer requieren que pases el drawerState a sus respectivos elementos componibles de contenido de la hoja.

Prueba la animación del gesto de retroceso predictivo

Si aún usas Android 13 o Android 14, puedes probar la animación de volver a la pantalla principal.

Para probar esta animación, sigue estos pasos:

1. En tu dispositivo, ve a Configuración > Sistema > Opciones para desarrolladores.
2. Selecciona Animaciones del gesto atrás predictivo.
3. Inicia la app actualizada y usa el gesto de retroceso para verlo en acción.

En Android 15 y versiones posteriores, esta función está habilitada de forma predeterminada.

Recursos adicionales

• Codelab de cómo agregar animaciones del gesto atrás predictivo
• Video sobre animaciones de diseño avanzadas en Compose