Adicionar um botão que os usuários podem ativar ou desativar
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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
Figura 1. Um switch desmarcado.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:
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
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:
Mostrar componentes interativos
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.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-05-08 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-05-08 UTC."],[],[],null,["\u003cbr /\u003e\n\nThe [`Switch`](/reference/kotlin/androidx/compose/material3/package-summary#Switch(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SwitchColors,androidx.compose.foundation.interaction.MutableInteractionSource)) component lets users toggle between two states: checked\nand unchecked. Use a switch to let the user to do one of the\nfollowing:\n\n- Toggle a setting on or off.\n- Enable or disable a feature.\n- Select an option.\n\nThe component has two parts: the thumb and the track. The thumb is the draggable\npart of the switch, and the track is the background. The user can drag the thumb\nto the left or right to change the state of the switch. They can also tap the\nswitch to check and clear it.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a switch\n\nThe following example is a minimal implementation of the `Switch` composable:\n\nResults **Figure 1.** An unchecked switch. **Figure 2.** A checked switch.\n\nCreate a custom thumb\n\nYou can pass any composable for the `thumbContent` parameter to create a custom\nthumb. The following is an example of a switch that uses a custom icon for its\nthumb:\n\nResults\n\nThe unchecked appearance is the same as the example in\nthe preceding section. However, when checked, this implementation appears as\nfollows:\n**Figure 3.** A switch with a custom checked icon.\n\nUse custom colors\n\nUse the `colors` parameter to\nchange the color of a switch's thumb and track, taking into account whether the\nswitch is checked.\n\nResults **Figure 4.** A switch with custom colors.\n\nKey points\n\n- Basic parameters:\n\n - **`checked`**: The initial state of the switch.\n - **`onCheckedChange`**: A callback that is called when the state of the switch changes.\n - **`enabled`**: Whether the switch is enabled or disabled.\n - **`colors`**: The colors used for the switch.\n- Advanced parameters\n\n - **`thumbContent`**: Use this to customize the appearance of the thumb when it is checked.\n - **`colors`**: Use this to customize the color of the track and thumb.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
