Adicionar um botão que os usuários podem ativar ou desativar

O componente Switch permite que os usuários alternem entre dois estados: marcado e desmarcado. Use uma chave para permitir que o usuário faça uma das seguintes ações:

  • Ative ou desative uma configuração.
  • Ativar ou desativar um recurso.
  • Selecione uma opção.

O componente tem duas partes: o controle deslizante e a faixa. O botão é a parte arrastável do controle, e a faixa é o plano de fundo. O usuário pode arrastar o controle para a esquerda ou direita para mudar o estado da chave. Eles também podem tocar no botão para marcar e desmarcar.

Compatibilidade de versões

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

Dependências

Implementar uma chave

O exemplo a seguir é uma implementação mínima do elemento combinável Switch:

Resultados

Um interruptor básico desmarcado.
Figura 1. Um botão desmarcado.
Um Switch básico marcado.
Figura 2. Um interruptor marcado.

Criar uma miniatura personalizada

É possível transmitir qualquer elemento combinável para o parâmetro thumbContent e criar uma miniatura personalizada. Confira a seguir um exemplo de chave que usa um ícone personalizado para o polegar:

Resultados

A aparência desmarcada é a mesma do exemplo na seção anterior. No entanto, quando marcada, essa implementação aparece da seguinte forma:

Um botão de alternância que usa o parâmetro thumbContent para mostrar um ícone personalizado quando marcado.
Figura 3. Um botão de alternância com um ícone marcado personalizado.

Usar cores personalizadas

Use o parâmetro colors para mudar a cor do botão e da faixa de um interruptor, considerando se o interruptor está marcado.

Resultados

Um botão de alternância que usa o parâmetro "colors" para mostrar um botão com cores personalizadas para o botão e o pino.
Figura 4. Um botão com cores personalizadas.

Pontos principais

  • Parâmetros básicos:

    • checked: o estado inicial da chave.
    • onCheckedChange: um callback chamado quando o estado do interruptor muda.
    • enabled: se a chave está ativada ou desativada.
    • colors: as cores usadas para a troca.

  • Parâmetros avançados

    • thumbContent: use isso para personalizar a aparência do controle deslizante quando ele estiver marcado.
    • colors: use para personalizar a cor da faixa e do controle deslizante.

Coleções que contêm este guia

Este guia faz parte das coleções de guias rápidos selecionados que abrangem objetivos mais amplos de desenvolvimento para Android:

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

Tem dúvidas ou quer dar feedback?

Acesse nossa página de perguntas frequentes e confira guias rápidos ou entre em contato para compartilhar sua opinião.
Acessar as perguntas frequentes Enviar feedback