Android Academy · Aula

Texto, imagem e botão

Use os componentes composable básicos integrados.

Texto, imagem e botão é 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.

Funções componíveis integradas

O Compose inclui funções componíveis prontas para elementos comuns da interface. Três que você usará constantemente são Text, Image e Button.

A função componível Text

Text exibe uma cadeia de caracteres. Seu parâmetro mais importante é text.

@Composable
fun Title() {
    Text(text = "My App")
}

Estilizando texto

Text aceita muitos parâmetros de estilo, como fontSize, color e fontWeight.

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp versus dp

Os tamanhos de fonte usam .sp (pixels independentes de escala), para respeitar a configuração de acessibilidade do tamanho da fonte do usuário. Os tamanhos do layout usam .dp (pixels independentes de densidade).

Use sp para texto e dp para todo o resto.

A função componível Image

Image exibe uma imagem. Use painterResource para carregar um recurso gráfico e sempre forneça contentDescription para fins de acessibilidade.

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

contentDescription é lido em voz alta pelos leitores de tela. Para imagens decorativas sem significado, passe null. Para imagens significativas, forneça uma descrição curta.

A função componível Button

Button é um elemento clicável. Seu parâmetro principal é onClick, uma expressão lambda executada quando o elemento é tocado. O rótulo do botão fica na expressão lambda de conteúdo — geralmente um Text.

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

Reagindo a cliques

A expressão lambda onClick é onde você coloca sua lógica — atualize o estado, navegue ou chame uma função.

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

Expressões lambda de conteúdo

Observe que Button recebe uma expressão lambda de conteúdo final. Tudo o que você colocar dentro dela será renderizado como conteúdo do botão, portanto um botão pode conter um ícone e texto, não apenas um rótulo.

Button(onClick = { }) {
    Text(text = "Save")
}

Combinando-as

Interfaces reais combinam essas funções componíveis. Aqui, um título, uma imagem e um botão ficam empilhados dentro de uma Column.

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

Existem muitas outras

Além dessas três, o Compose oferece TextField, Icon, Checkbox, Switch e muitas outras. O mesmo padrão se aplica: passe parâmetros e expressões lambda de conteúdo.

Verificação rápida

Qual parâmetro de Button executa seu código quando o usuário toca nele?

Recapitulação

Você conheceu três elementos composáveis fundamentais:

Text — exibe textos; estilize-o com fontSize, color (use sp).
Image — painterResource + contentDescription.
Button — lambda onClick mais uma lambda de conteúdo.

Perguntas Frequentes

A aula “Texto, imagem e botão” é grátis?

Sim — o texto completo de “Texto, imagem e botão” é 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 “Texto, imagem e botão”?

Use os componentes composable básicos integrados. 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 “Texto, imagem e botão”?

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