Otimizar apps para o Chrome OS

Os apps Android desempenham um papel importante na redefinição da computação moderna como em telas grandes. Dito isso, simplesmente executar seu app para smartphone 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 dispositivos conversíveis e laptops. 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 Chrome OS inclui compatibilidade básica com várias janelas. Em vez de sempre ocupar a tela inteira, o Android renderiza apps no Chrome OS 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 possam exibir todo o conteúdo para o usuário, leia as diretrizes em Gerenciamento de janelas.

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

• Gerencie o ciclo de vida da atividade corretamente no modo de várias janelas e continue atualizando a IU, mesmo que o app não esteja 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.
• 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 o 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.

Quando apropriado, diferencie as entradas do mouse e de toque. Por exemplo, manter um item pressionado pode acionar uma IU de seleção múltipla, mas o clique com o botão direito no mesmo item pode acionar um menu de opções.

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 precisam 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 o app for compatível com impressão, use Control + P para abrir uma caixa de diálogo de impressão. Da mesma forma, todos os elementos importantes da IU também precisam ser processados 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.

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.

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

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

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

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

O app precisa 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.
• 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 precisa ser feita primeiro, porque é a principal, ou ser substituída por outra funcionalidade de nível superior.

Mudar padrões de navegação

À medida que o 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 computador.

Você pode definir se o app exibirá um botão "Voltar" na janela configurando uma preferência dentro da tag <activity>. 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 de 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 terão 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 nos Chromebooks, consulte os seguintes recursos:

• Leia a postagem Traga seu app Android para Chromebooks (em inglês) no Blog de desenvolvedores Android.
• Assista a sessão apps Android para Chromebooks e dispositivos de tela grande no Google I/O 2017.