Android en general: cómo llevar experiencias optimizadas a la pantalla grande

Manejar diversas relaciones de aspecto

En los dispositivos donde su aplicación ocupa toda la pantalla, los dispositivos de pantalla grande significan que necesita permitir relaciones de aspecto desde 1 a 1 hasta 21 por 9. En los dispostivos de escritorio, los usuarios pueden aplicar relaciones de aspecto aún más extremas. Por ejemplo una aplicación de comunicación, los usuarios pueden colocarla en una ventana alta y estrecha en el borde de la pantalla para que puedan ver y responder mensajes mientras trabajan con otra aplicación que ocupa el resto de la pantalla.

No hay una bala mágica para abordar esta diversidad de relaciones de aspecto, tendrá que probarlas y respaldarlas de la mejor manera posible.

Sin embargo, si el contenido de su aplicación no es adecuado para ciertas relaciones de aspecto, use el indicador minAspectRatio , introducido en Android 10, o el indicador maxAspectRatio⁠ para restringir su aplicación dentro de relaciones de aspecto factibles.

Patrones de navegación

Los patrones de navegación pueden romperse cuando comienzas a admitir una variedad de dispositivos diferentes. Por ejemplo, tome la navegación inferior, aquí en una aplicación simple de visor de fotos.

Esta navegación funciona bien en teléfonos inteligentes. Es fácil saber dónde están los objetivos táctiles, dónde termina un elemento y dónde comienza el otro. Sin embargo, cuando se ejecuta en un entorno de escritorio, con una pantalla amplia, se hace difícil determinar dónde terminan los elementos y qué es accionable.

Para pantalla grande, un mejor enfoque es colocar opciones en el lado izquierdo de la pantalla. Si alguien está usando su aplicación en una tableta, esta posición coloca las opciones cerca de donde su mano sostiene el dispositivo, haciendo que la selección sea más conveniente.

La navegación del lado izquierdo también es un paradigma al que las personas están acostumbradas desde las páginas web.

Diseños de pantalla

El ejemplo del visor de fotos muestra que cuando simplemente reutiliza el diseño de un teléfono inteligente en pantallas anchas, las listas de elementos dejan mucho espacio en blanco. Hacer un mejor uso del espacio no significa aplicar un patrón de detalles maestros y agregar tanto contenido en la pantalla como sea posible. Se debe pensar en formas de mostrar más información o hacer que las tareas sean más eficientes.

Por ejemplo, los elementos de opción en un menú que se desborda podrían mostrarse. Entonces, en lugar de tener que hacer tres toques para editar, las personas pueden seleccionar esa opción directamente ahora que hay espacio para colocarla allí.

Las pantallas más grandes también permiten ofrecer experiencias más inmersivas. Por ejemplo, en una aplicación de visualización de medios o productividad, hay muchas más formas de mantener a las personas comprometidas. Sin embargo, vale la pena señalar que no hay una solución única para usar este espacio adicional.

Mientras tanto, vale la pena echarle un vistazo a los Estudios de Material Design en⁠ busca de inspiración. El equipo de Material Design ha creado estudios de diseño para varios productos con maquetas de diseño completas.

Uno de los estudios es Reply⁠ , un cliente de correo electrónico creado con objetivos diseñados de claridad, legibilidad, intuición y facilidad de uso al proyectar amabilidad y competencia para su marca.

En este estudio, el contenido del mensaje no cambia significativamente entre los distintos tamaños de pantalla. Sin embargo, la navegación cambia de una navegación inferior en el diseño del teléfono inteligente a un cajón de navegación en pantallas más grandes, que aparece de forma predeterminada en las pantallas más grandes.

Este ejemplo muestra cómo el espacio extra en pantallas más grandes no necesita sobrecargarse con información adicional, pero el espacio en blanco se puede usar para facilitar la lectura del contenido.

Otro estudio es Rally⁠ , una aplicación financiera, que está diseñada para mostrar la mayor cantidad de información posible para que los usuarios puedan ver rápidamente lo que necesitan para tomar decisiones sobre sus finanzas, y luego salir y seguir con su vida.

Patrones de entrada

A medida que los dispositivos se mueven hacia el escritorio, es menos probable que el medio de entrada utilizado sea táctil. La entrada puede ser a través de un lápiz óptico o mouse y teclado. Por lo tanto, debe considerar cómo incorporar algunos de los paradigmas de entrada que ve en las plataformas de escritorio a su aplicación.

Por ejemplo, considere manejar las acciones de hacer clic con el botón derecho (contexto), lo que hace estableciendo un contextClickListener y asignando el comportamiento de pulsación larga a los clics con el botón derecho.

Otra técnica útil para ayudar a mostrar a las personas que las cosas son accionables son las acciones de desplazamiento. Por ejemplo, puede cambiar los colores o la elevación al pasar el cursor sobre los elementos de acción utilizando setOnHoverListener esta manera:

yourView.setOnHoverListener{ view, motionEvent ->
  when (motionEvent.actionMasked) {
    MotionEvent.ACTION_HOVER_ENTER -> {
      // UI change to highlight item
    }
    MotionEvent.ACTION_HOVER_EXIT -> {
      // Undo highlight
    }
  }
}

O actualice el puntero del mouse, por ejemplo, para cambiarlo a un icono de mano para indicar una función de agarrar o seleccionar. Esta es una implementación simple de una línea:

yourView.setOnHoverListener { view, motionEvent ->
 // Change to the hand icon that users expect when
 // hovering over something actionable
 View.pointerIcon =
   PointerIcon.getSystemIcon(context, PointerIcon.TYPE_HAND)
 false
}

Continuidad de la aplicación

La continuidad de la aplicación es la capacidad de una aplicación para restaurar sin problemas el estado del usuario cuando recibe un cambio de configuración, por ejemplo, asegurándose de que esté en la misma posición de edición en el texto o en la ubicación de reproducción en un video.

En los teléfonos inteligentes, el caso principal, la rotación, generalmente se basa en el contexto, como cambiar a modo horizontal para ver un video. En dispositivos de pantalla más grande, con su soporte para múltiples ventanas, el enfoque para la continuidad de la aplicación se convierte en la necesidad de volver a dibujar y rediseñar su aplicación con un mínimo de distorción. En esta animación, la aplicación Play Store pasa de una ventana más pequeña con una navegación inferior a una ventana grande con navegación del lado izquierdo.

Para lograr una transición sin problemas, asegúrese de que sus métodos onCreate y ciclo de vida se puedan reciclar rápidamente. Para hacer esto, asegúrese de no realizar operaciones de red o lecturas de memoria grandes en esos métodos. Además, este tipo de tareas realizadas con esos métodos a menudo provocan bloqueos, lo que genera una mala experiencia del usuario.

El indicador resizeableActivity⁠ es un indicador de manifiesto introducido para indicar si una aplicación admite entornos de múltiples ventanas y pantallas. Sin embargo, establecer esto en falso no significa que su actividad nunca necesite cambiar de tamaño. Por ejemplo, en un dispositivo plegable, si alguien despliega el dispositivo, debe manejar los cambios de configuración correctamente y asegurarse de que está restaurando el estado correcto.

Pero, si tiene una actividad configurada para que no se pueda cambiar su tamaño y su orientación esté bloqueada, el nuevo modo de compatibilidad en Android 10 ayuda a garantizar que su aplicación no tendrá un cambio de configuración cuando se despliegue un dispositivo.

En el modo de compatibilidad, en la esquina inferior derecha, hay un botón de reinicio de actividad o aplicación para que el usuario reinicie la aplicación. Este botón permite que su aplicación obtenga la nueva configuración global y dibuje en la pantalla disponible.

Manejo de cambios de configuración

Cuando un dispositivo es desplegado, las aplicaciones obtienen cambios de configuración para smallestScreenSize, screenSize, y screenLayout. Si su código no está manejando estos casos, su código debería de usar onSaveInstanceState y ViewModel’s para guardar los datos de la aplicación y el estado del usuario durante los cambios de configuración.

Si está siendo manejado desde su manifiesto, recibirá una devolución de llamada para handleConfigChange y podrá intercambiar diseños o recursos.

Para la mejor experiencia, debe declarar que resizeableActivity es true en su manifiesto. Y, se recomienda que permita que el SO maneje tantos cambios de configuración como sea posible, dada la cantidad de casos extremos en los que puede perder algo, como intercambiar recursos por diferentes densidades de visualización.

Multi-reanudado

En dispositivos con pantallas grandes, las personas desean usar aplicaciones en paralelo en un entorno de múltiples ventanas. Android 10 introduce un cambio importante para administrar este tipo de entorno: reanudación múltiple.

Antes de Android 10, en un entorno de múltiples ventanas, solo una de las actividades visibles está en el estado RESUMED . Esto puede ser confuso para el usuario, ya que no hay una indicación visual de qué actividad se RESUMED .

Con la reanudación múltiple, todas las actividades visibles están en el estado RESUMED . Sin embargo, las aplicaciones aún pueden terminar en un estado PAUSED donde, por ejemplo, una actividad transparente está encima de la actividad o la actividad no es enfocable, como en una imagen en imagen.

Este cambio se ha realizado de una manera que minimiza las alteraciones que se deben realizar: en la mayoría de los casos, no debe haber cambios necesarios para que su aplicación funcione en múltiples reanudaciones. Sin embargo, es posible que deba realizar cambios en los recursos que solo pueden manejar el acceso exclusivo.

Por ejemplo, si hay tres actividades que desean utilizar la cámara, solo una puede acceder a la cámara. En este caso, debe manejar la devolución de llamada onDisconnect desde la cámara y escuchar la disponibilidad de la cámara. Tenga en cuenta que establecer resizeActivity en false no garantizará el acceso a estos recursos porque puede tener una actividad flotante encima de su actividad o una pantalla secundaria con una actividad que quiera usar la cámara.

Android 10 presenta una nueva devolución de llamada, onTopResumedActivityChanged⁠ , donde se notifica la actividad cuando se reanuda la “parte superior”.

protected void onTopResumedActivityChanged(boolean topResumed) {
  if (topResumed) {
    // Top Resumed activity
    // Can be a signal to re-acquire exclusive resources
  } else {
    // No longer the top resumed activity
  }
}

Esto se traduce al estado RESUMED para Android 9 y versiones anteriores.

Arrastrar y soltar

Arrastrar y soltar no es una característica nueva en Android, pero es algo que tiene mucho sentido cuando se trabaja en un entorno de ventanas múltiples. Especialmente para aplicaciones de productividad, los usuarios quieren usar arrastrar y soltar para texto e imágenes.

Como puede implicar agregar arrastrar y soltar, le recomendamos que consulte la guía para desarrolladores de Android sobre arrastrar y soltar⁠ , donde puede encontrar documentación completa y algunos ejemplos de código excelentes.