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

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

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

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

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

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 deButtonColors
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:
