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.
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