> For the complete documentation index, see [llms.txt](https://ricardev.gitbook.io/apuntes-android/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ricardev.gitbook.io/apuntes-android/escribiendo-tu-primera-app/paradigmas-de-diseno/views/pallete-buttons/switch.md).

# Switch

{% embed url="<https://developer.android.com/reference/android/widget/Switch>" %}
Fuente: developer.android
{% endembed %}

{% embed url="<https://developer.android.com/reference/androidx/appcompat/widget/SwitchCompat>" %}
Fuente: developer.android
{% endembed %}

## DEFINICIÓN

Hereda de:

<figure><img src="/files/EAmHnH7jleUH27tLgO1y" alt=""><figcaption><p>herencia Switch</p></figcaption></figure>

Un `Switch` es un botón deslizante que permite elegir entre dos opciones. El usuario puede deslizar hacia un lado o hacia el otro para seleccionar o simplemente tocar el botoón como si fuera un CheckBox.

## USO DESDE XML

```xml
<Switch
    android:id="@+id/swEjemplo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="¿Recibir Newsletter mensual?"
    android:showText="true"
    android:textOff="No"
    android:textOn="Si"/>
```

![](/files/BmOSsyycqPsKAEA6ANJ5)                               ![](/files/afBiGzdsBI9jhBLFpkdx)

## ATRIBUTOS

### android:showText

Indica con un Booleano si se muestra el texto de los atributos `android:textOn` y `android:TextOff` sobre el `thumb`.

### android:splitTrack

Indica con un Booleano si se separa el `Thumb` del `Track` (**true**) o si se mantienen como si el `Track` estuviera debajo del `Thumb` (**false**).

### android:switchMinWidth

Define la anchura mínima del botón.

### android:switchPadding

Define la distancia mínima entre el Texto de `android:text` y el botón.

### android:switchTextAppearance

Define la Apariencia del texto que se muestra sobre el `Thumb`, es decir el que se define en `android:textOn` y en `android:textOff`.

### android:textOff

Define el texto que se muestra en el `Thumb` cuando el botón está en estado desmarcado.

### android:textOn

Define el texto que se muestra en el `Thumb` cuando el botón está en estado desmarcado.

### android:textStyle

Define el estilo del texto que se muestra con el atributo `android:text`.

### android:thumb

Define el **drawable** que se muestra en el `Thumb`.

### android:thumbTextPadding

Define el espacio entre los lados del `Thumb` y el texto en su interior.

### android:thumbTint

Define el color del `Thumb`.

### android:thumbTintMode

Define el modo de color del `Thumb`.

### android:track

Define el **drawable** que se muestra en el `Track`.

### android:trackTint

Define el color del `Track`.

### android:TrackTintMode

Define el modo de color del `Track`.

### android:typeface

El tipo de texto que se va a utilizar (normal, sans, serif, monospace).&#x20;

## PROGRAMAR EVENTOS DESDE CÓDIGO

La dinámica que siguen los Switch es similar a la de los `ToggleButton` por lo que vamos a utilizar el mismo código:

{% code title="MainActivity.kt" %}

```kotlin
package com.example.android.appdeejemplo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Switch
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tbReady: Switch = findViewById(R.id.swEjemplo)
        tbReady.setOnCheckedChangeListener{_, isChecked ->
            if (isChecked) Toast.makeText(this, "¡Perfecto! Se la enviaremos pronto.", 
            Toast.LENGTH_SHORT).show()
            else Toast.makeText(this, "¡Que lástima! No sabe lo que se pierde.", 
            Toast.LENGTH_SHORT).show()
        }
    }
}
```

{% endcode %}

![](/files/44DfpeHvMmcCQgyAllOQ)                              ![](/files/AYpXoVVtci28UrBNaNWN)

## PERSONALIZACIÓN

{% hint style="success" %}
Si quiero personalizar en profundidad el `Switch`, voy a necesitar crear una View del tipo `SwitchCompat`, igual que pasaba con los Button.

El link se encuentra al inicio de la página.
{% endhint %}

En este caso vamos a personalizarlo igual que los `ToggleButton` pero con imágenes vectoriales.

Para ello vamos a necesitar personalizar por un lado el `Thumb` y por el otro el `Track`.&#x20;

El diseño será el siguiente:

<figure><img src="/files/308imsPk8bxQLHkTnqwi" alt=""><figcaption><p>Diseño del Switch</p></figcaption></figure>

{% hint style="info" %}
Para definir ese borde del `thumb` que hace que parezca que flota, debemos generar un borde en el thumb (stroke) del mismo color que el `track`.
{% endhint %}

### Personalizar Thumb

Vamos a utilizar una lista de estados para el `Thumb`:

{% code title="sw\_thumb.xml" %}

```xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="#fff"></solid>
            <size android:width="50dp"
                android:height="40dp"></size>
            <corners android:radius="40dp"></corners>
            <stroke android:width="2dp" android:color="@color/colorOn"></stroke>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="#fff"></solid>
            <size android:width="50dp"
                android:height="40dp"></size>
            <corners android:radius="40dp"></corners>
            <stroke android:width="2dp" android:color="@color/gray"></stroke>
        </shape>
    </item>
</selector>
```

{% endcode %}

### Personalizar Track

Vamos a utilizar otra lista de estados para el `Track`:

{% code title="sw\_track.xml" %}

```xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorOn"></solid>
            <corners android:radius="200dp"></corners>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/gray"></solid>
            <corners android:radius="200dp"></corners>
        </shape>
    </item>
</selector>
```

{% endcode %}

### Añadirlo al layout

{% code title="activity\_main.xml" %}

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="30dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pulse el botón cuando se sienta preparado:"
        android:paddingBottom="30dp"/>


    <Switch
        android:id="@+id/swEjemplo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="¿Recibir Newsletter mensual?"
        android:showText="true"
        android:textOff="No"
        android:textOn="Si"
        android:thumb="@drawable/sw_thumb"
        android:track="@drawable/sw_track"
        android:switchPadding="10dp"
        android:checked="true"/>

</LinearLayout>
```

{% endcode %}

![](/files/pswd55SnSTXHfd8E5EEL)                               ![](/files/5j3Mnz2eZPV0qGZdCZ8C)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ricardev.gitbook.io/apuntes-android/escribiendo-tu-primera-app/paradigmas-de-diseno/views/pallete-buttons/switch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.