Criar um botão

Os botões permitem que o usuário acione uma ação definida. Há cinco tipos de botão:

Tipo

Aparência

Objetivo
Preenchido

Plano de fundo sólido com texto em contraste.

Para ações principais, como "Enviar" e "Salvar". O efeito de sombra enfatiza a importância do botão.
Tonal

A cor de fundo varia para combinar com a superfície.

Para ações principais ou significativas. Os botões preenchidos fornecem peso visual e são adequados para ações como "Adicionar ao carrinho" e "Fazer login".
Elevada

A sombra faz com que ele se destaque.

Para ações principais ou significativas. Aumente a elevação para destacar o botão.
Contornado

Apresenta uma borda sem preenchimento.

Para ações importantes, mas não principais. Os botões com contorno combinam bem com outros para indicar ações secundárias e alternativas, como "Cancelar" ou "Voltar".
Texto

Texto sem plano de fundo ou borda.

Para ações menos importantes, como links de navegação ou ações secundárias, como "Saiba mais" ou "Ver detalhes".

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.

Dependências

Criar um botão preenchido

O componente de botão preenchido usa o elemento combinável básico Button. Ele é preenchido com uma cor sólida por padrão.

Resultados

Um botão preenchido com um plano de fundo roxo que mostra a mensagem "filled".
Figura 1. Um botão preenchido.

Criar um botão tonal preenchido

O componente do botão tonal preenchido usa o elemento combinável FilledTonalButton. Por padrão, ele é preenchido com uma cor tonal.

Resultados

Um botão tonal com um fundo roxo claro que diz "filled".
Figura 2. Um botão tonal.

Criar um botão de contorno

O componente de botão de contorno usa o elemento combinável OutlinedButton. Ele aparece com um contorno por padrão.

Resultados

Um botão transparente com contorno e borda escura que mostra a mensagem "Outlined".
Figura 3. Um botão contornado.

Criar um botão elevado

O componente de botão elevado usa o elemento combinável ElevatedButton. Ele tem uma sombra que representa o efeito de elevação por padrão e aparece como um botão delineado com uma sombra.

Resultados

Um botão elevado com um plano de fundo cinza que mostra a mensagem "Elevado".
Figura 4. Um botão elevado.

Criar um botão de texto

O componente do botão de texto usa o elemento combinável TextButton. Até ser clicado, ele aparece apenas como texto. Ele não tem um preenchimento sólido ou contorno por padrão.

Resultados

Um botão de texto com a mensagem "Text Button"
Figura 5. Um botão de texto.

Pontos principais

  • onClick: a função chamada quando o usuário pressiona o botão.
  • enabled: quando falso, esse parâmetro faz com que o botão apareça indisponível e inativo.
  • colors: uma instância de ButtonColors que determina as cores usadas no botão.
  • contentPadding: o padding dentro do botão.

Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:

Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback