Crie um fluxo e um ritmo flexíveis com uma estrutura e métodos de contenção para seu conteúdo. Comece criando contêineres de layout e adicione conteúdo.
1. Estrutura básica: grade de layout para orientar o conteúdo
Para começar a criar uma estrutura sólida com restrições consistentes, adicione margens e colunas aos seus layouts.
As margens oferecem espaçamento nas bordas esquerda e direita da tela e do conteúdo. Um valor de margem padrão para dimensionamento compacto é 16 dp, mas as margens precisam se adaptar para acomodar telas maiores. O conteúdo e as ações do corpo do app precisam permanecer dentro dessas margens e estar alinhados a elas.
Você também pode garantir zonas seguras de encarte ou encartes nesta etapa. Os encartes da barra de sistema evitam que ações importantes fiquem abaixo das barras de sistema. Você precisa renderizar o conteúdo atrás das barras de sistema.
Use colunas para criar uma estrutura de grade flexível para alinhamento consistente e para fornecer definição vertical a um layout dividindo o conteúdo na área do corpo. O conteúdo fica nas áreas da tela que contêm colunas. Essas colunas dão estrutura ao layout, oferecendo uma estrutura conveniente para organizar elementos.
A importância ou hierarquia do conteúdo pode ajudar a determinar o tipo de grade de layout para trazer mais estrutura. Se o conteúdo tiver uma hierarquia clara, uma grade de layout hierárquica será adequada. Por exemplo, um layout editorial ou uma tela de detalhes com um cabeçalho grande e arte principal.
Uma grade modular funciona bem para conteúdo e layout igualmente importantes, mas muito estruturados, como uma galeria de fotos.
Escolha uma grade de colunas para layouts responsivos e unidirecionais consistentes ou quando precisar de mais flexibilidade.
Independente do tipo, a grade de layout também precisa se adaptar a tamanhos e formatos.
Este exemplo usa uma grade de colunas para alinhar o conteúdo com uma grade subjacente, mantendo o dimensionamento flexível. Para acomodar diferentes formatos, a grade de colunas muda o tamanho e o número de colunas com base no tamanho da tela, o que também permite que o conteúdo seja dimensionado. Evite ser muito granular com a grade de layout. Em vez disso, use a grade de referência para fornecer unidades de espaçamento consistentes.
Começando a adicionar texto à estrutura de layout. As margens protegem o conteúdo das bordas da tela. As colunas oferecem uma estrutura de espaçamento e alinhamento consistente.
Como alternativa, use uma grade de layout hierárquica para manter a tela de detalhes em ordem.
Comece com uma grade de layout consistente. Se o conteúdo exigir, quebre a grade. Mesmo assim, talvez outra grade ainda se alinhe às necessidades do seu conteúdo.
Saiba mais sobre contêineres de layout, como paginadores e layout de fluxo.
Manuscrito e alvenaria são outros tipos de grades de layout.
Qualquer grade de layout escolhida também pode usar 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 de lista.
2. Aplicar contenção
Use a contenção para agrupar visualmente os elementos.
Contenção se refere ao uso de espaços em branco e elementos visíveis juntos para criar um agrupamento visual. Um contêiner é uma forma que representa uma área fechada. Em um único layout, é possível agrupar elementos que compartilham conteúdo ou funcionalidade semelhantes e separá-los de outros elementos usando espaço em branco, tipografia e divisores.
O Android usa linhas, colunas e caixas como elementos básicos, então você pode projetar o encapsulamento de maneira semelhante. Agrupe itens semelhantes com espaços em branco ou uma divisão visível para ajudar a orientar você pelo conteúdo.
A contenção implícita usa espaços em branco para agrupar visualmente o conteúdo e criar limites de contêiner, enquanto a contenção explícita usa objetos como linhas divisórias e cards para agrupar o conteúdo.
A figura a seguir mostra um exemplo de uso da contenção implícita para conter o cabeçalho e a cópia principal. A grade de colunas é usada para alinhar e criar agrupamentos. Os destaques estão explicitamente contidos nos cards. Usando iconografia e hierarquia de tipos para maior separação visual.
3. Posicionar conteúdo
Com uma grade de layout escolhida e conteúdo em contêineres, o Android tem várias maneiras de processar e posicionar elementos de conteúdo, com blocos de construção básicos e modificadores ou contêineres de layout, como grade e flexbox.
Considere se o conteúdo é unidimensional ou bidimensional. Por exemplo, o conteúdo pode fluir na horizontal, na vertical ou nas duas direções.
Como mostrado na figura a seguir, um layout de autenticação pode usar um layout de grade bidimensional.
Os elementos da interface também podem flexionar e fluir em uma dimensão, como filtros ou tags de conteúdo. Saiba mais sobre o flexbox.
Os layouts também podem usar uma combinação de tipos. Por exemplo, você pode combinar um carrossel ou rolagem horizontal com cards verticais. Ou você pode apresentar um gráfico personalizado com dados de lista vertical.
Você pode apresentar conteúdo em linhas ou colunas de rolagem com linhas e colunas lentas.
Alinhamento
Assim como no fluxo e alinhamento do layout automático, é possível especificar o arranjo e o alinhamento dos elementos da interface.
Use AlignmentLine para criar linhas de alinhamento personalizadas, que layouts pais
podem usar para alinhar e posicionar os filhos.
O que fazer
O que não fazer
4. Dimensionar e cortar conteúdo
O escalonamento é crucial para acomodar conteúdo dinâmico, orientação do dispositivo e tamanhos de tela. Os elementos podem permanecer fixos ou ser dimensionados.
Especifique como as imagens são dimensionadas e posicionadas nos contêineres para garantir que elas sejam exibidas corretamente em qualquer dispositivo. Caso contrário, o foco principal de uma imagem pode ser cortado, ou ela pode ficar muito pequena ou muito grande para o layout.
Acomode diferentes proporções e orientações de dispositivos com dimensionamento e corte adequados. Como as proporções podem variar muito, especifique como seu conteúdo lida com esses cenários.
Por exemplo, uma imagem principal de largura total ocupa toda a tela de um smartphone na orientação paisagem.
O que fazer
O que não fazer
Se o conteúdo precisar manter a proporção, como um vídeo vertical, restrinja a proporção e equilibre o espaço vazio.
O que não fazer
Conteúdo fixado
Muitos componentes têm interações, rolagem e posicionamento integrados com slots ou estruturas, como barras de apps. Alguns elementos podem ser modificados para ficar fixos em vez de reagir à rolagem. Por exemplo, botões de ação flutuantes (FABs, na sigla em inglês) que abrigam ações críticas. Fixe elementos para melhorar o foco em determinados casos de uso, por exemplo, fixe uma entrada de texto em um teclado para evitar entradas ocultas.
Para entrada de texto, como mensagens e autenticação, a entrada é anexada ao teclado e recebe foco exclusivo.
Componentes no layout
Os componentes do Material 3 oferecem configurações e estados próprios para interação e conteúdo.
O Compose oferece layouts convenientes para combinar componentes do Material Design em padrões de tela comuns. Composables como Scaffold fornecem slots para vários componentes e outros elementos de tela. Leia mais sobre Componentes e layouts do Material Design.