Cómo configurar el gesto atrás predictivo

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Para habilitar las animaciones de atrás predictivo, debes habilitar el gesto atrás predictivo. Para habilitarlo, agrega "android:enableOnBackInvokedCallback="true" a la etiqueta <application> o a las etiquetas <activity> individuales dentro del archivo AndroidManifest.xml.

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.

• Botón de regreso a la pantalla principal: Regresa al usuario a la pantalla principal.
• Entre actividades: Son 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 dispositivos que ejecutan Android 13 o 14, los usuarios pueden habilitarlos a través de las Opciones para desarrolladores.

Para obtener las animaciones del sistema, actualiza la dependencia Activity de AndroidX 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 de navigation-compose 2.8.0 o una versión posterior.

Navigation Compose realiza una transición entre pantallas automáticamente 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, desvanecimiento 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 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 un punto diferente.

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 muestra la pila de actividades, por ejemplo, con un gesto atrás. También puedes usar enterTransition y exitTransition para definir animaciones para ingresar a elementos componibles y salir de ellos en general, no solo para el gesto atrás predictivo. Si solo configuras enterTransition y exitTransition, se usan para la navegación normal y para quitar la pila de actividades. Sin embargo, usar popEnterTransition y popExitTransition te permite crear animaciones distintas para la navegación hacia atrás.

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

Para usar elementos compartidos con Navigation Compose, consulta 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 Material3 más reciente (androidx.compose.material3:material3-*:1.3.0 o versiones posteriores) 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 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 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 para agregar animaciones del gesto atrás predictivo
• Video de animaciones de diseño avanzadas en Compose