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 ícone e a faixa. O botão é a parte arrastável do botão e a faixa é o plano de fundo. O usuário pode arrastar o botão para a esquerda ou direita para mudar o estado da chave. Eles também podem tocar no interruptor para verificar e limpar.

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

Implementar uma chave

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

Resultados

Um interruptor básico que não está marcado.
Figura 1. Um switch desmarcado.
Uma chave básica marcada.
Figura 2. Um switch marcado.

Criar um polegar personalizado

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

Resultados

A aparência desmarcada é igual ao exemplo na seção anterior. No entanto, quando marcada, essa implementação aparece da seguinte maneira:

Um switch que usa o parâmetro thumbContent para mostrar um ícone personalizado quando marcado.
Figura 3. Um interruptor com um ícone de verificação 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 que usa o parâmetro colors para mostrar um botão com cores personalizadas para o polegar e a tachinha.
Figura 4. Um interruptor com cores personalizadas.

Pontos principais

  • Parâmetros básicos:

    • checked: o estado inicial do switch.
    • onCheckedChange: um callback que é chamado quando o estado do interruptor muda.
    • enabled: indica se a chave está ativada ou desativada.
    • colors: as cores usadas para a troca.
  • Parâmetros avançados

    • thumbContent: use para personalizar a aparência do polegar quando ele estiver marcado.
    • colors: use para personalizar a cor da faixa e do ícone.

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.

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.