Optimiza apps para ChromeOS

Las apps para Android cumplen una función importante a la hora de redefinir el aspecto de la informática moderna en pantallas grandes. Sin embargo, ejecutar tu app para dispositivos móviles en una Chromebook no les brinda a los usuarios la mejor experiencia.

En esta página, se detallan algunas formas en las que puedes adaptar tu experiencia para laptops y factores de forma convertibles. Consulta nuestra lista completa de pruebas para obtener más información sobre cómo probar la compatibilidad de la app en estos dispositivos.

Cómo aprovechar la compatibilidad con Multiventana de formato libre

La implementación de apps para Android en ChromeOS incluye compatibilidad básica con el modo multiventana. En lugar de ocupar siempre la pantalla completa, Android procesa las apps de ChromeOS en contenedores de ventanas de formato libre, lo que resulta más apropiado para estos dispositivos.

Los usuarios pueden cambiar el tamaño de la ventana que contiene la app para Android, como se muestra en la Figura 1. Para asegurarte de que las ventanas de formato libre cambien de tamaño sin problemas y muestren todo su contenido al usuario, lee los lineamientos en Administración de ventanas.

Figura 1: Ventana de una app que puede cambiar de tamaño

Para mejorar la experiencia del usuario cuando se ejecuta tu app en ChromeOS, sigue estas prácticas recomendadas:

  • Controla el ciclo de vida de la actividad correctamente en el modo multiventana y asegúrate de seguir actualizando la IU, incluso cuando tu app no esté en la ventana enfocada superior.
  • Asegúrate de que tu app ajuste su diseño adecuadamente cada vez que el usuario cambie el tamaño de su ventana.
  • Personaliza las dimensiones iniciales de la ventana de la app especificando el tamaño de inicio.
  • Ten en cuenta que la orientación de la actividad raíz de la app afecta a todas sus ventanas.

Personaliza el color de la barra superior

ChromeOS usa el tema de la app para colorear la barra superior que se muestra sobre la app, la cual muestra cuándo los usuarios tienen los controles de la ventana y el botón Atrás. Para que tu app luzca bien y personalizada para ChromeOS, define los valores colorPrimary y, si es posible, colorPrimaryDark en el tema de tu app.

colorPrimaryDark se usa para colorear la barra superior. Si solo se define colorPrimary, ChromeOS usa una versión más oscura en la barra superior. Para obtener más información, consulta Estilos y temas.

Agrega compatibilidad con teclado, panel táctil y mouse

Todas las Chromebooks tienen un teclado físico y un panel táctil. Algunas incluso tienen pantalla táctil. Algunos dispositivos pueden convertirse de laptop a formato de tablet.

En tus apps para ChromeOS, admite entradas del mouse, el panel táctil y el teclado para que se pueda usar sin pantalla táctil. Muchas apps ya admiten un mouse y un panel táctil sin necesidad de realizar ningún trabajo adicional. Sin embargo, es mejor personalizar el comportamiento de tu app de manera adecuada para el mouse y admitir y distinguir entre las entradas táctiles y del mouse.

Asegúrate de que ocurra lo siguiente:

  • Se puede hacer clic con el mouse en todos los objetivos.
  • Todas las superficies táctiles desplazables se desplazan en los eventos de la rueda del mouse, como se muestra en la figura 2.
  • Los estados de desplazamiento se implementan con criterio cuidado para mejorar el descubrimiento de la IU sin abrumar al usuario, como se muestra en la Figura 3.

Figura 2: Desplazamiento con la rueda del mouse.

Figura 3: Estados de desplazamiento del botón.

Cuando corresponda, diferencia entre las entradas táctiles y del mouse. Por ejemplo, mantener presionado un elemento podría activar una IU de selección múltiple, mientras que hacer clic con el botón derecho en el mismo elemento podría activar un menú de opciones.

Cursores personalizados

Personaliza los cursores del mouse de tus apps para indicar con qué elemento de la IU puede interactuar el usuario y cómo. Puedes configurar el objeto PointerIcon para utilizar cuando los usuarios interactúan con una vista llamando al método setPointerIcon().

En tus apps, muestra lo siguiente:

  • Punteros para escritura de texto
  • Controladores de cambio de tamaño en los bordes de la capa de tamaño variable
  • Punteros de mano abierta y cerrada para contenido que se puede desplazar o arrastrar con un gesto de hacer clic y arrastrar
  • Procesamiento de íconos giratorios

La clase PointerIcon proporciona constantes que puedes usar para implementar cursores personalizados.

Combinaciones de teclas y navegación

Como cada Chromebook tiene un teclado físico, proporciona teclas de acceso rápido para permitir que los usuarios sean más productivos. Por ejemplo, si tu app admite impresión, puedes usar Control + P para abrir un diálogo de impresión.

Del mismo modo, controla todos los elementos importantes de la IU con la navegación de pestañas. Esto resulta particularmente importante para la accesibilidad. Para cumplir con los estándares de accesibilidad, todas las superficies de la IU deben tener estados enfocados evidentes y compatibles con la accesibilidad, como se muestra en las siguientes imágenes:

Figura 4: Tabulación transversal.

Figura 5: Reemplazo de un gesto de deslizamiento con un control que aparece cuando se coloca el cursor sobre él

Asegúrate de implementar alternativas de teclado o mouse para las funciones principales ocultas en interacciones táctiles específicas, como acciones de mantener presionado, deslizamientos y otros gestos multitáctiles. Una solución de ejemplo es proporcionar botones que aparecen en una superficie cuando colocas el cursor sobre ella.

Para obtener más información sobre la compatibilidad con teclados, paneles táctiles y mouses, consulta Compatibilidad con entradas en pantallas grandes.

Amplía la entrada del usuario

Para lograr una funcionalidad de escritorio en tu app, ten en cuenta las siguientes entradas orientadas a la productividad.

Menús contextuales

Los menús contextuales de Android, que son otro acelerador para llevar a los usuarios a las funciones de tu app, pueden activarse con un clic del mouse o con el botón secundario del panel táctil, o bien si mantienes presionada una pantalla táctil:

Figura 6: Un menú contextual que aparece cuando se hace clic con el botón derecho

Arrastrar y soltar

La creación de interacciones de arrastrar y soltar, como la que se muestra en la siguiente figura, puede aportar una funcionalidad de productividad intuitiva y eficiente a tu app. Para obtener más información, consulta Arrastrar y soltar.

Figura 7: Arrastra y suelta en una interfaz de árbol de archivos.

Compatibilidad con pluma stylus

La compatibilidad con la pluma stylus es fundamental para dibujar y tomar notas en apps. Proporciona compatibilidad mejorada para las Chromebooks y tablets equipadas con plumas stylus mediante la implementación de interacciones personalizadas que tienen como fin el uso de una pluma stylus.

Ten en cuenta las posibles variaciones en el hardware de las plumas stylus cuando diseñes las interacciones para ese fin. Para obtener un resumen de las APIs de la pluma stylus, consulta Compatibilidad de entrada en pantallas grandes.

Cómo hacer que tus diseños sean receptivos

Aprovecha el espacio de pantalla disponible para tu app, independientemente de su estado visual (pantalla completa, vertical, horizontal o con ventanas). Estos son algunos ejemplos de buen uso del espacio:

  • Arquitectura de las apps de Display
  • Limita la longitud del texto y el tamaño de la imagen a un ancho máximo.
  • Aprovecha mejor el espacio en la barra de herramientas de la app.
  • Para mejorar la ubicación de las posibilidades de IU, adapta la app al uso del mouse en lugar del del pulgar.
  • Optimiza el tamaño de los videos y las imágenes, establece un conjunto de ancho y alto máximos para todo el contenido multimedia, y maximiza la legibilidad y la capacidad de escaneo.
  • Implementa un sistema de columnas adaptable. Para obtener más información, consulta Cuadrícula de diseño responsivo.
  • Cambiar el tamaño de la IU y modificarlo cuando sea necesario con el sistema de columnas Evita abrir una nueva ventana cuando sea posible.
  • Quita o reduce la importancia de los componentes de desplazamiento horizontal.
  • Evita la IU modal de pantalla completa. Usa la IU intercalada, como indicadores de progreso y alertas, para todas las acciones que no sean críticas.
  • Usa componentes de IU mejorados, como selectores de fecha y hora, campos de texto y menús diseñados para mouse, teclado y pantallas más grandes.
  • Usa ediciones intercaladas, columnas adicionales o IU modal en lugar de una actividad nueva para una función de edición pequeña a mediana.
  • Quita o modifica los botones de acción flotante (BAF) para mejorar la navegación del teclado. De forma predeterminada, un BAF coloca último en orden de tabulación transversal. En su lugar, configúrala primero, porque es la acción principal, o reemplázala por otra opción de nivel más alto.

Figura 8: Simulaciones de un diseño adaptable en una pantalla de tamaño de teléfono y computadora de escritorio.

Un botón Atrás a nivel del sistema es un patrón que se transfiere desde las raíces de los dispositivos portátiles de Android, que no encaja tan bien en un contexto de escritorio.

A medida que tu app se personaliza cada vez más para un entorno de laptops, procura avanzar hacia un patrón de navegación que quite énfasis al botón Atrás. Permite que la app controle su propia pila del historial. Para ello, proporciona botones de retroceso en la app, rutas de navegación y otras rutas de escape, como botones para cerrar o cancelar, como parte de su IU de pantalla grande.

Puedes controlar si tu app muestra un botón Atrás en su ventana estableciendo una preferencia dentro de la etiqueta <activity>. Una configuración de true oculta el botón Atrás:

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

Cómo resolver problemas con las imágenes de vista previa de la cámara

Los problemas de la cámara pueden surgir cuando la app solo puede ejecutarse en orientación vertical, pero el usuario la ejecuta en una pantalla horizontal. En este caso, la vista previa o el resultado capturado podría rotarse de forma incorrecta.

El modo de compatibilidad cambia la forma en que el sistema controla los eventos, como los cambios de orientación, en ChromeOS. Esto ayuda a evitar problemas cuando se usa la cámara en el modo de orientación incorrecto. Para habilitar el modo de compatibilidad, cumple con los siguientes criterios:

  • Orienta la app a Android 7.0 (API nivel 24), como mínimo. El nivel de SDK mínimo puede ser inferior.
  • Crea una app que pueda cambiar de tamaño.

Cómo controlar la configuración del dispositivo

Ten en cuenta las siguientes opciones de configuración del dispositivo para las apps que se ejecutan en ChromeOS.

Cambiar el volumen

Los dispositivos ChromeOS son dispositivos de volumen fijo: las apps que reproducen sonido tienen sus propios controles de volumen. Sigue las instrucciones para trabajar con dispositivos de volumen fijo.

Cómo cambiar el brillo de la pantalla

No puedes ajustar el brillo del dispositivo en ChromeOS. Se ignoran las llamadas a los objetos system settings y WindowManager.LayoutParams.

Materiales de aprendizaje adicionales

Si quieres obtener más información sobre la optimización de tus apps para Android en Chromebooks, consulta los siguientes recursos: