Las apps para Android cumplen una función importante a la hora de redefinir el aspecto de la informática moderna en pantallas grandes. Pero ejecutar tu app para dispositivos móviles en una Chromebook no le brinda a los usuarios la mejor experiencia.
En esta página, se detallan algunas formas en las que puedes personalizar 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 el funcionamiento básico de la función multiventana y asistencia. En lugar de ocupar siempre la pantalla completa, Android renderiza apps en ChromeOS en contenedores de ventanas de formato libre, lo que es más adecuado 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 tus ventanas de formato libre cambien de tamaño sin problemas y se muestren todo el 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 tu app se ejecuta en ChromeOS, sigue estas recomendaciones prácticas:
- Maneja correctamente el ciclo de vida de la actividad en modo multiventana, y asegúrate de seguir actualizando la IU aunque tu app no sea 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 el 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.
que muestra cuándo los usuarios tienen los controles de la ventana y el botón Atrás. Para hacer
que tu app se vea pulida y personalizada para ChromeOS, define
colorPrimary
y, de ser posible,
colorPrimaryDark
valores en el tema de tu app.
colorPrimaryDark se usa para colorear la barra superior. Si tan solo
Se definió 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 la entrada del mouse, el panel táctil y el teclado. para que la app se pueda usar sin pantalla táctil. Muchas apps ya admiten mouse y panel táctil sin necesidad de trabajo adicional. Sin embargo, te recomendamos que personalices apropiado para el mouse, y para admitir y distinguir del mouse y las entradas táctiles.
Asegúrate de que ocurra lo siguiente:
- Se puede hacer clic con el mouse en todos los destinos.
- Todas las superficies desplazables táctiles se desplazan cuando se usa la rueda del mouse, como se muestra en figura 2.
- Los estados de desplazamiento se implementan con 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. Para ejemplo, tocar & mantener presionado un elemento podría activar una IU de selección múltiple, mientras que haciendo clic con el botón derecho en el mismo elemento podría activar un menú de opciones en su lugar.
Cursores personalizados
Personaliza las apps cursores del mouse para indicar qué elemento de la IU debe
cómo puedes interactuar. Puedes configurar el objeto PointerIcon para utilizar cuando los usuarios interactúan con una vista llamando al método setPointerIcon().
En tus apps, muestra todo lo siguiente:
- Punteros para escritura de texto
- Controladores de cambio de tamaño en los bordes de la capa de tamaño variable
- Punteros con manos abiertas y cerradas para contenido que puede desplazarse lateralmente o arrastrarse 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, debes proporcionar las teclas de acceso rápido para permiten que tus usuarios sean más productivos. Por ejemplo, si tu app admite puedes usar Control + P para abrir un cuadro de diálogo de impresión.
De manera similar, 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 plataformas de IU deben tener un enfoque claro estados, como se muestra en las siguientes figuras:
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 el entorno principal. funciones ocultas en interacciones táctiles específicas, como toques y acciones de conservación, deslizamientos y otros gestos multitáctiles. Un ejemplo de solución es proporcionar botones que aparecen en una superficie cuando colocas el cursor sobre ellos.
Para obtener más información sobre la compatibilidad con el teclado, el panel táctil y el mouse, consulta Compatibilidad de entrada en pantallas grandes
Amplía la entrada del usuario
Para lograr la funcionalidad del nivel de escritorio para tu app, ten en cuenta lo siguiente: entradas orientadas a la productividad.
Menús contextuales
Los menús contextuales de Android, que son otro acelerador para llevar a los usuarios a funciones de tu app, se pueden activar con un clic del mouse o el panel táctil botón secundario o mediante un toque y mantener presionado en una pantalla táctil:
Figura 6: Un menú contextual que aparece cuando haces clic con el botón derecho
Arrastrar y soltar
Para compilar interacciones de arrastrar y soltar, como la de la siguiente imagen, puede brindar productividad intuitiva y eficiente funcionalidad a tu app. Para obtener más información, consulta Arrastrar y soltar.
Figura 7: Arrastrar y soltar en una interfaz de árbol de archivos
Compatibilidad con pluma stylus
La compatibilidad con la pluma stylus es fundamental para las apps de dibujo y toma de notas. 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 esbozo del APIs de la pluma stylus, consulta Compatibilidad de entrada en pantallas grandes
Cómo hacer que tus diseños sean receptivos
Haz un buen uso del espacio en pantalla disponible para tu app, independientemente de lo siguiente: su estado visual (pantalla completa, vertical, horizontal o con ventanas). Algunos ejemplos de un buen uso del espacio incluyen lo siguiente:
- Arquitectura de la app de Display.
- Limite 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 adaptando la app al uso del mouse del uso del pulgar.
- Optimizar el tamaño de los videos y las imágenes, y establecer un conjunto de ancho máximo y altura para todos los medios, y maximizan la legibilidad y la capacidad de lectura.
- Implementar un sistema de columnas responsivo Para obtener más información, consulta Responsivo cuadrícula de diseño.
- Cambia el tamaño y modifica la IU cuando sea necesario con el sistema de columnas. Evita abrir ventanas nuevas cuando sea posible.
- Quita o reduce la importancia de los componentes de desplazamiento horizontal.
- Evita la IU modal de pantalla completa. Usa una IU intercalada, como 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 diseñados para mouse, teclado y pantallas más grandes.
- Usa ediciones intercaladas, columnas adicionales o una IU modal en lugar de una actividad nueva para una función de edición pequeña o mediana.
- Quita o modifica los botones de acción flotante (BAF) para mejorar el teclado la navegación. De forma predeterminada, un BAF se posiciona en último lugar en el tabulador transversal en el orden personalizado. En su lugar, hazlo primero, porque es la acción principal. reemplázala por otra indicación visual de mayor nivel.
Figura 8: Simulaciones de un diseño adaptable en una pantalla de tamaño de teléfono y escritorio.
Cómo cambiar los patrones de navegación
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, considera lo siguiente: moviéndote hacia un patrón de navegación que desenfatiza el botón Atrás. Deja que los la app controla su propia pila de historial, ya que proporciona rutas de navegación u otras rutas de escape, como botones para cerrar o cancelar, parte de su IU para pantallas grandes.
Puedes controlar si tu app muestra un botón Atrás en su ventana.
estableciendo una preferencia dentro del
<activity>
etiqueta. Un parámetro de 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 incorrectamente.
El modo de compatibilidad cambia la manera en la que el sistema maneja los eventos, como los cambios de orientación, en ChromeOS. Esto ayuda a evitar problemas cuando la cámara se usa de forma incorrecta modo de orientación. 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 el nivel mínimo de SDK puede ser inferior.
- Crea una app que pueda cambiar de tamaño.
Cómo controlar la configuración del dispositivo
Ten en cuenta la siguiente 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 propias controles de volumen. Sigue los lineamientos de Trabajando en 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 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.