Cómo agregar compatibilidad con animaciones de atrás predictivo

Cuando usas las APIs de retroceso del sistema, puedes habilitar la recepción de animaciones integradas en la app y admitir transiciones personalizadas.

Video 1: Animaciones de atrás predictivo

Después de habilitar la función, tu app mostrará animaciones para volver a la página principal, cambiar de actividad y cambiar de tarea.

También puedes actualizar tu dependencia de componente de material a la versión 1.10.0 de MDC-Android para recibir animaciones de componentes de material como la siguiente:

Consulta la guía para desarrolladores sobre componentes de Material en GitHub para obtener más información.

En el video, se muestra un breve ejemplo de animaciones de atrás predictivo para cambiar de actividad y volver a la pantalla principal con la app de Configuración de Android.

  1. En la animación, el usuario desliza el dedo hacia atrás para volver a la pantalla de configuración anterior, un ejemplo de una animación de cambio de actividad.
  2. Ahora, en la pantalla anterior, el usuario comienza a deslizar el dedo hacia atrás por segunda vez y se muestra una vista previa de la pantalla principal con el fondo de pantalla, un ejemplo de la animación para volver a la pantalla principal.
  3. El usuario continúa deslizando el dedo hacia la derecha y se muestra una animación de la ventana que se reduce hasta el ícono de la pantalla principal.
  4. El usuario volvió por completo a la pantalla principal.

Obtén más información para agregar compatibilidad con gestos atrás predictivos.

Cómo agregar transiciones y animaciones personalizadas en la app

Puedes crear animaciones y transiciones personalizadas de propiedades integradas en la app, animaciones personalizadas con varias actividades y animaciones personalizadas con varios fragmentos con gestos atrás predictivo.

Cómo agregar transiciones personalizadas con la API de Progress

Con AndroidX Activity 1.8.0-alpha01 o versiones posteriores, puedes usar las APIs de Predictive Back Progress para desarrollar animaciones personalizadas para el gesto atrás predictivo en tu app. Las APIs de Progress son útiles para animar vistas, pero tienen limitaciones cuando se animan transiciones entre fragmentos. En OnBackPressedCallback, presentamos los métodos handleOnBackProgressed, handleOnBackCancelled y handleOnBackStarted para animar objetos mientras el usuario desliza el dedo hacia atrás. Usa estos métodos si necesitas personalizar más que las animaciones predeterminadas que proporciona el sistema o las animaciones de los componentes de Material.

Se espera que la mayoría de las apps usen las APIs de AndroidX retrocompatibles, pero también hay APIs de plataforma similares dentro de la interfaz de OnBackAnimationCallback disponibles para probar en la Versión preliminar para desarrolladores 1 de Android 14 y versiones posteriores.

Cómo usar las APIs de Progress con transiciones de AndroidX

Las APIs de Progress se pueden usar con las transiciones de AndroidX 1.5.0-alpha01 o versiones posteriores en Android 14 y versiones posteriores para crear transiciones de atrás predictivo.

  1. Usa TransitionManager#controlDelayedTransition en lugar de beginDelayedTransition para reproducir transiciones mientras el usuario desliza el dedo hacia atrás.
  2. Crea la transición dentro de handleOnBackStarted.
  3. Para reproducir la transición con el evento de atrás dentro de handleOnBackProgressed, vincula currentFraction con BackEvent.progress, lo que expone cuán lejos el usuario deslizó hacia atrás.
  4. Finaliza la transición después de que el usuario confirme el gesto atrás en handleOnBackPressed.
  5. Por último, restablece el estado de la transición en handleOnBackCancelled.

En el siguiente video, se muestra una transición personalizada con código Kotlin y XML entre dos cuadros implementada con OnBackPressedCallback:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  
<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

Cuando trabajes con transiciones de atrás predictivo, ten en cuenta lo siguiente:

  • Usa isSeekingSupported para verificar si la transición admite el gesto atrás predictivo.
  • Anula isSeekingSupported para que se muestre verdadero en tus transiciones personalizadas.
  • Crea un controlador por animación.
  • Las transiciones de atrás predictivo son compatibles con las transiciones de AndroidX, pero no con las transiciones del framework. Migra de las transiciones del framework y, en su lugar, usa transiciones de Animator y AndroidX.
  • Las transiciones del gesto atrás predictivo se admiten en dispositivos que ejecutan Android 14 y versiones posteriores, y no ofrecen retrocompatibilidad.
  • También se admiten las transiciones creadas con escenas XML. En handleOnBackStarted, establece tu TransitionSeekController como el resultado de TransitionManager.createSeekController en lugar del resultado de controlDelayedTransition.

Cómo agregar transiciones de actividades personalizadas en Android 14 y versiones posteriores

Para asegurarte de que las transiciones de actividades personalizadas admitan el gesto atrás predictivo en Android 14 y versiones posteriores, puedes usar overrideActivityTransition en lugar de overridePendingTransition. Esto significa que la animación de transición se reproduce a medida que el usuario desliza el dedo hacia atrás.

Para brindar un ejemplo de cómo podría funcionar esto, imagina una situación en la que la actividad B se encuentra sobre la actividad A en la pila de actividades. Las animaciones de actividades personalizadas se controlarían de la siguiente manera:

  • Llama a las transiciones de apertura o cierre dentro del método onCreate de la actividad B.
  • Cuando el usuario navegue hacia la actividad B, usa OVERRIDE_TRANSITION_OPEN. Cuando el usuario deslice el dedo para volver a la actividad A, usa OVERRIDE_TRANSITION_CLOSE.

  • Al especificar OVERRIDE_TRANSITION_CLOSE, enterAnim es la animación de entrada de la actividad A y exitAnim es la animación de salida de la actividad B.

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

Cuando implementes el gesto atrás predictivo con fragmentos, existen dos enfoques.

Usa APIs existentes

Te recomendamos que uses las APIs existentes. Estas APIs te permiten deslizar el dedo desde el borde de la pantalla para manipular tus transiciones de Animator o Androidx con el gesto. El hecho de hacer el movimiento del gesto más allá de un umbral determina si se completó y regresas al fragmento anterior, o bien si se cancela y permaneces en el fragmento actual. Para obtener más información, consulta Cómo navegar entre fragmentos con animaciones.

Ten en cuenta los siguientes factores:

  • Importa Transitions 1.5.0 o una versión posterior y Fragments 1.7.0 o una versión posterior. Gran parte de la compatibilidad con el gesto atrás predictivo depende de que Transitions pueda buscar animaciones, lo que solo ocurre a partir de la versión 1.5.0.
  • Usa Fragments, con FragmentManager o el componente Navigation, para controlar la pila de actividades. El gesto atrás predictivo no se admite si administras tu propia pila de actividades. Migra lejos de las pilas de actividades que FragmentManager no conoce.
  • Algunas bibliotecas incluyen compatibilidad con el gesto atrás predictivo. Consulta la documentación para confirmar.
  • Se admiten la clase Animator y la biblioteca AndroidX Transition.
  • La clase Animation y la biblioteca del framework Transition no son compatibles.
  • Las animaciones predictivas solo funcionan en dispositivos que ejecutan Android 14 o versiones posteriores.

Usa fragmentos cruzados para el gesto atrás predictivo en las siguientes situaciones:

Algunos movimientos de material admiten el gesto atrás predictivo a partir de la versión 1.12.02-alpha02 o versiones posteriores, incluidos MaterialFadeThrough, MaterialSharedAxis y MaterialFade. Ten en cuenta que MaterialContainerTransform no admite el retroceso predictivo.

Cómo usar devoluciones de llamada

Puedes crear una transición entre fragmentos con devoluciones de llamada. Sin embargo, existe una limitación conocida cuando se usan devoluciones de llamada en las que los usuarios no pueden ver el fragmento anterior cuando se desliza el dedo hacia atrás. Para crear una transición de elementos compartidos entre fragmentos que corresponda a la guía de diseño del gesto atrás predictivo, haz lo siguiente:

Crea un OnBackPressedCallback. Dentro de handleOnBackProgressed, escala y cambia el fragmento. Luego, sal de la pila de actividades. A continuación, ejecuta la transición de elementos compartidos con setSharedElementReturnTransition fuera de la devolución de llamada.

Para obtener más información, consulta la muestra de código en GitHub.

Requisitos

Usa la siguiente tabla para comprender qué controlatargetSdkVersion y compileSdkVersion, la versión del dispositivo, las dependencias, las marcas del manifiesto y las marcas de fragmento. Esta tabla se refiere a los requisitos de código.

Categoría Animación compileSDK targetSDK Versión de dispositivo android:enableOnBackInvokedCallback Dependencia
Animaciones del sistema Volver a la página principal 33 Cualquiera 35 TRUE Ninguno
Actividades cruzadas 34 Cualquiera 35 TRUE Ninguno
Tareas cruzadas 34 Cualquiera 35 TRUE Ninguno
Plataforma Personalización actividades cruzadas 34 Cualquiera 35 TRUE Ninguno
Plataforma de API de Progress 34 Cualquiera 34 TRUE Ninguno
Componentes de Material Hoja inferior 34 Cualquiera 34 TRUE Material Component 1.10.0
Hoja lateral 34 Cualquiera 34 TRUE Material Component 1.10.0
Panel lateral de navegación 34 Cualquiera 34 TRUE Material Component 1.10.0
Búsqueda 34 Cualquiera 34 TRUE Material Component 1.10.0
Animaciones de Jetpack Fragmento cruzado de AndroidX personalizado 34 Cualquiera 34 TRUE AndroidX Fragment 1.7
Transiciones personalizadas de AndroidX 34 Cualquiera 34 TRUE AndroidX Transition 1.5
API de Progress de Jetpack 34 Cualquiera 34 TRUE AndroidX Activity 1.8

Recursos adicionales