Design adaptável é a prática de projetar layouts que se adaptam a pontos de interrupção e dispositivos específicos.
Para implementar layouts adaptáveis de forma eficaz:
Primeiro, considere a largura da classe de janela do dispositivo para determinar as mudanças de layout e ajuste a altura. Compatibilidade com tamanhos de tela diferentes.
O Android usa conceitos de design responsivo, semelhantes ao desenvolvimento da Web, empregando grades e imagens flexíveis para criar layouts que respondem de maneira eficaz ao contexto.
Permita que os layouts respondam a vários tamanhos com métodos adaptáveis: reflow, reveal e mudança de apresentação.
Evite restringir o app apenas à orientação retrato. Isso causa o efeito letterbox quando o app é redimensionado.
O que não fazer
Para conferir diretrizes de design sobre como adaptar layouts a tamanhos de tela maiores, leia o guia para desenvolvedores Suporte a diferentes tamanhos de tela no Compose e a página Aplicando layout do M3. Você também pode conferir a galeria canônica de telas grandes do Android para se inspirar e implementar layouts para telas grandes.
Pense de forma adaptativa
O design adaptável deve ser o padrão ao criar seu app. O mercado de dispositivos móveis Android está em constante evolução. Por isso, não pense apenas em smartphones. Em vez disso, inclua tudo, desde smartphones, dobráveis, tablets e tudo mais.
Embora alguns recursos e casos de uso não façam sentido em todos os tamanhos de tela ou formatos, o design adaptável oferece mais liberdade aos usuários em relação a ergonomia, usabilidade e qualidade do app.
Métodos e qualidade
Comece projetando telas principais (comunique os conceitos essenciais ou seu app) com tamanhos de classe como pontos de interrupção para servir de diretrizes para o restante do app. Essas experiências principais podem destacar qualidades adaptáveis e de fator de forma diferenciadas. Ou crie conteúdo responsivo em um nível fundamental ao anotar como o conteúdo deve ser restrito, expandido ou refluído.
Neste exemplo, a navegação e o conteúdo são refluídos, flexionados e dimensionados para melhor navegação ergonômica. A grade de layout se expande de orientação vertical para várias colunas. O endereço na barra de apps e os filtros são refeitos e flexíveis para se ajustar à grade de layout.
O que fazer
O que não fazer
O que fazer
O que fazer
O que não fazer
Verifique se as entradas e os botões não estão esticados.
Pense em termos de contenção e painéis.
Use o conceito de contenção de painéis para agrupar conteúdo em layouts adaptáveis. Por exemplo, o exemplo usado é uma tela de detalhes, um painel que pode ser mostrado em um layout de detalhes da lista.
Os tamanhos compactos devem usar um layout de um painel.
O Medium pode usar layouts de um ou dois painéis.
Os tamanhos grande e extragrande podem usar layouts de vários painéis.
Use contêineres intrínsecos e visuais para agrupar elementos. Os painéis podem entrar, ocultar, expandir, ser restritos ou aparecer. Pensar com painéis facilita o design em todos os dispositivos móveis.
Embora os painéis não sejam essenciais em telas grandes, ainda é preciso pensar no conteúdo em grupos de contenção para ter flexibilidade.
Permita que os elementos mudem e sejam reorganizados, concentrando-se em como eles se adaptam à grade. Considere a mudança vertical para elementos e combine com restrições e mudanças de apresentação.
Considere a escala e a quantidade de conteúdo mostrado.
Uma pequena grade de vídeos em um smartphone fica apertada e confusa em um tablet. Atualize a escala do elemento da interface com base no tamanho da tela, na densidade e na entrada.
Um app de alta qualidade precisa atender ao nível diferenciado nas diretrizes de qualidade de apps principais e para telas grandes.
Para saber mais sobre layouts, confira a página Entendendo o layout do Material Design 3 (M3).
Aproveite os tamanhos exclusivos de formato.
Não se esqueça também de tamanhos de tela menores e proporções diferentes, já que os smartphones Android têm uma variedade de tamanhos e os dispositivos dobráveis podem incluir uma pequena tela de capa que pode exibir seu app.
Para layouts baseados em controle, como players de mídia, permita que os controles sejam reajustados e o conteúdo seja revelado.
Para ajudar o usuário a se ajustar, use um elemento de âncora, como um botão de reprodução grande, para adaptar o conteúdo ao redor, e a arte principal se torna o plano de fundo na tela de capa.
Além das classes de tamanho
Embora o tamanho da janela seja um fator comum para o design adaptável, seu app também precisa estar pronto para que os usuários conectem monitores e dispositivos de entrada, visualizem em várias distâncias e mudem a postura do dispositivo. É possível verificar essas
mudanças usando a API mediaQuery, que permite adicionar nuances ao
projetar como o app adapta elementos específicos da interface a determinados casos de uso.
Adapte o design do app no nível do componente ou painel, em vez de criar
telas inteiras por tamanho, entrada, formato e posição.
Para mais informações sobre interação de entrada, leia os guias de interação da experiência para computador.
Confira um exemplo de estudo de caso, o Pawparrazzi, criado e projetado com as APIs adaptáveis e orientações de design mais recentes.
