Android Academy · Aula

Botões e cliques

Adicione botões interativos.

Botões e cliques é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 2 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 é um botão?

Um Button é um elemento composto que pode ser tocado. Quando o usuário toca nele, o aplicativo executa algum código.

Os botões precisam de uma ação onClick e de conteúdo para exibir, geralmente um rótulo de Texto.

Button(onClick = { }) {
    Text("Tap me")
}

A lambda onClick

O parâmetro onClick recebe uma lambda, que é um código entre chaves { }. Esse código é executado sempre que o botão é pressionado.

Você pode colocar qualquer lógica ali, como registrar informações ou alterar dados.

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

Conteúdo do botão

O conteúdo dentro das chaves finais é um RowScope. Você pode colocar Texto, ícones ou ambos.

A maioria dos botões contém apenas um rótulo de Texto que descreve a ação.

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

Contando cliques com estado

Para reagir aos toques, armazene um valor com remember e mutableStateOf. Quando ele muda, a interface é atualizada.

Aqui, cada toque adiciona um ao contador.

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: $count")
}

Desativando um botão

O parâmetro enabled controla se um botão pode ser tocado. Defina-o como false para deixá-lo acinzentado e bloquear os cliques.

Isso é útil enquanto um formulário está incompleto.

Button(
    onClick = { },
    enabled = false
) {
    Text("Locked")
}

OutlinedButton

OutlinedButton desenha apenas uma borda, sem preenchimento. Ele funciona da mesma forma, mas tem uma aparência mais leve.

Use-o para ações secundárias ao lado de um botão principal mais destacado.

OutlinedButton(onClick = { }) {
    Text("Cancel")
}

TextButton

TextButton exibe apenas um rótulo, sem borda nem preenchimento. É o estilo de botão mais discreto.

Ele é adequado para ações de pouca ênfase, como Ignorar ou Saiba mais.

TextButton(onClick = { }) {
    Text("Skip")
}

Cores dos botões

Você pode alterar a cor de um botão com ButtonDefaults.buttonColors, passando um containerColor para o plano de fundo.

Escolha cores que combinem com sua marca e continuem legíveis.

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Green
    )
) {
    Text("Go")
}

IconButton

IconButton é uma pequena área redonda que pode ser tocada, destinada a um único ícone, como um coração ou um menu.

Ele não tem rótulo, por isso economiza espaço nas barras de ferramentas.

IconButton(onClick = { }) {
    Icon(Icons.Default.Favorite, contentDescription = "Like")
}

Dando forma a um botão

O parâmetro shape altera os cantos. Use RoundedCornerShape com um valor em dp para obter bordas mais arredondadas.

Números maiores produzem botões mais suaves, semelhantes a pílulas.

Button(
    onClick = { },
    shape = RoundedCornerShape(16.dp)
) {
    Text("Rounded")
}

Nomeando funções de clique

Para manter o código organizado, forneça a onClick uma função nomeada em vez de uma lógica embutida. Isso mantém a interface legível.

Passe a referência da função ou chame-a dentro da lambda.

fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
    Text("Save")
}

Verificação rápida

Teste sua compreensão sobre botões.

Recapitulação

Você aprendeu que Button usa onClick para sua ação e um bloco de conteúdo para seu rótulo. O estado com remember permite que os cliques alterem a interface.

Você também conheceu OutlinedButton, TextButton, IconButton e aprendeu a definir enabled, cores e shape.

Em seguida, você controlará o espaçamento com padding.

Perguntas Frequentes

A aula “Botões e cliques” é grátis?

Sim — o texto completo de “Botões e cliques” é 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 “Botões e cliques”?

Adicione botões interativos. 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 2 de 4.

Quanto tempo leva a aula “Botões e cliques”?

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