Android Academy · Aula

Espaçamento com Padding

Use Modifier para definir o espaçamento.

Espaçamento com Padding é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

O que é padding?

Padding é o espaço vazio adicionado ao redor do conteúdo de um componente. Ele afasta o conteúdo das bordas para que nada pareça apertado.

No Compose, você adiciona padding por meio de um Modifier.

Text(
    text = "Hello",
    modifier = Modifier.padding(16.dp)
)

A unidade dp

Os tamanhos de padding usam dp, abreviação de pixels independentes de densidade. O dp mantém o mesmo tamanho físico em todas as telas.

Escreva um número seguido de .dp, como 8.dp ou 24.dp.

Modifier.padding(8.dp)

O que é um modificador?

Um Modifier descreve a aparência e o comportamento de um componente: seu tamanho, padding, plano de fundo e muito mais.

Você cria modificadores encadeando funções com pontos.

Modifier
    .padding(16.dp)
    .background(Color.Yellow)

Padding em todos os lados

Chamar padding(16.dp) com um único valor adiciona o mesmo espaço aos quatro lados: superior, inferior, inicial e final.

Esta é a maneira mais rápida de dar espaço para o conteúdo respirar.

Box(
    modifier = Modifier.padding(16.dp)
) {
    Text("Inside")
}

Padding horizontal e vertical

Você pode definir os lados separadamente com os parâmetros horizontal e vertical.

Horizontal abrange o início e o fim; vertical abrange a parte superior e a inferior.

Modifier.padding(
    horizontal = 24.dp,
    vertical = 8.dp
)

Padding em um lado

Para definir uma única borda, nomeie-a: start, top, end ou bottom.

Isso permite ajustar o espaçamento exatamente onde você precisa.

Modifier.padding(
    start = 16.dp,
    top = 4.dp
)

A ordem importa

A ordem dos modificadores altera o resultado. Colocar o padding antes de um plano de fundo deixa a área do padding sem pintura; depois dele, o plano de fundo preenche o padding.

Leia os modificadores de cima para baixo, como camadas.

Modifier
    .background(Color.Cyan)
    .padding(16.dp)

Espaçamento entre itens

Dentro de uma Column ou Row, use Arrangement.spacedBy para adicionar automaticamente espaços iguais entre os elementos filhos.

Isso é mais organizado do que adicionar padding manualmente a cada elemento filho.

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    Text("One")
    Text("Two")
}

Spacer para criar espaços

Um Spacer é um componente vazio usado para afastar os itens. Dê a ele um tamanho com um Modifier.

Ele é útil para criar um espaço fixo entre dois elementos.

Column {
    Text("Top")
    Spacer(Modifier.height(16.dp))
    Text("Bottom")
}

Padding versus margem

O Compose não tem uma margem separada. Você cria espaço externo colocando o padding mais cedo na cadeia de modificadores, antes do tamanho ou do plano de fundo.

Assim, uma única ferramenta, o padding, controla tanto o espaçamento interno quanto o externo, dependendo da ordem.

Modifier
    .padding(16.dp)
    .background(Color.LightGray)
    .padding(8.dp)

Espaçamento consistente

Bons aplicativos usam alguns valores repetidos, como 4, 8, 16 e 24 dp. Isso mantém os layouts organizados e previsíveis.

Evite números aleatórios; escolha valores de uma escala pequena.

Modifier.padding(16.dp)

Verificação rápida

Teste seus conhecimentos sobre padding.

Recapitulação

O padding adiciona espaço ao redor do conteúdo usando Modifier.padding com valores em dp. Você pode aplicar padding a todos os lados, horizontalmente ou verticalmente, ou a uma única borda.

A ordem dos modificadores importa, e Arrangement.spacedBy ou Spacer controlam os espaços entre os itens.

Em seguida, você explorará cores e MaterialTheme.

Perguntas Frequentes

A aula “Espaçamento com Padding” é grátis?

Sim — o texto completo de “Espaçamento com Padding” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Espaçamento com Padding”?

Use Modifier para definir o espaçamento. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Espaçamento com Padding”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Android Academy