Se agregó compatibilidad con animaciones de atrás predictivo integradas y personalizadas.

Si ya migraste tu app a las nuevas APIs de retroceso del sistema, puedes habilitar el gesto atrás predictivo para recibir automáticamente animaciones en la app y también admitir transiciones personalizadas.

Cómo agregar compatibilidad con animaciones integradas en la app

Video: 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. 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 sobre cómo admitir el gesto atrás predictivo.

Cómo agregar transiciones y animaciones personalizadas integradas en la app

Puedes crear animaciones y transiciones personalizadas de propiedades integradas en la app con la API de Progress y el método overrideActivityTransition de animaciones personalizadas con varias actividades.

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. 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 algo más personalizado que las animaciones predeterminadas que proporcionan las animaciones del sistema nuevas 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>

Ten en cuenta lo siguiente cuando trabajes con transiciones de atrás predictivo:

  • 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. Te recomendamos migrar desde las transiciones del framework.
  • Las transiciones de atrás predictivo son compatibles con dispositivos con Android 14 y versiones posteriores y no son retrocompatibles.
  • 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.