Agrega animaciones de atrás predictivo

1. Antes de comenzar

En este codelab, se explica el proceso para agregar animaciones de atrás predictivo a la app de SociaLite. Agregarás la animación de volver a la pantalla principal y animaciones predeterminadas integradas en la app, y crearás una animación personalizada integrada en la app. Por último, aprenderás sugerencias adicionales para agregar animaciones de atrás predictivo a la app.

Requisitos previos

• Conocimientos básicos de Kotlin
• Conocimientos básicos de Compose
• Haber completado el codelab sobre configuración de Android Studio o saber cómo usar Android Studio y probar apps en un emulador de Android 15 o un dispositivo físico que ejecute Android 15
• Opcional: Haber completado el codelab Haz que tu app se extienda de borde a borde

Qué aprenderás en este codelab

• Cómo agregar las siguientes animaciones de atrás predictivo:
• Volver a la pantalla principal
• Animaciones predeterminadas integradas en la app
• Animaciones personalizadas integradas en la app

Requisitos

• La versión más reciente de Android Studio
• Un dispositivo de prueba o un emulador de Android 15 beta 2 o una versión posterior
• Tener habilitada la navegación por gestos en el dispositivo de prueba o el emulador

2. Obtén el código de partida

1. Si completaste el codelab Haz que tu app se extienda de borde a borde, continúa a la sección Agrega animaciones de atrás predictivo porque ya tienes el código de partida.
2. Descarga el código de partida de GitHub o clona el repositorio, y obtén la rama codelab_improve_android_experience_2024.

$ git clone git@github.com:android/socialite.git
$ cd socialite
$ git checkout codelab_improve_android_experience_2024

3. Abre SociaLite en Android Studio y ejecuta la app en tu dispositivo o emulador con Android 15. Verás una pantalla como la siguiente:

SociaLite con navegación por gestos

Este codelab está pensado para completarse después del codelab Haz que tu app se extienda de borde a borde. Si no completaste ese codelab, antes de continuar, como mínimo asegúrate de que la opción de borde a borde esté habilitada en el archivo MainActivity.kt, ya que las animaciones de atrás predictivo integradas en la app se ven óptimas cuando esta se extiende de borde a borde.

Si no está la opción, agrega enableEdgetoEdge() antes de configurar el contenido en el archivo MainActivity.kt. Agregar esta línea te permitirá continuar con el resto de este codelab, aunque es posible que las barras de navegación del sistema obstruyan la IU de la parte inferior dentro de un hilo de chats. Para quitar la obstrucción de la IU inferior, consulta el codelab Haz que tu app se extienda de borde a borde.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
   // Ensure to add this line if you haven't already completed the
   // Make your app edge-to-edge codelab.
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContent {... }
    }
}

Luego de habilitar la opción de borde a borde, SociaLite se ve de esta manera:

Navegación por gestos

3. Agrega animaciones de atrás predictivo

¿Qué significa atrás predictivo?

El gesto de atrás predictivo es una función de navegación por gestos que permite al usuario obtener una vista previa del resultado de un gesto atrás antes de completarlo. De ese modo, puede decidir si desea continuar a la vista anterior o permanecer en la vista actual.

Agregar compatibilidad con el gesto de atrás predictivo a tu app para Android puede ayudar a restablecer la confianza del usuario y brindar una experiencia superior.

SociaLite con el gesto de atrás predictivo de volver a la pantalla principal

Cómo agregar compatibilidad con el gesto de atrás predictivo

Agrega la animación de atrás predictivo de volver a la pantalla principal

Para ver SociaLite sin compatibilidad con atrás predictivo para la animación de volver a la pantalla principal, sigue estos pasos:

1. Asegúrate de estar en la página Chats.
2. Desliza el dedo para volver a la pantalla principal del sistema. Regresarás de inmediato a la pantalla principal sin una vista previa de adónde dirige el gesto de deslizar para volver.

[agregar GIF más adelante]

SociaLite sin la animación de volver a la pantalla principal

Para agregar compatibilidad con la animación de atrás predictivo de volver a la pantalla principal, establece el parámetro android:enableOnBackInvokedCallback en true en el archivo AndroidManifest.xml.

// AndroidManifest.xml

<application
  android:name=".SocialApp"
  ...
  android:enableOnBackInvokedCallback="true">
  <activity
    android:name=".MainActivity"
    android:exported="true"
    ...>

Para ver cómo ese cambio de código de una línea afectó el gesto de deslizar para volver en SociaLite, sigue estos pasos:

1. Asegúrate de estar en la página Chats.
2. Desliza el dedo lentamente para volver a la pantalla principal del sistema.

Puedes visualizar el destino de atrás en una vista previa detrás de la página Chats. Así se ve la animación de atrás predictivo de volver a la pantalla principal.

SociaLite con el gesto de atrás predictivo de volver a la pantalla principal

Agrega animaciones predeterminadas integradas en la app

Para ver SociaLite sin compatibilidad con atrás predictivo para las animaciones integradas en la app, sigue estos pasos:

1. Asegúrate de estar en la página Chats.
2. Selecciona una de las conversaciones, como Sheep.
3. Desliza el dedo lentamente para regresar a la página Chats.

Verás una animación de encadenado luego de completar el gesto de deslizar para volver y regresar a la página Chats.

La app de SociaLite sin animaciones de atrás predictivo integradas en la app.

Para agregar más compatibilidad con el gesto de atrás predictivo a otras partes de SociaLite, sigue estos pasos:

Actualiza la dependencia de navegación de Compose a androidx.navigation:navigation-compose:2.8.0-alpha07 o una versión posterior en el archivo libs.versions.toml.

// libs.versions.toml

[versions]
...
media3 = "1.2.0"
navigation = "2.8.0-alpha07"
...

1. Presiona Sync project with Gradle files.
2. Vuelve a ejecutar SociaLite.
3. Asegúrate de estar en la página Chats.
4. Selecciona una de las conversaciones, como Sheep.
5. Desliza el dedo lentamente para regresar a la página Chats. Mientras deslizas el dedo para volver, verás que la página Chats se fusiona con la vista.

Animaciones predeterminadas integradas en la app

Agrega animaciones personalizadas integradas en la app

Para crear una animación de atrás predictivo personalizada integrada en la app, sigue estos pasos:

1. Busca NavHost en el archivo ui/Main.kt.
2. Agrega popEnterTransition y popExitTransiton para ajustar y fusionar las pantallas entrantes y salientes.

// Main.kt
NavHost(
  navController = navController,
  startDestination = "home",
  popEnterTransition = {
    scaleIn(
      animationSpec = tween(
        durationMillis = 100,
        delayMillis = 35,
      ),
      initialScale = 1.1F,
     ) + fadeIn(
         animationSpec = tween(
           durationMillis = 100,
           delayMillis = 35,
         ),
     )
   },
  popExitTransition = {
     scaleOut(
       targetScale = 0.9F,
     ) + fadeOut(
         animationSpec = tween(
           durationMillis = 35,
           easing = CubicBezierEasing(0.1f, 0.1f, 0f, 1f),
         ),
     )
   },
  modifier = modifier,
)

3. Vuelve a ejecutar SociaLite.
4. Asegúrate de estar en la página Chats.
5. Selecciona una de las conversaciones, como Sheep.
6. Desliza el dedo lentamente para regresar a la página Chats. Mientras deslizas el dedo para volver, la pantalla de chat Sheep se ajusta y va desapareciendo, y la página Chats se ajusta y va apareciendo en la vista.

Animaciones personalizadas integradas en la app

La biblioteca de Navigation Compose pudo ejecutar animaciones debido a una migración de la biblioteca de Accompanist Navigation Animation a la biblioteca de AndroidX. Como aprovechaste la biblioteca de Navigation Compose y su compatibilidad integrada con el gesto de atrás predictivo, pudiste agregar compatibilidad fácilmente con estos gestos y mejorar la experiencia en la app para Android.

Opcional: Consideraciones adicionales sobre el gesto de atrás predictivo

Esta es una sección opcional con sugerencias que podrían aplicarse a tu app.

No interceptes el evento de volver en la raíz (por ejemplo, MainActivity.kt)

Si tu app intercepta el evento de volver con BackHandler, PredictiveBackHandler, OnBackPressedCallback o OnBackInvokedCallback en la actividad raíz (por ejemplo, MainActivity.kt), los usuarios no verán la animación de atrás predictivo de volver a la pantalla principal.

Los casos de uso comunes para interceptar eventos de volver en la actividad raíz incluyen el registro de eventos. Recomendamos registrar eventos dentro de los métodos de ciclo de vida de Fragment o Activity en lugar de dentro de OnBackPressedCallback o OnBackInvokedCallback para Views o dentro de addOnDestinationChangedListener para Compose. Si deseas obtener más información, consulta Prácticas recomendadas para devolución de llamadas.

Compatibilidad con fragmentos

Si utilizas FragmentManager o el componente Navigation, el gesto de atrás predictivo se admite con las siguientes APIs de fragmentos usando Animator, transiciones de AndroidX y ciertos movimientos de Material, como MaterialSharedAxis, MaterialFadeThrough y MaterialFade:

• setCustomAnimations
• setEnterTransition
• setExitTransition
• setReenterTransition
• setReturnTransition
• setSharedElementEnterTransition
• setSharedElementReturnTransition

No se admiten las transiciones de framework ni de animaciones.

Si tu app utiliza otra biblioteca de navegación, consulta esa documentación para ver si se brinda compatibilidad con animaciones de atrás predictivo.

Compatibilidad con componentes de Material View

Las animaciones de atrás predictivo son compatibles con los componentes de Material View en dispositivos que ejecutan Android 14 y versiones posteriores cuando el parámetro de manifiesto android:enableOnBackInvokedCallback está habilitado y el compileSDK tiene un nivel de API 34 o superior. Los componentes de Material View compatibles incluyen la barra de búsqueda, la hoja inferior, la hoja lateral y el panel lateral de navegación.

Compatibilidad con componentes de Material Compose

Las animaciones de atrás predictivo son compatibles con los componentes de Material Compose. Esto incluye lo siguiente:

• SearchBar
• ModalBottomSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

Asegúrate de usar la dependencia androidx.compose.material3:material3-*:1.3.0-alpha01 o una posterior. SearchBar y ModalBottomSheet se animan automáticamente para el gesto atrás predictivo cuando se habilita la marca del manifiesto android:enableOnBackInvokedCallback. ModalNavigationDrawer/DismissibleNavigationDrawer requieren el paso de drawerState a sus respectivos elementos componibles de contenido de hoja.

Compatibilidad con transiciones de elementos compartidos en Compose

Transición de elementos compartidos con el gesto de atrás predictivo en Navigation Compose

Para obtener la compatibilidad con el gesto de atrás predictivo, asegúrate de usar la dependencia navigation-compose 2.8.0-alpha06 o una versión posterior y de agregar el parámetro android:enableOnBackInvokedCallback="true" a tu archivo AndroidManifest.xml.

4. Obtén el código de la solución

El archivo AndroidManifest.xml debería verse de la siguiente manera:

// AndroidManifest.xml

<application
  android:name=".SocialApp"
  ...
  android:enableOnBackInvokedCallback="true">
  <activity
    android:name=".MainActivity"
    android:exported="true"
    ...>

NavHost en el archivo ui/Main.kt debería verse de la siguiente manera:

// Main.kt
NavHost(
  navController = navController,
  startDestination = "home",
  popEnterTransition = {
    scaleIn(
      animationSpec = tween(
        durationMillis = 100,
        delayMillis = 35,
      ),
      initialScale = 1.1F,
     ) + fadeIn(
         animationSpec = tween(
           durationMillis = 100,
           delayMillis = 35,
         ),
     )
   },
  popExitTransition = {
     scaleOut(
       targetScale = 0.9F,
     ) + fadeOut(
         animationSpec = tween(
           durationMillis = 35,
           easing = CubicBezierEasing(0.1f, 0.1f, 0f, 1f),
         ),
     )
   },
  modifier = modifier,
)

Y el archivo libs.versions.toml debería verse de la siguiente manera:

// libs.versions.toml

[versions]
...
media3 = "1.2.0"
navigation = "2.8.0-alpha07"
...

El código de la solución está disponible en la rama main.

Para obtener el código de la solución, sigue estos pasos:

1. Si ya descargaste SociaLite, ejecuta este comando:

git checkout main

2. Si no descargaste SociaLite, vuelve a descargar el código para ver la rama main:

git clone git@github.com:android/socialite.git