Botón de alternancia deslizante en Android

En este artículo, vamos a construir una aplicación muy simple e interesante «SlidingToggleButton» en Android Studio . Android Studio es realmente una gran plataforma para el diseño de aplicaciones. Podemos usar Java y Kotlin Language para programar en Android Studio, pero tenga en cuenta que usaremos Java para el desarrollo de nuestra aplicación. ToggleButton es principalmente un botón de encendido/apagado con un indicador luminoso que indica el estado actual del botón de alternancia. Los ejemplos más comunes de ToggleButton son activar/desactivar el sonido, Bluetooth, wifi, punto de acceso, etc. El interruptores otro tipo de botón de alternar que entró en vigor desde Android 4.0 y que proporciona un control deslizante. Comenzando con ToggleButton, pasamos a cambiar y ahora, desde Android Support Library v21, tenemos un nuevo estilo llamado SwitchCompat que usaremos en nuestra aplicación. Este widget funciona bien con cualquier SDK de Android 7+. SwitchCompat es una copia completa del widget principal de Switch que trae la funcionalidad de ese widget a versiones anteriores de la plataforma. A continuación se muestra la imagen de ToggleButton que vamos a crear. La forma rectangular se llama “ Pista ” y la forma ovalada se llama “ Pulgar ”.

qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio. Tenga en cuenta que debe seleccionar Java como lenguaje de programación.

Paso 2: crea un archivo para «Rastrear»

Tenemos que crear un archivo dibujable separado para la parte de la pista de la imagen. Para crear este archivo, vaya a res > dibujable . Ahora debe hacer clic con el botón derecho en Drawable , luego hacer clic en New y luego en Drawable Resource File. Se ha mostrado en la imagen que se muestra a continuación.

Después de hacer clic en Archivo de recursos dibujable , podemos crear un nuevo archivo dibujable como este que se muestra a continuación en la imagen. Asigne un nombre a su archivo y luego haga clic en Aceptar, se ha creado nuestro archivo de seguimiento.

Paso 3: trabajar con el archivo track.xml

Vaya a res > drawable > track.xml y agregue el siguiente código a ese archivo . Crearemos la parte de la pista del botón de alternancia e implementaremos sus funciones. He hecho la pista de forma rectangular con algunos trazos y radios en las esquinas para que se vea atractivo. Su color se establece en color verde con el código de color «#34c759» cuando el ToggleButton está encendido y cuando el ToggleButton está apagado, se establece en color blanco con el código de color «#8c8c8c» . 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     
    <!--we are going to create track the track and implement its functionality
    when the toggleButton is turned on. I have made its shape rectangular and color
    is set to green. Height is fitted to 20 dp and corners-radius is made 100 dp for
    rounded shape at every corner of rectangle.
    -->
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="#34c759" />
            <corners android:radius="100dp" />
            <stroke android:width="1dp" android:color="#8c8c8c" />
            <size android:height="20dp" />
        </shape>
    </item>
     
    <!--we are going to create track the track and implement its functionalities
    when the toggleButton is turned off.I have made its shape rectangular and color
    is set to white. Height is fitted to 20 dp and corners-radius is made 100 dp for
    rounded shape at every corner of rectangle.
    -->
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="100dp" />
            <stroke android:width="1dp" android:color="#8c8c8c" />
            <size android:height="20dp" />
        </shape>
    </item>
 
</selector>

Paso 4: Cree un archivo para «Thumb» 

Tenemos que crear un archivo dibujable separado para la parte del pulgar de la imagen. Para crear este archivo, vaya a res > dibujable . Ahora debe hacer clic con el botón derecho en Drawable , luego hacer clic en New y luego en Drawable Resource File . Después de hacer clic en Archivo de recursos dibujable, obtendrá una imagen como esta a continuación:

Solo tiene que agregar un nombre de archivo y luego hacer clic en Aceptar, se ha creado su archivo en miniatura.

Paso 5: trabajar con el archivo thumb.xml

Navega a res > dibujable > tracks.xml y agrega el siguiente código a ese archivo. Crearemos la parte del pulgar del botón de alternar e implementaremos sus características. El pulgar está hecho de forma ovalada rellena de color blanco. Se mueve hacia la derecha con un borde de color verde («#34c759») cuando el botón de alternancia está activado y se mueve hacia la izquierda con un borde de color blanco («#8c8c8c») cuando el botón de alternancia está desactivado. 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     
    <!--first of all we are going to create thumb item where we will
    keep state_checked="true" that means when toggleButton is turned on.
    It is filled with white color having border-color green. Its height and
    width both are made 100 dp.-->
    <item android:state_checked="true">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
            <stroke android:width="1dp" android:color="#34c759" />
            <size android:width="100dp" android:height="100dp" />
        </shape>
    </item>
     
    <!--first of all we are going to create thumb item where we will
    keep state_checked="false" that means when toggleButton is turned off.
    It is filled with white color having border-color white. Its height and
    width both are made 100 dp.-->
    <item android:state_checked="false">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
            <stroke android:width="1dp" android:color="#8c8c8c" />
            <size android:width="100dp" android:height="100dp" />
        </shape>
    </item>
 
</selector>

Paso 6: trabajar con el archivo activity_main.xml

Navegue a res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. Aquí he agregado SwitchCompat en lugar de un interruptor simple. Cuando el ToggleButton está encendido, muestra el texto «on» y muestra «off» cuando el ToggleButton está apagado.

Atributos XML

android:thumb (Dibujable para usar como el «pulgar» que cambia de un lado a otro)

Android: pista (dibujable para usar como la «pista» en la que se desliza el pulgar del interruptor)

android:showText (ya sea para dibujar texto activado/desactivado)

android:textOn (Texto para mostrar cuando el interruptor está en el estado «encendido»)

android:textOff (Texto para mostrar cuando el interruptor está en el estado «apagado»)

A continuación se muestra el código para el archivo activity_main.xml  .

<?xml version="1.0" encoding="utf-8"?>
<!--We are going to use linearlayout for this application-->
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--Instead of simple ToggleButton i will be using SwitchCompat
     because it has backward API compatibility. Here track and thumb are
     called. when ToggleButton is turned on it will display "on" and
     when it is turned off it will display "off".-->
    <androidx.appcompat.widget.SwitchCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:padding="50dp"
        android:textOff="off"
        android:textOn="on"
        android:thumb="@drawable/thumb"
        app:showText="true"
        app:track="@drawable/track" />
 
</LinearLayout>

Paso 7: cambie el título de la aplicación

Vaya primero a la carpeta de valores y luego elija el archivo strings.xml . Usando este archivo podemos cambiar el título de nuestra aplicación. He mantenido el título “GFG | Botón de alternancia deslizante”. 

<resources>
    <string name="app_name">GFG | SlidingToggleButton</string>
</resources>

Paso 8: Cambia el color de la AppBar

Vaya primero a la carpeta de valores y luego elija el archivo colors.xml . En el archivo colors.xml, puede mantener los colores de su elección tantos como quiera usar en su aplicación. Solo tienes que dar el nombre y poner el código de color de los respectivos colores. Hemos mantenido el color de la barra de aplicaciones como «#0F9D58» , al que hemos llamado «verde».

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="green">#0F9D58</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

Producción:

Puede obtener el código fuente en el enlace de GitHub que figura a continuación: https://github.com/Babitababy/SlidingToggleButton