Agrega un interruptor que los usuarios puedan activar o desactivar

El componente Switch permite a los usuarios alternar entre dos estados: marcado y desmarcado. Usa un interruptor para permitir que el usuario realice una de las siguientes acciones:

  • Activa o desactiva un parámetro de configuración.
  • Habilita o inhabilita una función.
  • Selecciona una opción.

El componente tiene dos partes: el pulgar y la pista. El pulgar es la parte del interruptor que se puede arrastrar, y la pista es el fondo. El usuario puede arrastrar el pulgar hacia la izquierda o la derecha para cambiar el estado del interruptor. También pueden presionar el interruptor para verificarlo y borrarlo.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Cómo implementar un interruptor

El siguiente ejemplo es una implementación mínima del elemento componible Switch:

Resultados

Un interruptor básico que no está marcado.
Figura 1: Un interruptor sin marcar.
Un interruptor básico que está marcado.
Figura 2: Un interruptor marcado.

Crea una miniatura personalizada

Puedes pasar cualquier elemento componible para el parámetro thumbContent para crear una miniatura personalizada. El siguiente es un ejemplo de un interruptor que usa un ícono personalizado para su miniatura:

Resultados

El aspecto sin marcar es el mismo que el ejemplo de la sección anterior. Sin embargo, cuando se verifica, esta implementación aparece de la siguiente manera:

Es un interruptor que usa el parámetro thumbContent para mostrar un ícono personalizado cuando se marca.
Figura 3: Un interruptor con un ícono de verificación personalizado.

Usa colores personalizados

Usa el parámetro colors para cambiar el color del botón y la barra de un interruptor, teniendo en cuenta si el interruptor está marcado.

Resultados

Un interruptor que usa el parámetro de colores para mostrar un interruptor con colores personalizados para el botón y el punto.
Figura 4: Un interruptor con colores personalizados.

Puntos clave

  • Parámetros básicos:

    • checked: Es el estado inicial del interruptor.
    • onCheckedChange: Es una devolución de llamada a la que se llama cuando cambia el estado del interruptor.
    • enabled: Indica si el interruptor está habilitado o inhabilitado.
    • colors: Son los colores que se usan para el interruptor.
  • Parámetros avanzados

    • thumbContent: Úsalo para personalizar el aspecto del elemento de vista previa cuando se marque.
    • colors: Úsalo para personalizar el color de la pista y la miniatura.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.