Crie um fluxo e um ritmo flexíveis com métodos de estrutura e contenção para seu conteúdo.
1. Estrutura de base
Para começar a criar uma estrutura sólida com restrições consistentes, adicione margens e colunas aos 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 é de 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 impedem que ações importantes fiquem abaixo das barras de sistema. Consulte Desenhar seu conteúdo atrás das barras de sistema para mais detalhes.
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.
Use uma grade de colunas para alinhar o conteúdo a uma grade subjacente, mas mantenha o dimensionamento flexível. A grade de colunas pode acomodar diferentes formatos mudando os tamanhos e o número de colunas conforme necessário pelo tamanho da tela em determinados pontos, permitindo que o conteúdo também seja dimensionado. Evite ser muito granular com a grade de colunas. É para isso que serve a grade de referência: fornecer unidades de espaçamento consistentes.
Tenha cuidado ao estabelecer uma grade de linhas acompanhante, porque ela pode restringir o escalonamento horizontal do conteúdo em orientações e formatos. Normalmente, estabelecer regras de padding fornece a consistência visual necessária.
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.
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.
Você pode agrupar itens semelhantes com espaços em branco ou uma divisão visível para ajudar a orientar o usuário 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 de 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
O Android tem várias maneiras de processar elementos de conteúdo nos respectivos contêineres que podem ajudar a posicioná-los adequadamente, incluindo gravidade, espaçamento e escalonamento.
Gravity é um padrão para colocar um objeto em um contêiner potencialmente maior para casos de uso específicos. A figura a seguir mostra exemplos de objetos de posicionamento que começam e ficam no centro (1), no topo e no centro horizontal (2), na parte inferior esquerda (3) e no final e à direita (1).
4. Dimensionar 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.
É importante observar como as imagens são exibidas nos contêineres com dimensionamento e posição para garantir que elas apareçam da maneira desejada, apesar do contexto do dispositivo. Caso contrário, o foco principal da imagem pode aparecer cortado, as imagens podem ficar muito pequenas ou grandes para o layout ou outros efeitos indesejáveis.
O conteúdo que não é anotado pode aparecer de maneira diferente do que você espera ou quer.
Conteúdo fixado
Muitos elementos têm interações, rolagem e posicionamento integrados com slots ou estruturas. Alguns elementos podem ser modificados para ficar fixos em vez de reagir à rolagem. Por exemplo, botões de ação flutuante (FABs, na sigla em inglês) que contêm ações importantes.
Alinhamento
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
Layout do componente
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. Funções combináveis, como Scaffold, oferecem slots para vários componentes e outros elementos da tela. Leia mais sobre componentes e layouts do Material Design.