Qualidade de apps para telas grandes

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

O app preenche a área de exibição disponível, ou seja, a tela inteira ou, no modo de várias janelas, a janela do app. O app não tem efeito letterbox. Ele não é executado no modo de compatibilidade.

O app processa as mudanças de configuração e retém ou restaura o estado do dispositivo conforme ele passa por mudanças de configuração, como rotação, dobra e desdobramento e redimensionamento de janela nos modos de tela dividida e de janela de área de trabalho, por exemplo:

• A posição de rolagem dos campos roláveis é mantida.
• O texto digitado em campos de texto é mantido e o estado do teclado é restaurado.
• A reprodução de mídia é retomada de onde parou quando a mudança de configuração foi iniciada.

O app é totalmente funcional no modo de várias janelas. Consulte Suporte ao modo de várias janelas.

Observação: os apps Unity precisam ter a versão 2019 ou mais recente do Suporte de longo prazo (LTS) do Unity. Consulte Verificação no modo de várias janelas.

O app oferece suporte a interações básicas de mouse ou trackpad:

• Clique: qualquer elemento clicável, incluindo botões, menus suspensos, campos de entrada de texto e ícones de navegação.
• Seleção: qualquer elemento selecionável, incluindo botões de opção, caixas de seleção e texto (deslizando ou clicando duas vezes).
• Rolagem: vertical e horizontal em elementos roláveis, como listas e seletores.

O app oferece suporte básico a tablets, dispositivos dobráveis e ChromeOS com stylus. A stylus pode ser usada para selecionar e manipular elementos da interface, incluindo a rolagem por listas, seletores e outros conteúdos roláveis.

Consulte Stylus em Suporte de entrada em telas grandes.

Observação: a entrada básica da stylus é igual à entrada por toque, com suporte total no Android. Todos os apps oferecem suporte a entradas básicas da stylus sem necessidade de desenvolvimento especial.

No Android 14 (nível 34 da API) e versões mais recentes, os usuários podem escrever e editar texto em campos de entrada usando uma stylus. No ChromeOS M114 e versões mais recentes, uma stylus pode ser usada para escrever e editar texto em campos de entrada de texto nos componentes WebView.

Observação:no Android 14 e em versões mais recentes, os componentes EditText oferecem suporte à entrada usando uma stylus por padrão. Nenhum desenvolvimento especial é necessário. No ChromeOS M114 e em versões mais recentes, o WebView oferece suporte à entrada da stylus em campos de texto por padrão.

O app tem layouts responsivos e adaptáveis para telas grandes. Todos os layouts são responsivos (consulte Migrar a interface para layouts responsivos). A implementação de layouts adaptáveis é determinada pelas classes de tamanho de janela.

A interface do app pode incluir o seguinte:

• Grades de navegação de ponta que se expandem em tamanhos de janela maiores para painéis de navegação completos
• Layouts de grade que ajustam o número de colunas para acomodar mudanças de tamanho da janela.
• Colunas de texto em telas grandes.
• Painéis de borda finais que são abertos por padrão em tamanhos de tela de laptops e computadores. São fechados em telas menores.

Crie layouts de dois painéis, quando apropriado, para aproveitar o espaço grande da tela. Consulte Layouts canônicos.

A incorporação de atividades permite que apps baseados em atividade criem layouts de vários painéis exibindo atividades lado a lado.

Modals, menus de opções e outros elementos secundários são formatados corretamente em todos os tipos de tela e estados do dispositivo. Por exemplo:

• As páginas inferiores não têm largura total em telas grandes. Aplique uma largura máxima para evitar alongamento. Consulte Comportamento em Páginas: inferiores.
• Os botões não têm a largura total em telas grandes. Consulte Comportamento em Botões.
• Os campos e as caixas de texto não se estendem até a largura total em telas grandes. Consulte Comportamento em Campos de texto.
• Pequenos menus ou modais de edição não cobrem toda a tela e mantêm o máximo possível do contexto para o usuário. Consulte Menus.
• Os menus de opções aparecem ao lado do item selecionado pelo usuário. Consulte o tópico "Menu contextual" em Menus.
• As colunas de navegação substituem as barras para melhorar a ergonomia. As colunas também podem complementar outros componentes de navegação, como barras. Consulte Coluna de navegação.
• As gavetas de navegação são atualizadas para o componente do Material Design mais recente. Consulte Gaveta de navegação.
• As caixas de diálogo são atualizadas para o componente do Material Design mais recente. Consulte Caixas de diálogo.
• As imagens são exibidas com uma resolução adequada e não são esticadas nem cortadas.

O app oferece suporte a vários cenários de multitarefas, por exemplo:

• Modo picture-in-picture: o app pode entrar e sair do modo picture-in-picture nas orientações de retrato e paisagem, com o dispositivo dobrado e desdobrado e no modo de várias janelas. Consulte Suporte a picture-in-picture (PiP).
• Modo de várias janelas: o app pode abrir outro aplicativo em uma janela separada usando um link direto. Por exemplo, um app de gerenciamento de contatos abre um link para uma mensagem de e-mail que é exibida em uma nova janela. Consulte FLAG_ACTIVITY_LAUNCH_ADJACENT.
• Anexos: os apps de mensagens podem abrir anexos, como vídeos, em uma janela separada.

O app oferece suporte a todas as posições dobráveis e todos os casos de uso relacionados:

• Postura de mesa: videochamadas e reprodução de vídeo ou áudio.
• Postura de livro: leitura de conteúdo de texto longo.
• Exibição dupla: visualização frontal e traseira para apps de câmera. Suporte a dispositivos de tela dupla.

O app oferece suporte avançado à stylus, incluindo:

• Latência baixa e previsão de movimento para melhorar a responsividade
• sensibilidade à pressão para desenhar traços de largura variável;
• detecção de inclinação para criar traços de sombreamento;
• rejeição de dedo e da palma da mão para evitar marcas de toques acidentais.

O app mostra cursores personalizados para indicar como e quando os usuários podem interagir com elementos e conteúdo da interface, por exemplo:

• Cursores do sistema fornecidos pelo framework do Android
  • Cursores de texto
  • Alças de redimensionamento nas bordas das camadas redimensionáveis
  • Ícones de carregamento para processamento
• Cursores especiais fornecidos pelo desenvolvedor
  • Cruzes ao passar o cursor sobre os alvos nos jogos
  • Uma lupa ao passar o cursor sobre o conteúdo com zoom
  • Ferramentas para apps de desenho ou ilustração

Redimensione a janela do app no modo de várias janelas, incluindo os modos de tela dividida e de janelas para computador. Em dispositivos ChromeOS, minimize e restaure a janela do app, maximize e restaure a janela do app. Verifique se o app assume a orientação adequada e mantém o estado em todos os tamanhos de janela.

Observação: teste em um dispositivo de tela grande (com 600 dp ou mais) com o Android 12 (API de nível 31) ou mais recente para garantir que o dispositivo ofereça suporte ao seguinte:

• Todas as orientações do dispositivo, independente das restrições definidas com o elemento android:screenOrientation no manifesto do app.
• Modo de várias janelas, mesmo para apps que especificaram android:resizeableActivity="false" no manifesto.

Em cada tela do app com campos de rolagem, reprodução contínua ou entrada de texto, faça o seguinte:

• Conteúdo rolável: role o conteúdo.
• Conteúdo da reprodução: inicie a reprodução.
• Campos de entrada de texto: digite em vários campos

Gire o dispositivo entre as orientações de paisagem e retrato, dobre e desdobre (se aplicável), abra o app em duas telas (se você tiver um dispositivo de tela dupla) e redimensione a janela do app no modo de várias janelas. Minimize e restaure a janela do app em dispositivos ChromeOS. Maximize e restaure a janela do app. Verifique o seguinte:

• Conteúdo rolável: a posição de rolagem permanece a mesma.
• Conteúdo de reprodução: a reprodução é retomada de onde parou quando a mudança de configuração foi iniciada.
• Campos de entrada de texto: o texto digitado é mantido nos campos de entrada.

Abra o app no modo de várias janelas. Confira se o app é totalmente funcional em todos os tamanhos de janela, todas as orientações do dispositivo e todos os estados de dispositivo dobrável. Redimensione a janela do app em cada orientação. Em dispositivos dobráveis, dobre o dispositivo em cada orientação.

Apps Unity

Abra outro app. Acesse a tela "Recentes". Selecione o ícone do app e coloque-o no modo de tela dividida. Abra o app Unity, que precisa ser iniciado no modo de tela dividida ao lado ou abaixo do primeiro app. Acesse a tela inicial para ocultar o par de apps. Acesse a tela "Recentes". Selecione o par de telas divididas que inclui seu app Unity. Verifique se ele retoma a atividade e se o layout do app na janela de tela dividida está correto com todos os elementos da interface acessíveis.

Para cada tela do app, conecte um mouse e um trackpad ao dispositivo. Realize interações básicas com o mouse e o trackpad:

• Clique em todos os elementos clicáveis, como botões, menus suspensos e campos de entrada de texto.
• Marque botões de opção e caixas de seleção. Selecione o texto deslizando e clicando duas vezes.
• Role vertical e horizontalmente, se aplicável, por listas, seletores etc.

Execute o app em dispositivos com uma grande variedade de tamanhos de tela, incluindo smartphones, smartphones dobráveis, tablets pequenos e grandes e dispositivos ChromeOS. Execute o app no modo de várias janelas nos dispositivos.

Verifique se o layout do app responde e se adapta a diferentes tamanhos de tela e janela. Confira se o app expande e reduz as colunas de navegação, dimensiona o número de colunas em layouts de grade, flui o texto em colunas e assim por diante. Observe se os elementos da interface estão formatados para estética e função.

Em apps que usam a incorporação de atividades, teste se as atividades são exibidas lado a lado em telas grandes e empilhadas em telas pequenas.

Interaja com o app usando uma stylus da seguinte maneira:

• Ao desenhar, observe a latência entre a posição atual da stylus e o último traço renderizado.
• Desenhe com quantidades variadas de pressão da stylus. Confira se a largura dos traços muda de acordo com a pressão. Mais pressão precisa produzir traços mais espessos.
• Incline a stylus enquanto desenha para produzir efeitos de sombreamento. Quanto maior a inclinação, mais leves e espessos serão os traços de sombreamento.
• Deixe que os dedos e a palma da mão toquem na tela enquanto você desenha. Os toques da mão e do dedo não podem produzir marcas.

Interaja com o app usando um mouse e um trackpad. Verifique se os cursores personalizados aparecem em momentos adequados. Por exemplo:

• Cursores de texto em campos de entrada de texto
• Alças de redimensionamento nas bordas das camadas redimensionáveis
• Ícones de carregamento quando o app está executando tarefas de longa duração