¿Cómo crear un botón de interruptor personalizado en Android?

En Android, un interruptor es un tipo de botón que permite al usuario alternar entre dos acciones o instancias. En general, un Switch se usa para seleccionar una entre dos opciones que pueden invocar cualquier acción o función. En la siguiente imagen se muestra un interruptor de muestra. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Kotlin . 

En este artículo, le mostraremos cómo puede personalizar un Switch para que se vea mejor en Android. Siga los pasos a continuación una vez que el IDE esté listo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: Cree un archivo custom_switch.xml y escriba el siguiente código

Navega a res > dibujable . Haga clic con el botón derecho en la carpeta dibujable, vaya a nuevo y haga clic en Archivo de recursos dibujable. Ahora establezca el nombre como custom_switch, el elemento raíz como el selector y haga clic en Aceptar. Ahora agregue el siguiente código a su archivo. El siguiente código representa dos estados en Switch, cuando es verdadero y cuando es falso. Cuando es verdadero, el color es verde, y cuando es falso, el color es rojo.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <corners android:radius="15dp" />
            <gradient android:angle="270" android:endColor="#6600FF00" android:startColor="#66AAFF00" />
            <size android:width="37dp" android:height="37dp" />
            <stroke android:width="4dp" android:color="#0000ffff" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <corners android:radius="15dp" />
            <gradient android:angle="270" android:endColor="#ff0000" android:startColor="#ff0000" />
            <size android:width="37dp" android:height="37dp" />
            <stroke android:width="4dp" android:color="#0000ffff" />
        </shape>
    </item>
</selector>

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Agregue un interruptor como se muestra a continuación. Establezca el atributo del pulgar como el interruptor personalizado creado en el código anterior.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <Switch
        android:id="@+id/switch_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="ON"
        android:layout_centerInParent="true"
        android:textOff="OFF"
        android:thumb="@drawable/custom_switch"
        tools:ignore="UseSwitchCompatOrMaterialXml" />
  
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package org.geeksforgeeks.switchwidget
  
import android.annotation.SuppressLint
import android.os.Bundle
import android.widget.Switch
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
    @SuppressLint("UseSwitchCompatOrMaterialCode")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        val mSwitch = findViewById<Switch>(R.id.switch_1)
  
        // Display Toasts in each of true and false case
        mSwitch.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) {
                Toast.makeText(applicationContext, "Switch On", Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(applicationContext, "Switch Off", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

Producción:

Puede ver que cuando el interruptor es falso, el color del pulgar es rojo. Cuando se hace clic en el interruptor, el interruptor se vuelve verdadero y el color del pulgar cambia a verde.