Android Academy · Aula

Construindo um cartão de perfil

Combine composables em uma tela.

Construindo um cartão de perfil é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 4 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.

Nosso objetivo

É hora de combinar o que você aprendeu. Vamos criar um cartão de perfil simples: um nome e um cargo empilhados organizadamente em uma caixa estilizada.

Ao longo do caminho, você conhecerá o Modifier, que controla o tamanho, o espaçamento e a aparência dos elementos compostos.

Conheça o Modifier

Um Modifier altera a aparência e o comportamento de um elemento composto. Você o fornece por meio do parâmetro modifier, aceito pela maioria dos elementos compostos.

Os modificadores controlam o preenchimento interno, o tamanho, a cor de fundo, as bordas e muito mais. Eles são a principal forma de decorar sua interface no Compose.

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

Encadeando modificadores

Você cria um modificador encadeando chamadas com pontos. Cada chamada retorna um novo modificador, então você pode combinar vários.

A ordem é importante: o preenchimento interno antes do plano de fundo produz um resultado diferente do preenchimento depois dele. Leia a cadeia da esquerda para a direita, como uma receita.

Modifier
    .padding(16.dp)
    .fillMaxWidth()

Preenchendo a largura

O modificador fillMaxWidth faz um elemento composto se estender por todo o espaço horizontal disponível. Ele é perfeito para cartões que devem ocupar a largura da tela.

Também existe fillMaxSize, para as duas direções, e size, para definir uma largura e uma altura fixas.

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

Adicionando preenchimento interno

O preenchimento interno adiciona espaço dentro de um elemento composto, entre sua borda e o conteúdo. Use Modifier.padding com um valor em dp.

O preenchimento interno impede que o texto encoste nas bordas de um cartão, deixando o layout mais confortável e limpo.

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

Adicionando um plano de fundo ao cartão

Uma cor de fundo ajuda o cartão a se destacar. Aplique-a com o modificador background e um valor de cor.

Combine-a com preenchimento interno para que a área colorida tenha espaço ao redor do texto.

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

Empilhando o nome e o cargo

Dentro da Column do cartão, empilhamos dois trechos de texto: um nome em negrito na parte superior e um cargo mais leve abaixo.

Definir valores diferentes para fontSize e fontWeight cria uma hierarquia visual clara entre eles.

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

Tornando-o reutilizável

Vamos transformar o cartão em um elemento composto reutilizável que recebe name e title como parâmetros. Agora ele pode exibir qualquer pessoa.

Essa é a mesma ideia da primeira lição: forneça os dados e reutilize a interface em qualquer lugar.

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

O cartão de perfil completo

Aqui está o cartão com todas as partes reunidas: uma coluna de largura total, um plano de fundo cinza, preenchimento interno e duas linhas de texto estilizadas.

Observe como a cadeia de modificadores e os elementos filhos da coluna combinam tudo das lições anteriores em um único elemento composto organizado.

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

Visualizando o cartão

Adicione um invólucro @Preview para ver o cartão no Android Studio. Ele chama ProfileCard com dados de exemplo e exibe um plano de fundo.

Agora você pode ajustar o preenchimento interno ou as cores e observar o resultado ser atualizado instantaneamente.

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Exibindo-o na tela

Para exibir o cartão no aplicativo em execução, chame-o dentro de setContent na sua atividade. Isso conecta o elemento composto à tela ativa.

Agora você passou de um único elemento composto a um componente de interface completo e reutilizável.

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Verificação rápida

Vamos revisar como os elementos compostos recebem preenchimento interno, tamanho e plano de fundo.

Recapitulação

Você criou um cartão de perfil completo combinando Text, Column e Modifier. Os modificadores permitem encadear padding, fillMaxWidth e background para dar forma e estilo à sua interface.

Você tornou o cartão reutilizável com os parâmetros name e title, visualizou-o com @Preview e o exibiu por meio de setContent. Isso é uma tela composta completa, do início ao fim. Parabéns!

Perguntas Frequentes

A aula “Construindo um cartão de perfil” é grátis?

Sim — o texto completo de “Construindo um cartão de perfil” é 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 “Construindo um cartão de perfil”?

Combine composables em uma tela. 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 4 de 4.

Quanto tempo leva a aula “Construindo um cartão de perfil”?

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