Use layouts canônicos como ponto de partida, composições prontas para uso que ajudam os layouts a se adaptar a casos de uso e tamanhos de tela comuns. Esses layouts são estéticos e funcionais, derivados das orientações do Material 3.
O framework do Android inclui componentes especializados que tornam a implementação dos layouts direta e confiável usando as APIs Jetpack Compose ou views.
Layout de detalhes de lista
O layout de detalhes e listas permite que os usuários descubram listas de itens que têm informações descritivas, explicativas ou outras informações complementares (os detalhes do item). Em telas compactas, apenas a lista ou a visualização de detalhes fica visível. As listas são a forma mais comum de layouts para apps, mostrando uma coleção de conteúdo em um layout baseado em linhas. O layout de detalhes e listas é ideal para apps de mensagens, gerenciadores de contatos, navegadores de arquivos ou qualquer app em que o conteúdo possa ser organizado como uma lista de itens que revelam informações extras.
O conteúdo pode ser estático ou dinâmico.
- O conteúdo dinâmico é aquele que o app veicula na hora e é ideal para mostrar conteúdo gerado pelo usuário ou refletir as preferências ou ações dele. Por exemplo, imagine um app de fotos com uma lista rolável de fotos geradas pelo usuário, que é exclusiva para cada usuário e muda conforme ele envia mais imagens. Essas imagens são conteúdo dinâmico.
- Conteúdo estático representa conteúdo codificado, que só pode ser modificado fazendo mudanças diretamente no código do app. Exemplos de conteúdo estático são imagens e texto que todos os usuários podem ver.
O arquivo do Figma Now in Android oferece vários exemplos de layouts. O exemplo a seguir mostra uma coleção unidimensional de conteúdo.
Confira as listas do Material 3 para mais orientações de design sobre componentes e especificações de lista.
Layout do feed
Um layout de feed organiza elementos de conteúdo equivalentes em uma grade configurável para uma visualização rápida e conveniente de um grande volume de conteúdo. Saiba mais nas diretrizes do Material 3 para usar cards em uma coleção. Os feeds podem ser configurações baseadas em lista ou grade em telas compactas, geralmente em cards ou blocos. O conteúdo pode ser dinâmico, ou seja, "inserido" de uma fonte externa dinâmica, como uma API.
Um layout de grade é composto por linhas e colunas formadas por princípios de contenção implícitos ou explícitos. Um layout de grade pode ser aplicado de forma mais rígida ou escalonado para variar as linhas e colunas. Ambos precisam ter aplicação consistente de espaçamento e lógica para evitar confusão dos usuários. Confira as diretrizes do Material 3 sobre como criar feeds.
É possível implementar um layout de feed no Compose com listas ou grades lazy,
ou em Views com RecyclerView ou CardView.
Por exemplo, uma galeria de fotos e podcasts em um layout de grade são formatos comuns de feed.
Layout do painel de suporte
Uma visualização para dispositivos móveis pode exigir conteúdo ou controles de suporte. Geralmente na forma de planilhas ou caixas de diálogo, eles ajudam a manter o foco e a organização da visualização principal. Confira as orientações do M3 para usar o layout canônico do painel de suporte.
Saiba mais sobre as diretrizes do M3 para folhas de baixo.