Otimizar apps para o ChromeOS

Os apps Android desempenham um papel importante na redefinição da computação moderna como em telas grandes. No entanto, apenas executar o app para dispositivos móveis em um Chromebook não oferece aos usuários a melhor experiência.

Esta página detalha algumas maneiras de personalizar sua experiência para formatos de laptops e conversíveis. Consulte nossa lista abrangente de testes para saber mais sobre como testar seu app para ter compatibilidade nesses dispositivos.

Usar a compatibilidade com o recurso "Várias janelas" em formato livre

A implementação de apps Android no ChromeOS inclui suporte básico a várias janelas. Em vez de sempre ocupar a tela inteira, o Android renderiza apps no ChromeOS em contêineres de janela de formato livre, o que é mais adequado para esses dispositivos.

Os usuários podem redimensionar a janela que contém o app Android, conforme mostrado na figura 1. Para garantir que as janelas de formato livre sejam redimensionadas sem problemas e exibam todo o conteúdo para o usuário, leia as diretrizes em Gerenciamento de janelas.

Figura 1. Uma janela redimensionável do app.

Você pode melhorar a experiência do usuário quando seu app é executado no ChromeOS seguindo estas práticas recomendadas:

  • Gerencie o ciclo de vida da atividade corretamente no modo de várias janelas e continue atualizando a IU, mesmo quando o app não estiver na janela com foco principal.
  • Verifique se o app ajusta o próprio layout corretamente sempre que o usuário redimensiona a janela.
  • Personalize as dimensões iniciais da janela do app especificando o tamanho de inicialização.
  • Esteja ciente de que a orientação da atividade raiz do app afeta todas as janelas.

Personalizar a cor da barra superior

O ChromeOS usa o tema do app para colorir a barra de cima mostrada na parte de cima, que aparece quando os usuários mantêm os controles da janela e o botão "Voltar" pressionados. Para que seu app tenha uma aparência refinada e personalizada para o ChromeOS, defina colorPrimary e, se possível, colorPrimaryDark valores no tema do app.

colorPrimaryDark é usado para colorir a barra de cima. Se apenas colorPrimary for definido, o ChromeOS usará uma versão mais escura na barra superior. Para saber mais, consulte Estilos e temas.

Compatibilidade com teclado, trackpad e mouse

Todos os Chromebooks têm um teclado físico e um trackpad, e alguns deles também têm tela touchscreen. Alguns dispositivos podem ser convertidos de laptop para tablet.

Nos seus apps para ChromeOS, ofereça suporte a entradas de mouse, trackpad e teclado para que o app possa ser usado sem tela touchscreen. Muitos apps já oferecem suporte a mouse e trackpad sem a necessidade de trabalho extra. No entanto, é melhor personalizar o comportamento do app corretamente para o mouse, além de oferecer suporte e distinguir entre entradas de mouse e de toque.

Verifique se:

  • É possível clicar em todos os destinos com o mouse.
  • Todas as superfícies roláveis por toque rolam por eventos da roda do mouse, como mostrado na Figura 2.
  • Os estados de passagem de cursor são implementados com bom senso para melhorar a descoberta de IU sem sobrecarregar o usuário, como mostrado na Figura 3.

Figura 2. Rolagem com a roda do mouse.

Figura 3. Estados de passar o cursor sobre o botão.

Quando apropriado, diferencie as entradas do mouse e por toque. Por exemplo, tocar e pressionar um item pode acionar uma interface de seleção múltipla, enquanto clicar com o botão direito no mesmo item pode acionar um menu de opções.

Cursores personalizados

Personalize os cursores do mouse dos seus apps para indicar com qual elemento da interface o usuário pode interagir e como. Você pode definir o PointerIcon para ser usado quando os usuários interagem com uma visualização chamando o método setPointerIcon().

Nos seus apps, mostre todos os itens a seguir:

  • cursores de texto;
  • Alças de redimensionamento nas bordas das camadas redimensionáveis
  • Ponteiros de mão aberta e fechada para conteúdo que pode ser movido ou arrastado usando um gesto de clicar e arrastar
  • Ícones de carregamento para processamento

A classe PointerIcon oferece constantes que podem ser usadas para implementar cursores personalizados.

Atalhos do teclado e navegação

Como todos os Chromebooks têm um teclado físico, forneça teclas de atalho para aumentar a produtividade dos usuários. Por exemplo, se o app for compatível com impressão, use Control+P para abrir uma caixa de diálogo de impressão.

Da mesma forma, processe todos os elementos importantes da IU usando a navegação com a tecla Tab. Isso é especialmente importante para acessibilidade. Para atender aos padrões de acessibilidade, todas as superfícies de IU precisam ter estados óbvios e em conformidade com a acessibilidade, como mostrado nas figuras a seguir:

Figura 4. Tabulação transversal.

Figura 5. Substituir o gesto de deslizar por um controle que aparece ao passar o cursor.

Implemente alternativas ao teclado ou ao mouse para os recursos principais ocultos em interações específicas de toque, como ações de tocar e pressionar, deslizar ou outros gestos multitoque. Um exemplo de solução é fornecer botões que aparecem em uma superfície ao passar o cursor.

Para saber mais sobre suporte a teclado, trackpad e mouse, consulte Compatibilidade de entrada em telas grandes.

Aprimorar ainda mais a entrada do usuário

Para alcançar a funcionalidade para computador no app, considere as entradas orientadas para a produtividade a seguir.

Menus de contexto

Os menus de contexto do Android, que são outro acelerador para levar os usuários aos recursos do app, podem ser acionados pelo clique de um mouse ou do botão secundário do trackpad ou por um toque e uma tecla pressionada na tela touchscreen:

Figura 6. Um menu de contexto que aparece ao clicar com o botão direito do mouse.

Arrastar e soltar

A criação de interações de arrastar e soltar, como a da figura a seguir, pode trazer uma funcionalidade de produtividade eficiente e intuitiva para seu app. Para mais informações, consulte Arrastar e soltar.

Figura 7. Arrastar e soltar em uma interface de árvore de arquivos.

Compatibilidade com stylus

A compatibilidade com a stylus é essencial para apps de desenho e anotação. Ofereça compatibilidade avançada para Chromebooks e tablets equipados com stylus implementando interações adaptadas ao uso da entrada dessa caneta.

Tenha em mente as possíveis variações em diferentes hardwares da stylus ao projetar suas interações com ela. Para conferir um resumo das APIs da stylus, consulte Compatibilidade de entrada em telas grandes.

Tornar seus layouts responsivos

Use o espaço da tela disponível para o app, independentemente do estado visual dele (tela cheia, retrato, paisagem ou janela). Alguns exemplos de bom uso do espaço incluem:

  • Mostrar a arquitetura do app.
  • Limite o comprimento do texto e o tamanho da imagem a uma largura máxima.
  • Aproveite melhor o espaço na barra de ferramentas do app.
  • Melhore o posicionamento de recursos da interface adaptando o app ao uso do mouse em vez do uso do polegar.
  • Otimize o tamanho de vídeos e imagens, estabeleça um conjunto de largura e altura máximas para todas as mídias e maximize a legibilidade.
  • Implemente um sistema de colunas responsivo. Para mais informações, consulte a Grade de layout responsivo.
  • Redimensione e modifique a interface quando necessário usando o sistema de colunas. Evite abrir uma nova janela sempre que possível.
  • Remova ou reduza a importância dos componentes de rolagem horizontal.
  • Evite a interface modal em tela cheia. Use IU inline, como indicadores de progresso e alertas, para todas as ações não essenciais.
  • Use componentes de IU aprimorados, como seletores de hora e data, campos de texto e menus projetados para mouse, teclado e telas maiores.
  • Use edições inline, colunas extras ou interface modal em vez de uma nova atividade para um recurso de edição pequeno a médio.
  • Remova ou modifique botões de ação flutuante (FABs) para melhorar a navegação pelo teclado. Por padrão, um FAB é posicionado por último na ordem de tabulação transversal. Em vez disso, deixe a prioridade primeiro, porque é a ação principal, ou a substitua por outra funcionalidade de nível mais alto.

Figura 8. Simulações de um layout responsivo em uma tela de smartphone e de computador.

Um botão "Voltar" no nível do sistema é um padrão herdado das raízes portáteis do Android, que não se encaixa tão bem em um contexto de computador.

À medida que seu app se torna cada vez mais personalizado para um ambiente de laptop, vá para um padrão de navegação que não enfatize o botão "Voltar". Permita que o app processe a própria pilha de histórico fornecendo botões "Voltar" no app, navegação estrutural ou outras rotas alternativas, como botões para fechar ou cancelar, como parte da interface de tela grande.

Você pode controlar se o app exibirá um botão "Voltar" na janela definindo uma preferência dentro da tag <activity>. A configuração true oculta o botão "Voltar".

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

Resolver problemas com imagens de visualização da câmera

Problemas de câmera podem surgir quando o app só pode ser executado na orientação retrato, mas o usuário o executa em uma tela no modo paisagem. Nesse caso, a visualização ou o resultado capturado pode ser girado incorretamente.

O modo de compatibilidade muda a forma como o sistema processa eventos no ChromeOS, como mudanças de orientação. Isso ajuda a evitar problemas quando a câmera é usada no modo de orientação errado. Para ativar o modo de compatibilidade, atenda aos seguintes critérios:

  • Segmente pelo menos o Android 7.0 (API de nível 24). O nível mínimo do SDK pode ser menor.
  • Torne seu app redimensionável.

Processar configurações do dispositivo

Considere as seguintes configurações de dispositivo para apps executados no ChromeOS.

Mudar volume

Os dispositivos ChromeOS são dispositivos com volume fixo: os apps que tocam som têm os próprios controles de volume. Siga as diretrizes para Trabalhar com dispositivos de volume fixo.

Mudar o brilho da tela

Não é possível ajustar o brilho do dispositivo no ChromeOS. As chamadas para system settings e WindowManager.LayoutParams são ignoradas.

Outros materiais de aprendizagem

Para saber mais sobre como otimizar seus apps Android para Chromebooks, consulte os seguintes recursos: