Cómo configurar el gesto atrás predictivo

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

Habilita 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 pantalla principal: Devuelve 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 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 de fundido cruzado entre 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 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 quita la pila de actividades, por ejemplo, con un gesto atrás. También puedes usar enterTransition y exitTransition para definir animaciones de entrada y salida de elementos de componibilidad 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 quitar elementos de la pila de actividades. Sin embargo, el uso de popEnterTransition y popExitTransition te permite crear animaciones distintas para la navegación hacia atrás.

Cómo realizar la 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 suelen usarse para la navegación.

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

Cómo admitir 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 atrás predictivos. 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 una versión posterior) en tu proyecto.

Entre los componentes de Material que admiten animaciones de atrás predictivo, se incluyen los siguientes:

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

SearchBar y ModalBottomSheet se animan automáticamente con los gestos atrás predictivos. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet y DismissibleNavigationDrawer requieren que pases el drawerState a sus respectivos elementos componibles de contenido de 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 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

• Codelab para agregar animaciones de atrás predictivo
• Video sobre animaciones de diseño avanzadas en Compose