Cómo configurar el gesto atrás predictivo

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

Habilita las animaciones predeterminadas del sistema

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

• Volver a la pantalla principal: Regresa al usuario a la pantalla principal.
• Cambio de actividad: Realiza una transición entre las actividades dentro de la app.
• Cambio de tarea: Realiza una transición entre las tareas.

Estas animaciones están habilitadas de forma predeterminada en Android 15 y versiones posteriores. En 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 posterior.

Habilita el gesto atrás predictivo con Navigation Compose

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

Navigation Compose realiza automáticamente un fundido cruzado entre las pantallas cuando el usuario desliza el dedo hacia atrás:

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 usarlos para crear una variedad de efectos, como escalamiento, atenuación o deslizamiento.

En este ejemplo, se usa scaleOut dentro de popExitTransition para reducir la pantalla de salida a medida que el usuario navega hacia atrás. Además, el parámetro transformOrigin determina en 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 la pila de actividades, con un gesto atrás, por ejemplo. También puedes usar enterTransition y exitTransition para definir animaciones para ingresar y salir de elementos componibles en general, no solo para el gesto atrás predictivo. Si solo configuras enterTransition y exitTransition, se usarán para la navegación normal y para extraer la pila de actividades. 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 los elementos componibles con contenido compartido, que se usa con frecuencia para la navegación.

Para usar elementos compartidos con Navigation Compose, consulta Gesto 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 retroceso predictivos. Para habilitar las animaciones de atrás predictivo en estos componentes, incluye la dependencia más reciente de Material3 (androidx.compose.material3:material3-*:1.3.0 o una versión 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 gestos de retroceso predictivos. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet y DismissibleNavigationDrawer requieren que pases el drawerState a sus respectivos elementos componibles de contenido de hoja.

Probar la animación de gesto atrás predictivo

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

Para probar la 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 atrás para verlo en acción.

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

Recursos adicionales

• Codificadores de animaciones de atrás predictivo
• Video de animaciones de diseño avanzadas en Compose