Actualiza tu app para admitir la navegación del gesto de retroceso predictivo en el futuro

1. Introducción

Última actualización: 11/04/2022

En Android 13, agregamos API que sirven de base para un próximo gesto predictivo de retroceso.

Esta función permitirá que el usuario obtenga una vista previa del resultado de un gesto de retroceso antes de completarlo por completo. Básicamente, le permitirá al usuario decidir si quiere permanecer en la vista actual o completar la acción y regresar a la pantalla principal, una actividad anterior o una página visitada previamente en un WebView. Este es un ejemplo de cómo se verá:

Para admitir los gestos predictivos de retroceso, Android 13 agrega la nueva API de plataforma OnBackInvokedCallback en el nivel de la ventana. Esta API reemplaza a la API de KeyEvent.KEYCODE_BACK y a todas las clases de plataforma que usan OnBackPressed, que dejarán de estar disponibles y que requerirán migración en la próxima versión principal de Android después de la versión 13. Para conocer los detalles, consulta nuestra documentación.

En el caso de este codelab, corregiremos un fragmento de una encuesta que implementa un componente WebView.

Objetivo de este codelab

En este codelab, se muestra el proceso para preparar una app de AndroidX que intercepta el sistema mediante la migración a fin de admitir gestos predictivos de retroceso con WebView.

Si tu app usa el retroceso predeterminado del sistema (en otras palabras, no intercepta el retroceso del sistema), solo deberás habilitar enableOnBackInvokedCallback. Una vez que lo hagas, tu app comenzará a usar la función de retroceso predictiva cuando esté disponible.

Qué compilarás

En este codelab, usarás bibliotecas de la API de AndroidX para controlar los gestos de retroceso en la app de Sunflower.

Qué aprenderás

• Cómo interceptar la invocación de retroceso para AndroidX
• Cómo mostrar el evento de retroceso para el sistema
• Otras opciones para controlar los gestos de retroceso
• La nueva experiencia del usuario estará disponible en Android 13 y versiones posteriores, y ofrecerá una navegación más predictiva del gesto de retroceso

Requisitos

• Android Studio
• (Opcional) Git

2. Planifica la compatibilidad con los gestos de retroceso predictivos

Los gestos de retroceso predictivos se admiten automáticamente en las apps que usan la navegación hacia atrás predeterminada. Para habilitarlos, solo tienes que habilitar enableOnBackInvokedCallback, como se explica en Cómo habilitar gestos de retroceso predictivos.

Usa las API de AndroidX para implementar esta función

Este codelab está diseñado para apps que ya usan AndroidX.

Implementarás OnBackPressedDispatcher y OnBackPressedCallback para admitir la navegación hacia atrás.

Otras opciones

Tenemos otras opciones para administrar esta función, según las diferentes necesidades que pueda tener la app:

• Apps que no pueden usar AndroidX: Si este es tu caso, tenemos lo que necesitas. Usa las nuevas clases de plataformas OnBackInvokedDispatcher y OnBackInvokedCallback, que presentamos en Android 13, que te permiten usar las API de antemano sin necesidad de que uses AndroidX. Consulta la documentación para obtener información detallada.
• Apps que no pueden migrarse temporalmente: Si este es tu caso, también podemos ayudarte. Puedes inhabilitar los gestos predictivos de retroceso si no es posible migrar a las bibliotecas de AndroidX o las API de la plataforma en este momento. Consulta la documentación para obtener información detallada.

3. Antes de comenzar

Instala Android Studio

Instala Android Studio y el SDK de Android 13.

Obtén un dispositivo

Puedes usar un dispositivo Android virtual o físico para ejecutar la app que compiles con este codelab.

Habilita la navegación por gestos

Si ejecutas una instancia nueva del emulador con el nivel de API 29, es posible que la navegación por gestos no esté activada de forma predeterminada. Para habilitarla, selecciona Configuración del sistema > Sistema > Navegación del sistema > Navegación por gestos.

Obtén el código

Puedes obtener el código de una de las siguientes maneras:

Descarga el archivo ZIP

Descargar archivo ZIP (comienzo).

Descargar archivo ZIP (completado).

Descarga con Git

Si prefieres descargar el código con Git, sigue estos pasos:

1. Instala Git.
2. Clona la rama starter-code o main a fin de obtener la app para este ejercicio:

Terminal

// Get starter app.
git clone --branch starter-code \
https://github.com/googlecodelabs/handling-back-navigation.git

// Get completed app.
git clone --branch main \
https://github.com/googlecodelabs/handling-back-navigation.git

Ejecuta la app

Completa los siguientes pasos:

1. Abre y ejecuta la app en Android Studio.
2. Crea un dispositivo virtual nuevo y selecciona Tiramisu. Como alternativa, puedes conectar un dispositivo físico que ejecute el nivel de API 33 o uno superior.
3. Ejecuta la app de Sunflower.

A continuación, deberás establecer un modelo de referencia y pasar por una experiencia deficiente que forma parte de la app de Sunflower.

4. Establece un modelo de referencia

Nuestro punto de partida es la app de Sunflower, que incluye una encuesta que se presenta en un WebView donde el gesto de retroceso se maneja deficientemente. Cuando un usuario desliza el dedo desde el borde izquierdo o derecho para regresar en el WebView, la app regresa a un fragmento anterior en lugar de regresar a la página anterior, lo que provoca que el usuario pierda los datos que no se hayan enviado.

Explora la demostración

Desde la pantalla principal, veamos el flujo de trabajo principal de tu app para revisar la experiencia deficiente con la funcionalidad de WebView.

1. En la pantalla predeterminada de la app de Sunflower, presiona PLANT LIST.

2. En el catálogo de plantas, presiona cualquier planta. Para este ejemplo, usaremos un aguacate.

3. En la pantalla de información de la planta que presionaste, presiona el ícono de "Me gusta" (en la esquina superior derecha) para calificarla.

4. Comienza a completar la encuesta, pero deja de responder cuando llegues a la Pregunta 3.

5. Desliza el dedo hacia el centro desde el borde izquierdo (o derecho) de la pantalla para usar el gesto de retroceso. Ten en cuenta que, en lugar de volver a la Pregunta 2 en la encuesta, cuando deslizas hacia atrás, se te lleva al fragmento de detalles de la planta (en este ejemplo, la página de información de la planta de aguacate). En consecuencia, pierdes tus respuestas y obtienes una mala experiencia como usuario.

Ahora, comencemos a solucionar estos problemas.

5. Cómo habilitar gestos de retroceso predictivos

Nuestra app ya usa AndroidX, por lo que usarás las API de navegación hacia atrás. Estas ya admiten el modelo anticipado.

Orientación a Android 13

En el proyecto de Studio de nuestra app, actualiza la configuración de compilación de la app para que se oriente a Android 13, como se muestra en el siguiente fragmento de código.

build.gradle (proyecto)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkPreview = "Tiramisu"
       targetSdkPreview = "Tiramisu"

...
}

Incluye la dependencia de AndroidX 1.6.0-alpha03

En build.gradle, configura appCompatVersion como 1.6.0-alpha03.

build.gradle (proyecto)

buildscript {
   ext {

       // App dependencies
       appCompatVersion = '1.6.0-alpha03' // Built original with changes

...
}

Cómo habilitar gestos de retroceso predictivos

Para habilitar las API de gestos de retroceso predictivas, configura enableOnBackInvokedCallback como true en el manifiesto.

AndroidManifest.xml

<application
   ...
   android:enableOnBackInvokedCallback="true" // Enables this feature.
   ... >
...
</application>

Declara y registra OnBackPressedCallback para controlar los gestos de retroceso

Crea la devolución de llamada y anula el método handleOnBackPressed para controlar los gestos de retroceso. En el caso de uso de WebView, usaremos el gesto de retroceso para volver a la pila de páginas hasta que no haya más páginas.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
val onBackPressedCallback = object: OnBackPressedCallback(true) {
  override fun handleOnBackPressed() {
    when {
      webView.canGoBack() -> webView.goBack()
      }
    }
  }
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)
...
}

Prueba tus compilaciones

Ahora, probarás que la navegación de WebView funcione correctamente.

1. En Android Studio, vuelve a compilar y ejecutar la app.
2. Tal como lo hiciste la primera vez que ejecutaste la demostración, presiona una planta cualquiera, el ícono de "Me gusta" y, luego, completa la encuesta hasta llegar a la Pregunta 3.
3. Desliza el dedo hacia el centro desde el borde izquierdo (o derecho) de la pantalla para usar el gesto de retroceso. WebView debería mostrar la Pregunta 2 de la encuesta.

Este es el comportamiento exacto que deseamos. Sin embargo, solo estamos a mitad de camino, el problema no se solucionó por completo. Continuemos para aclararlo:

4. En la Pregunta 2, desliza el dedo hacia atrás para ir a la Pregunta 1 y, luego, desliza el dedo hacia atrás una vez más para intentar regresar al fragmento de detalles de la planta.

Observa que no puedes volver de la Pregunta 1 al fragmento de detalles de la planta. Esto se debe a los siguientes motivos:

• Tu WebView controla la navegación hacia atrás al evitar salir del WebView cuando usas ese tipo de navegación.
• Cuando ya no la necesite, la app deberá mostrar la navegación hacia atrás al sistema. Pasemos a la siguiente sección para solucionar el problema.

6. Corrige el gesto de retroceso

En el paso anterior, la app interceptó el gesto de retroceso sin devolverlo al fragmento de detalles de la planta en los pasos anteriores. Como resultado, nuestros usuarios no pueden salir de la app y quedan atascados en el WebView con una mala experiencia.

Habilita o inhabilita la navegación hacia atrás con OnBackPressedCallback

1. Anula el método doUpdateVisitedHistory para determinar si se debe interceptar la navegación hacia atrás. La lógica para procesar la navegación hacia atrás es la siguiente:
   • Si hay más páginas a las que puedes volver en el WebView (webView.canGoBack()), se debe habilitar el método OnBackPressedCallback.
   • Por el contrario, si no hay más páginas a las que debas volver en el WebView, debes inhabilitar el método OnBackPressedCallback. Como resultado, el gesto de retroceso volverá al fragmento superior en la pila de actividades.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  // Present the HTML form to the user.
  webView.loadUrl("https://atom-summer-cadet.glitch.me/")
  webView.settings.javaScriptEnabled = true
  webView.addJavascriptInterface(WebAppInterface(requireContext()), "Android")

  ...
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)

  disableOnBackPressedCallback(webView, onBackPressedCallback)
}
...

private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
  webView.webViewClient = object: WebViewClient() {
    override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
      // Disable the on-back press callback if there are no more questions in the
      // WebView to go back to, allowing us to exit the WebView and go back to
      // the fragment.
      onBackPressedCallback.isEnabled = webView.canGoBack()

      }
    }
  }

2. Para volver a probar el WebView, completa la encuesta otra vez hasta llegar a la Pregunta 3.
3. Con los gestos de retroceso, navega hasta la vista de detalles de la planta. Deberías poder hacerlo sin problemas.

Ten en cuenta que ahora podemos salir del WebView y regresar para revisar el fragmento de detalles de la planta sin inconvenientes.

Este es un ejemplo de cómo debería verse todo después de la corrección:

7. Felicitaciones

¡Felicitaciones! Viste una gran cantidad de contenido. Esperamos que ahora comprendas mejor las opciones y las API a fin de comenzar a actualizar tu app para los gestos de retroceso predictivos que se ofrecen en Android.

Cómo se verá en versiones futuras de Android

En las próximas versiones de Android, comenzarás a experimentar gestos de retroceso predictivos, como se muestra en la siguiente animación. Te recomendamos que comiences a implementar estos cambios lo antes posible.

Temas abordados

• Cómo permitir que tu app comience a usar las API que admiten gestos de retroceso predictivos
• Cómo interceptar la invocación de retroceso para AndroidX
• Cómo mostrar la navegación hacia atrás para el sistema
• Otras opciones para controlar los gestos de retroceso
• La nueva experiencia de UX estará disponible en Android 13 y ofrecerá gestos de retroceso más predictivos

Materiales adicionales

• Guía para desarrolladores

Documentos de referencia

• OnBackPressedDispatcher y OnBackPressedCallback
• OnBackInvokedDispatcher y OnBackInvokedCallback