Otimizar apps para o Chrome OS

Os apps para Android desempenham um papel importante na redefinição da computação moderna em telas grandes. Por isso, a simples portabilidade do seu app de smartphone para Chromebooks não oferece aos usuários a melhor experiência. Esta página detalha algumas maneiras de personalizar sua experiência para formatos de dispositivos conversíveis e laptops.

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

A implementação de apps para Android no Chrome OS inclui compatibilidade básica com várias janelas. Em vez de sempre ocupar a tela cheia, o Android renderiza apps no Chrome OS em contêineres de janela de formato livre apropriados, conforme mostrado na figura 1.

Figura 1. Um app em diferentes tamanhos de janela.

Os usuários podem redimensionar a janela que hospeda seu app para Android, conforme mostrado na figura 2. Para que as janelas de formato livre sejam redimensionadas sem problemas e exibam todo o conteúdo para o usuário, leia as diretrizes e observações em Compatibilidade de tamanho de tela para Chromebooks.

Figura 2. Uma janela redimensionável do app.

Você pode melhorar a experiência do usuário quando o app é executado no Chrome OS por meio destas práticas recomendadas:

  • 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.
  • A orientação da atividade raiz do app afeta todas as janelas. Leia as regras de atividade raiz.

Para mais informações, leia sobre o gerenciamento de janelas.

Personalizar a cor da barra superior

O Chrome OS usa o tema do app para colorir a barra exibida na parte superior, 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 bem acabada e personalizada para o Chrome OS, defina colorPrimary e, se possível, valores de colorPrimaryDark no tema do app. O último é usado para colorir a barra superior. Se somente colorPrimary for definido, o Chrome OS usará uma versão mais escura na barra superior. Para ver mais informações, consulte Como usar o tema do Material Design.

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 laptops podem até virar tablets.

Todos os apps para Chrome OS precisam ser compatíveis com mouse, trackpad e teclado e poder ser usados sem tela touchscreen. Muitos apps já são compatíveis com mouse e trackpad sem a necessidade de trabalho extra. No entanto, é sempre melhor personalizar o comportamento do seu app corretamente para o mouse. Além disso, ofereça compatibilidade e distinção entre entradas de mouse e de toque. Leia mais sobre compatibilidade para mouse em Compatibilidade de entrada para Chromebooks.

Verifique se:

  • todos os destinos são clicáveis com o mouse;
  • todas as superfícies roláveis por toque também funcionam com eventos da roda do mouse;
  • os estados da ação de passar o cursor foram implementados com bom senso e a intenção de melhorar a descoberta da IU sem sobrecarregar o usuário.

Figura 3. Rolagem com a roda do mouse.

Figura 4. Estados de passagem do cursor sobre um botão.

Quando apropriado, diferencie as entradas do mouse e de toque. Por exemplo, o toque em um item pode acionar uma IU de seleção múltipla, mas o clique no mesmo item pode acionar uma única seleção.

Cursores personalizados

Os apps precisam personalizar os cursores do mouse para indicar com qual elemento da IU é possível 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().

Os apps devem mostrar:

  • cursores de texto;
  • alças de redimensionamento nas bordas das camadas redimensionáveis;
  • ponteiros de mão aberta/fechada para conteúdo que pode ser movimentado ou arrastado com um clique e o gesto de 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, disponibilize teclas de atalho para aumentar a produtividade dos usuários. Por exemplo, se seu app é compatível com impressão, use Ctrl+P para abrir uma caixa de diálogo de impressão. Da mesma forma, toda IU importante também precisa ser processada pela navegação com a tecla "Tab". Isso é especialmente importante para acessibilidade. No entanto, para atender aos padrões de acessibilidade, todas as superfícies de IU devem ter estados óbvios e em conformidade com a acessibilidade.

Figura 5. Tabulação transversal.

Figura 6. Substituição de um gesto de deslizar por um controle que aparece ao passar o cursor do mouse.

Implemente também alternativas ao teclado ou ao mouse para os principais recursos ocultos em interações específicas por toque, como toques longos, gestos de deslizar e outros gestos de vários toques. Um exemplo de solução seria disponibilizar botões que aparecem em uma superfície ao passar o cursor do mouse.

Aprimorar ainda mais a entrada do usuário

Para atingir a funcionalidade para computador no seu app, considere estas outras entradas voltadas para a produtividade.

Menus de contexto

Figura 7. Um menu de contexto exibido ao clicar com o botão direito do mouse.

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 no botão secundário do mouse ou do trackpad ou por um toque longo na tela touchscreen.

Arrastar e soltar

Figura 8. Gesto de arrastar e soltar em uma interface de árvore de arquivos.

Criar interações de arrastar e soltar pode trazer funcionalidades de produtividade eficientes e intuitivas para seu app. Para ver mais informações, consulte Arraste e solte

Compatibilidade com stylus

A compatibilidade com a stylus é fundamental 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. Consulte Compatibilidade de entrada para Chromebooks para ver uma descrição das APIs da stylus.

Tornar seus layouts responsivos

Seu app deve fazer bom uso do espaço da tela disponível, independentemente do estado visual (tela cheia, retrato, paisagem, janela). Alguns exemplos de bom uso do espaço incluem, entre outros:

  • Exibir a arquitetura do app.
  • Limitar o comprimento do texto e o tamanho da imagem a uma largura máxima.
  • Melhorar o uso do espaço em tela na barra de ferramentas do app.
  • Melhorar o posicionamento de recursos da IU, adaptando-o ao uso do mouse em vez do uso do polegar.
  • Otimizar o tamanho de vídeos e imagens, estabelecendo um conjunto de largura e altura máximas para todas as mídias e melhorando a legibilidade.
  • Implementar um sistema de coluna responsivo. Para mais informações, consulte IU responsiva (em inglês).
  • Redimensionar e modificar a IU quando necessário usando o sistema de colunas e evitar a abertura de uma nova janela quando possível.
  • Remover ou reduzir a importância dos componentes de rolagem horizontal.
  • Evitar a IU modal de tela cheia. Usar a IU in-line, como indicadores de progresso e alertas, para todas as ações não fundamentais.
  • Usar componentes de IU aprimorados, como seletor de hora e data, campos de texto e menus suspensos, projetados para mouse, teclado e telas maiores.
  • Usar edições in-line, coluna extra ou IU modal em vez de uma nova atividade para recursos de edição pequenos a médios.
  • Remover ou modificar botões de ação flutuante (FAB, na sigla em inglês) para melhorar a navegação pelo teclado. Por padrão, um FAB é posicionado por último na ordem de tabulação transversal. Essa ação deve ser feita primeiro, porque é a principal, ou ser substituída por outra funcionalidade de nível superior.

À medida que seu app se torna cada vez mais personalizado para um ambiente de laptop, avance para um padrão de navegação que não enfatize o botão "Voltar". O app precisa conseguir processar a própria pilha de histórico disponibilizando botões "Voltar", localização atual ou outras rotas alternativas no app, como botões para fechar ou cancelar, como parte da IU de tela grande. 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 área de trabalho.

Você pode definir se o app exibirá um botão "Voltar" na janela configurando uma preferência dentro da tag <activity> (link em inglês). A configuração de true ocultará 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 Chrome OS, 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:

  • Segmente pelo menos o Android 7.0 (API nível 24). Você ainda pode escolher um nível mínimo de SDK mais baixo.
  • Permita que o app seja redimensionado.

Processar configurações do dispositivo

Mudar volume

Dispositivos Chrome OS são dispositivos com volume fixo. Os apps que emitem sons devem ter 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 Chrome OS. 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: