Las apps para Android cumplen una función importante a la hora de redefinir el aspecto de la informática moderna en pantallas grandes. Por lo tanto, si solo ejecutas la app para teléfonos en una Chromebook, no obtendrás 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 el Sistema operativo Chrome incluye compatibilidad básica con la función Multiventana. En lugar de ocupar siempre la pantalla completa, Android procesa las apps del Sistema operativo Chrome en contenedores de ventanas de formato libre, lo que resulta más adecuado para esos 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 puedan mostrarle todo su contenido al usuario, lee los lineamientos en Administración de ventanas.
Figura 1: Una ventana de app que puede cambiar de tamaño
Para mejorar la experiencia del usuario cuando se ejecuta la app en el Sistema operativo Chrome, 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 la app no esté en la ventana enfocada en primer plano.
- 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.
- La orientación de la actividad raíz de la app afecta a todas sus ventanas. Ten en cuenta las reglas de la actividad raíz.
Para obtener más información, lee sobre la administración de ventanas.
Personaliza el color de la barra superior
El Sistema operativo Chrome usa el tema de la app para colorear la barra superior que aparece en la parte superior de la app, que muestra cuándo los usuarios tienen los controles de la ventana y el botón Atrás. Para que la app se vea optimizada y personalizada en el Sistema operativo Chrome, define los valores colorPrimary y (si es posible) colorPrimaryDark en el tema de la app. Este último se usa para colorear la barra superior. Si solo se define el objeto colorPrimary, el Sistema operativo Chrome usará una versión más oscura en la barra superior. Para obtener más información, consulta Cómo usar el tema de material.
Cómo agregar compatibilidad con un 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. Además, algunos dispositivos pueden convertirse de laptop a formato de tablet.
Todas las apps para el Sistema operativo Chrome deben ser compatibles con un mouse, panel táctil y teclado, y deben poder usarse sin pantalla táctil. Muchas apps ya admiten un mouse y panel táctil sin necesidad de realizar ningún trabajo adicional. Sin embargo, siempre es mejor personalizar el comportamiento de tu app de manera correcta para el mouse, y deberías admitir y distinguir entre el mouse y las entradas táctiles. Obtén más información sobre la compatibilidad con el mouse en Compatibilidad de entrada para Chromebooks.
Debes garantizar lo siguiente:
- Se puede hacer clic con el mouse en todos los destinos.
- Todas las superficies donde se puedan hacer desplazamientos táctiles deben deslizarse cuando se usa la rueda del mouse.
- Los estados de desplazamiento se implementan con la intención y el criterio de mejorar el descubrimiento de la IU sin abrumar al usuario.
Figura 2: Desplazamiento con la rueda del mouse
Figura 3: Estados de desplazamiento del botón
Cuando corresponda, deberías diferenciar entre las entradas táctiles y del mouse. Por ejemplo, mantener presionado un elemento podría activar una IU de varias selecciones, mientras que hacer clic con el botón derecho en el mismo elemento podría activar un menú de opciones.
Cursores personalizados
Las apps deberían personalizar los cursores del mouse para indicar con qué elemento de su IU se puede interactuar y cómo. Puedes configurar el objeto PointerIcon para utilizar cuando los usuarios interactúan con una vista llamando al método setPointerIcon().
Las apps deberían mostrar lo siguiente:
- Punteros para escritura de texto
- Controles para cambiar el tamaño en los bordes de la capa de tamaño variable.
- Punteros de mano abierta/mano cerrada para contenido que se puede desplazar o arrastrar con un clic y un gesto de arrastre.
- 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, deberías proporcionar teclas de acceso rápido para permitir que tus usuarios sean más productivos. Por ejemplo, si tu app admite impresión, puedes usar Ctrl + P para abrir un diálogo de impresión. Del mismo modo, todos los elementos importantes de la IU también deberían controlarse mediante navegación de pestañas. Esto resulta particularmente importante para la accesibilidad. Sin embargo, para cumplir con los estándares de accesibilidad, todas las superficies de la IU deben tener estados enfocados evidentes y compatibles con la accesibilidad.
Figura 4: Tabulación transversal
Figura 5: Reemplazo de un gesto de deslizamiento con un control que aparece cuando se desplaza el cursor
También debes asegurarte de implementar alternativas de teclado o mouse a las funciones principales ocultas en interacciones táctiles específicas, como pulsaciones prolongadas, deslizamientos o algún otro gesto multitáctil. Una solución de ejemplo sería proporcionar botones que aparecen en una superficie cuando colocas el cursor sobre ella.
Cómo ampliar la entrada del usuario
Si quieres lograr que tu app funcione a la perfección en un entorno de escritorio, ten en cuenta estas entradas adicionales orientadas a la productividad.
Menús contextuales
Figura 6: Menú contextual que aparece cuando haces clic con el botón derecho
Los menús contextuales de Android, que son otro acelerador para llevar a los usuarios a las funciones de tu app, pueden activarse mediante un clic con el botón derecho de un mouse o el botón secundario de un panel táctil, o bien si se mantiene presionada la pantalla táctil.
Arrastrar y soltar
Figura 7: Arrastrar y soltar en una interfaz de árbol de archivos
La creación de interacciones que implican arrastrar y soltar puede brindar una funcionalidad de productividad intuitiva y eficiente a tu app. Para obtener más información, consulta Arrastrar y soltar.
Compatibilidad con plumas stylus
La compatibilidad con plumas stylus es muy importante 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. Consulta Compatibilidad de entrada para Chromebooks si quieres obtener un resumen de las API de plumas stylus.
Cómo hacer que tus diseños sean receptivos
Figura 8: Simulaciones de un diseño receptivo en una pantalla de tamaño de un teléfono y una computadora de escritorio
Tu app debe aprovechar el espacio disponible en pantalla, independientemente del estado visual (pantalla completa, vertical, horizontal o con ventanas). Algunos ejemplos de buen uso del espacio son los siguientes:
- Mostrar la arquitectura de la app.
- Limitar la longitud del texto y el tamaño de la imagen a un ancho máximo
- Hacer mejor uso del espacio en la barra de herramientas de la app.
- Mejorar la ubicación de las posibilidades de IU, adaptándola al uso del mouse en lugar del uso del pulgar.
- Establecer un conjunto de altura y ancho máximos para todos los medios, así como maximizar la legibilidad y la capacidad de escaneo, a fin de optimizar el tamaño de los videos y las imágenes.
- Implementar un sistema de columnas sensible. Para obtener más información, consulta IU responsiva.
- Cambiar el tamaño y modificar la IU cuando sea necesario mediante el sistema de columnas, y evitar abrir nuevas ventanas cuando sea posible.
- Quitar o reducir la importancia de los componentes de desplazamiento horizontal.
- Evitar la IU modal de pantalla completa y usar la interfaz de usuario en línea, incluidos indicadores de progreso y alertas, para todas las acciones no críticas.
- Usar componentes de IU mejorados, como selectores de fecha y hora, campos de texto y menús desplegables, diseñados para mouse, teclado y pantallas más grandes.
- Mediante ediciones directas, usar una columna adicional o una IU modal en lugar de una actividad nueva para la función de ediciones pequeñas y medianas.
- Quitar o modificar los botones de acción flotante (FAB) para mejorar la navegación del teclado. De forma predeterminada, un FAB se coloca en último lugar, en el orden de tabulación transversal. Debería estar primero, porque es la acción principal, o bien reemplazarse por otro nivel más alto.
Cómo cambiar los patrones de navegación
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. La app debería poder manejar su propia pila de historial y proporcionar botones de retroceso, rutas de navegación o rutas de escape (por ejemplo, botones de cierre o cancelación) como parte de su IU de pantalla grande. 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.
Puedes controlar si tu app muestra o no un botón Atrás en su ventana estableciendo una preferencia dentro de la etiqueta <activity>. Si configuras el elemento como true, se ocultará 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 incorrectamente.
El modo de compatibilidad cambia la forma en que el sistema procesa eventos, como los cambios de orientación, en el Sistema operativo Chrome. Eso ayuda a evitar problemas cuando se usa la cámara en el modo de orientación incorrecto. Para habilitar el modo de compatibilidad, haz lo siguiente:
- Orienta la app a Android 7.0 (API nivel 24), como mínimo. Todavía puedes elegir un nivel mínimo de SDK.
- Permite que tu app pueda cambiar de tamaño.
Cómo controlar la configuración del dispositivo
Cómo cambiar el volumen
Los dispositivos que ejecutan el Sistema operativo Chrome son dispositivos de volumen fijo. Las apps que reproducen sonidos deben tener 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 el Sistema operativo Chrome. 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 apps para Android en Chromebooks, consulta los siguientes recursos:
- Lee la publicación Bring your Android App to Chromebooks (en inglés) en el Blog para desarrolladores de Android.
- Mira la sesión Android Apps for Chromebooks and Large Screen Devices (en inglés) de Google I/O 2017.