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 laptop e conversível. 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 cheia, o Android renderiza apps no ChromeOS em contêineres de janela de formato livre, o que é mais apropriado 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 de app redimensionável.

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

  • Processe o ciclo de vida da atividade corretamente no modo de várias janelas e continue atualizando a interface, 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 exibida na parte de cima do app, que mostra quando os usuários mantêm os controles da janela e o botão "Voltar" pressionados. Para que seu app tenha uma aparência bem acabada e personalizada para o ChromeOS, defina os valores de colorPrimary e, se possível, colorPrimaryDark no tema do app.

colorPrimaryDark é usado para colorir a barra superior. Se apenas colorPrimary for definido, o ChromeOS vai usar uma versão mais escura na barra de cima. 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 apps para ChromeOS, ofereça suporte a entradas do 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:

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

Figura 2. Rolagem com a roda do mouse.

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

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

Cursores personalizados

Personalize os cursores do mouse dos 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 para 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, use teclas de atalho para permitir que os usuários sejam mais produtivos. Por exemplo, se o app oferece suporte a impressão, use Control+P para abrir uma caixa de diálogo de impressão.

Da mesma forma, processe todos os elementos importantes da interface 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 interface precisam ter estados óbvios e em conformidade com a acessibilidade, conforme mostrado nas figuras abaixo:

Figura 4. Tabulação transversal.

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

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

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

Aprimorar ainda mais a entrada do usuário

Para ter funcionalidades para computadores no seu app, considere as entradas abaixo voltadas para a produtividade.

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 por um clique do mouse ou pelo botão secundário do trackpad ou por um toque e mantenha pressionado em uma tela touchscreen:

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

Arrastar e soltar

Criar interações de arrastar e soltar, como a da figura a seguir, pode trazer funcionalidades de produtividade eficientes e intuitivas para seu app. Para ver mais informações, consulte Arrastar e soltar.

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

Suporte à stylus

A compatibilidade com a stylus é crucial 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 uma descrição das APIs da stylus, consulte Compatibilidade de entrada em telas grandes.

Tornar seus layouts responsivos

Faça bom uso do espaço disponível na tela para o app, independentemente do estado visual (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.
  • Fazer melhor uso do espaço na barra de ferramentas do app.
  • Melhorar o posicionamento de affordances da interface adaptando o app para o 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 e a facilidade de leitura.
  • Implemente um sistema de colunas responsivo. Para saber mais, consulte Grade de layout responsivo.
  • Redimensione e modifique a interface quando necessário usando o sistema de colunas. Evite abrir novas janelas sempre que possível.
  • Remova ou reduza a importância dos componentes de rolagem horizontal.
  • Evite interface modal de tela cheia. Use a interface inline, como indicadores de progresso e alertas, para todas as ações não críticas.
  • 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 in-line, colunas extras ou IU 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 flutuantes (FABs) para melhorar a navegação pelo teclado. Por padrão, um FAB posiciona-se por último na ordem de tabulação transversal. Em vez disso, crie-a primeiro, porque ela é 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 celular 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, use 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", localização atual ou outras rotas de escape no app, como botões para fechar ou cancelar, como parte da interface de tela grande.

É possível controlar se o app mostra um botão "Voltar" na janela definindo uma preferência dentro da tag <activity>. Uma configuração de 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 têm volume fixo: os apps que emitem sons 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:

Anterior
Como criar apps para o ChromeOS
Próxima
Como preparar seu ambiente para desenvolvedores