Otimizar apps para o ChromeOS

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

Esta página detalha algumas maneiras de personalizar sua experiência para formatos 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 ChromeOS inclui recursos básicos de várias janelas suporte. Em vez de sempre ocupar a tela inteira, o Android renderiza 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 exibidas todo o conteúdo para o usuário, leia as diretrizes em Gerenciamento de janelas.

Figura 1. Uma janela de app redimensionável.

Siga estas práticas recomendadas para melhorar a experiência do usuário quando o app é executado no ChromeOS práticas recomendadas:

• Gerencie o ciclo de vida da atividade corretamente o modo de várias janelas e continue atualizando a interface, mesmo quando seu aplicativo não estiver a janela mais em foco.
• 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 o 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 na parte de cima do app. que mostra quando os usuários mantêm pressionados os controles da janela e o botão "Voltar". Para fazer seu app tiver uma aparência refinada e personalizada para o ChromeOS, defina colorPrimary e, se possível, colorPrimaryDark no tema do app.

colorPrimaryDark é usado para colorir a barra superior. Apenas se A colorPrimary é definida, o ChromeOS usa uma versão mais escura dela 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.

Permita a entrada do mouse, trackpad e teclado nos seus apps para ChromeOS para que o app possa ser usado sem tela touchscreen. Muitos aplicativos já suportam mouse e trackpad sem necessidade de trabalho extra. No entanto, é melhor personalizar a configuração comportamento adequado para o mouse, além de oferecer suporte e distinguir do mouse e do 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 em Figura 2.
• Os estados ao passar o cursor são implementados com discernimento cuidadoso para melhorar descoberta da interface sem sobrecarregar o usuário, conforme 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. Para exemplo, toque e manter um item pode acionar uma interface de seleção múltipla, enquanto clicar com o botão direito do mouse no mesmo item poderá acionar um menu de opções.

Cursores personalizados

Personalize seus apps cursores do mouse para indicar qual elemento da interface o usuário podem 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
• cursores 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 todo Chromebook tem um teclado físico, use teclas de atalho para e aumentar a produtividade dos usuários. Por exemplo, se o app oferece suporte 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 foco óbvio e em conformidade com a estados, como mostrado nas figuras a seguir:

Figura 4. Tabulação transversal.

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

Certifique-se de implementar alternativas de teclado ou mouse para o recursos ocultos em interações específicas de toque, como toque e ações de espera deslizes ou outros gestos multitoque. Um exemplo de solução é fornecer que aparecem em uma superfície ao passar o cursor.

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

Aprimorar ainda mais a entrada do usuário

Para que o app tenha funcionalidades para computadores, considere o seguinte: entradas orientadas para a produtividade.

Menus de contexto

Menus de contexto do Android, que são outro acelerador para levar os usuários do seu app, podem ser acionadas pelo clique do mouse ou pelo botão um botão secundário ou por um toque e segurar em uma tela sensível ao toque:

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, podem trazer resultados eficientes e intuitivos a funcionalidade de acesso ao 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 é 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 uma descrição dos 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 o 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 recursos da interface adaptando o app ao uso do mouse do uso de miniaturas.
• otimizar o tamanho de vídeos e imagens, estabelecer um conjunto de largura máxima de todas as mídias e maximizar a legibilidade.
• Implemente um sistema de colunas responsivo. Para mais informações, consulte Responsivo grade de layout.
• 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. Usar uma interface inline, como indicadores de progresso e alertas para todas as ações não críticas.
• Usar componentes de interface aprimorados, como seletores de data e hora, campos de texto e projetados para mouse, teclado e telas maiores.
• Usar edições in-line, colunas adicionais 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 flutuantes (FABs) para melhorar o teclado navegação. Por padrão, um FAB posiciona-se por último na tabulação transversal ordem. Em vez disso, faça-o primeiro, porque é a ação principal, ou substituí-la por outra affordance de nível superior.

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

Mudar padrões de navegação

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 aplicativo se torna cada vez mais personalizado para um ambiente de laptop, considere movendo-se em direção a um padrão de navegação que esmaece o botão "Voltar". Deixe o o app processa a própria pilha de histórico disponibilizando funções de retorno. navegação, navegação estrutural ou outras rotas de escape, como botões "Fechar" ou "Cancelar" parte da interface de tela grande.

É possível controlar se o app exibirá um botão "Voltar" na janela ao: definindo uma preferência <activity> tag. 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 o resultado capturado pode ser girado incorretamente.

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

• Segmente pelo menos o Android 7.0 (API de nível 24). A 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 tocam sons têm os próprios. controles de volume. Siga as diretrizes para Em andamento 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 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.