Use layouts comuns para ajudar a organizar seu app para casos de uso e tamanhos de tela comuns. Essas composições prontas para uso são bons pontos de partida.
Layout de detalhes e listas
Um 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 é veiculado pelo app na hora e é ideal para mostrar conteúdo gerado pelo usuário ou refletir a preferência 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.
- O conteúdo estático representa o 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 sobre as 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.
É possível implementar um layout de feed com listas ou grades lentas.
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 versão para dispositivos móveis pode exigir conteúdo ou controles de suporte, como páginas ou caixas de diálogo. Elas ajudam a manter o foco e a organização da visualização principal.
Saiba mais sobre as diretrizes do M3 para painéis inferiores.
WebViews
Uma WebView mostra páginas da Web no app. Na maioria dos casos, recomendamos usar um navegador da Web padrão, como o Chrome, para entregar conteúdo ao usuário. Para saber mais sobre navegadores da Web, leia o guia sobre como invocar um navegador com uma intent.