Nível 2: otimização adaptativa

Os apps otimizados oferecem suporte total a todos os tipos de tela e estados do dispositivo, inclusive as transições de estado.

Diretrizes

Crie seu app para que ele se adapte a todos os tamanhos de tela e estados do dispositivo.

Interface do usuário

ID da diretriz	IDs de teste	Descrição
Responsive_adaptive_layouts	T-Layout_Flow	O app tem layouts responsivos e adaptáveis para todos os tamanhos de tela. 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: Colunas 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 computadores. São fechados em telas menores. Crie layouts de vários painéis (quando apropriado) para aproveitar o espaço grande da tela. Consulte Layouts canônicos. Para apps do Jetpack Compose, use layouts adaptáveis (como ListDetailPaneScaffold) para criar interfaces de vários painéis. Para apps legados baseados em atividades, a incorporação de atividades permite layouts de vários painéis mostrando atividades lado a lado.
UI_Secondary_Elements	T-Layout_Flow	Modais, menus de contexto 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 contexto aparecem ao lado do item selecionado pelo usuário. Consulte o tópico "Menus de contexto" em Menus. As colunas de navegação substituem as barras para melhorar a ergonomia em telas grandes. Consulte Coluna de navegação. As gavetas de navegação são atualizadas para colunas de navegação expandidas. 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.
Touch_Targets	T-Touch_Targets	As áreas de toque têm no mínimo 48 dp. Consulte as diretrizes de Layout e tipografia do Material Design (em inglês).
Drawable_Focus	T-Drawable_Focus	Um estado focado é criado para drawables personalizados interativos. Um drawable personalizado é qualquer elemento de interface visual não fornecido pelo framework do Android. Se os usuários puderem interagir com um drawable personalizado, ele vai precisar ser focalizável quando o dispositivo não estiver no modo de toque, e uma indicação visual do estado focado precisará ser aparente.

Teclado, mouse e trackpad

ID da diretriz	IDs de teste	Descrição
Keyboard_Navigation	T-Keyboard_Navigation	A tarefa principal flui no app com suporte à navegação pelo teclado, incluindo a navegação com as teclas Tab e de seta. Consulte Criar apps mais acessíveis.
Keyboard_Shortcuts	T-Keyboard_Shortcuts	O app oferece suporte a atalhos do teclado para ações usadas com frequência, como selecionar, recortar, copiar, colar, desfazer e refazer. Consulte Teclado, mouse e trackpad.
Keyboard_Media_Playback	T-Keyboard_Media_Playback	O teclado pode ser usado para controlar a reprodução de mídia. Por exemplo, a Spacebar reproduz e pausa a mídia.
Keyboard_Send	T-Keyboard_Send	A tecla Enter do teclado realiza uma função send em apps de comunicação.
Keyboard_Exit	T-Keyboard_Exit	A tecla Esc do teclado executa uma função exit que encerra ou desfaz uma ação. Por exemplo: Fecha modais, caixas de diálogo, pop-ups e menus. Limpa o texto de pesquisa ou remove o foco da pesquisa. Cancela o foco do teclado. Sai do vídeo em tela cheia, PiP, modo de tela cheia ou apresentações de slides. Descarta controles na tela, como barras de progresso ou menus. Cancela os timers de reprodução automática / próximo. Desmarca todos os itens selecionados. Interrompe a renomeação/edição sem salvar. Sai das ferramentas de corte/transformação e descarta as mudanças.
Context_Menus	T-Context_Menus	Os menus de contexto podem ser acessados pelo comportamento do botão direito do mouse ou trackpad.
Content_Zoom	T-Content_Zoom	O conteúdo do app pode ser ampliado usando a roda de rolagem do mouse (junto a um pressionamento de tecla Control ou Ctrl) e os gestos de pinça do trackpad.
Hover_States	T-Hover_States	Os elementos de ação da interface têm estados de passagem de cursor, quando adequado, para indicar aos usuários do mouse e do trackpad que os elementos são interativos.

Testes

Para garantir que o app seja otimizado e responsivo a todas as configurações de exibição, realize os testes a seguir.

Interface do usuário

ID de teste	IDs de diretrizes	Descrição
T-Layout_Flow	Responsive_adaptive_layouts, UI_Secondary_Elements	Execute o app em dispositivos com uma grande variedade de tamanhos de tela, incluindo smartphones, smartphones dobráveis, tablets pequenos e grandes e dispositivos de computador. 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. Para apps legados 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.
T-Touch_Targets	Touch_Targets	Verifique se as áreas de toque mantêm um tamanho e uma posição acessíveis e consistentes e não estão ocultas ou obscurecidas por outros elementos da interface para todos os tamanhos de tela e configurações. Para saber mais sobre acessibilidade, consulte o Scanner de acessibilidade.
T-Drawable_Focus	Drawable_Focus	Em cada tela do app que contém um drawable personalizado interativo, confira se ele pode ser focado usando um teclado externo, um botão direcional ou outro dispositivo que permita o foco de elementos da interface. Verifique se há uma indicação visual do estado em foco. Para informações relacionadas, consulte a documentação de foco do Compose.

Teclado, mouse e trackpad

ID de teste	IDs de diretrizes	Descrição
T-Keyboard_Navigation	T-Keyboard_Navigation	Navegue pelos componentes focalizáveis do app usando as teclas Tab e de seta de um teclado externo.
T-Keyboard_Shortcuts	Keyboard_Shortcuts	Use os atalhos em um teclado externo para selecionar, recortar, copiar, colar, desfazer e refazer ações.
T-Keyboard_Media_Playback	Keyboard_Media_Playback	Use um teclado externo para iniciar, parar, pausar, voltar e avançar a reprodução de mídia.
T-Keyboard_Send	Keyboard_Send	Use a tecla Enter de um teclado externo para enviar dados.
T-Keyboard_Exit	Keyboard_Exit	Use a tecla Esc de um teclado externo para executar uma função exit. Verifique se a chave faz o seguinte (quando aplicável): Fecha modais, caixas de diálogo, pop-ups e menus. Limpa o texto de pesquisa ou remove o foco da pesquisa. Cancela o foco do teclado. Sai do vídeo em tela cheia, PiP, modo de tela cheia ou apresentações de slides. Descarta controles na tela. Cancela os timers de reprodução automática / próximo. Desmarca todos os itens selecionados. Interrompe a renomeação/edição sem salvar. Sai das ferramentas de corte/transformação e descarta as mudanças.
T-Context_Menus	Context_Menus	Use o botão secundário do mouse ou o recurso de toque secundário do trackpad para acessar o menu de contexto dos elementos interativos.
T-Content_Zoom	Content_Zoom	Use a roda de rolagem do mouse (junto às teclas Control ou Ctrl) e os gesto de pinça do trackpad para controlar o zoom.
T-Hover_States	Hover_States	Passe o cursor do mouse ou do trackpad sobre os elementos acionáveis da interface para ativar o estado de passar o cursor sobre o elemento.