Ejemplo de Botón de Alternar y Interruptor de Android

Hoy aprenderemos sobre el botón de alternancia (ToggleButton) y el interruptor (Switch) en la aplicación Android. Discutiremos e implementaremos el widget de botón de alternancia y el widget ToggleButton en nuestra aplicación.

Botón de Alternancia Android

El botón de alternancia en Android se utiliza para mostrar el estado de encendido y apagado en un botón. Switch es otro tipo de botón de alternancia que se utiliza predominantemente desde Android 4.0. El interruptor de Android proporciona un control deslizante. Ambos, ToggleButton y Switch, son subclases de la clase CompoundButton. Los atributos XML utilizados para definir un ToggleButton se describen a continuación.

  1. android:disabledAlpha: La opacidad aplicada al indicador cuando está desactivado
  2. android:textOff: El texto para el botón cuando no está marcado
  3. android:textOn: El texto para el botón cuando está marcado

Para modificar programáticamente el ToggleButton, se utilizan los siguientes métodos.

  1. CharSequence getTextOff(): Devuelve el texto cuando el botón no está en el estado marcado
  2. CharSequence getTextOn(): Devuelve el texto cuando el botón está en el estado marcado
  3. void setChecked(boolean checked): Cambia el estado marcado de este botón

Interruptor de Android

El widget Interruptor de Android o SwitchCompat (parte de la biblioteca AppCompat que proporciona compatibilidad hacia atrás para versiones anteriores de Android hasta la API de Android v7) es un control deslizante personalizado de encendido y apagado que comúnmente se encuentra en la configuración del teléfono. Ventajas del widget Interruptor de Android:

  1. Es el mejor reemplazo para casillas de verificación y botones de radio
  2. La implementación lleva menos de un minuto
  3. No es necesario usar muchos drawables y otros recursos

El diseño xml de un SwitchCompat se muestra a continuación:

<android.support.v7.widget.SwitchCompat
        android:id="@+id/switchButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Switch example"
        />

android:text se utiliza para mostrar un texto junto al botón de interruptor deslizante.

Ejemplo de botón de alternancia y interruptor de Android

En esta aplicación mostraremos dos botones de alternancia y un botón de interruptor. El estado de los botones de alternancia se mostrará en un SnackBar cuando se presione el FloatingActionButton. El estado del botón de interruptor se cambia a verdadero cada vez que se hace clic en el botón de acción del snackbar. O el estado se muestra en el snackbar deslizando el interruptor.

Android Toggle Button y Switch Estructura del Proyecto

Código del Botón de Alternancia de Android

El activity_main.xml permanece igual. El content_main.xml contiene dos botones de alternancia y un interruptor marcado como falso por defecto, como se muestra en el fragmento de código a continuación:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.journaldev.switchandtoggle.MainActivity"
    tools:showIn="@layout/activity_main">

    <ToggleButton
        android:id="@+id/tb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="ToggleButton 1"
        android:textOff="Off"
        android:textOn="On" />

    <ToggleButton
        android:id="@+id/tb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/tb1"
        android:layout_alignBottom="@+id/tb1"
        android:layout_toRightOf="@+id/tb1"
        android:text="ToggleButton 2"
        android:textOff="Off"
        android:textOn="On" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switchButton"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:checked="false"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Switch example"
        />


</RelativeLayout>

El MainActivity.java se muestra a continuación:

package com.journaldev.switchandtoggle;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SwitchCompat;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    ToggleButton tb1, tb2;
    SwitchCompat switchCompat;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                StringBuilder result = new StringBuilder();
                result.append("ToggleButton1 : ").append(tb1.getText());
                result.append("\nToggleButton2 : ").append(tb2.getText());

               Snackbar snackbar= Snackbar.make(view, result.toString(), Snackbar.LENGTH_LONG)
                        .setAction("SWITCH ENABLE", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                switchCompat.setChecked(true);
                            }
                        });

                snackbar.setActionTextColor(Color.RED);
                snackbar.show();
            }
        });

        tb1= (ToggleButton)findViewById(R.id.tb1);
        tb2=(ToggleButton)findViewById(R.id.tb2);
        switchCompat=(SwitchCompat)findViewById(R.id.switchButton);

        switchCompat.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

                Snackbar.make(buttonView, "Switch state checked "+isChecked, Snackbar.LENGTH_LONG)
                        .setAction("ACTION",null).show();
            }
        });



    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflar el menú; esto agrega elementos a la barra de acciones si está presente.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Manejar clics en elementos de la barra de acciones aquí. La barra de acciones
        // manejará automáticamente clics en el botón de inicio/arriba, siempre y cuando
        // especifiques una actividad principal en AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

A String builder is used to get the current state of the toggle buttons and append them to display in the snackbar. Switch button being a subclass of Compound Button, an OnCheckChangeListener is implemented as shown in the code above. The output below is the app in action. This brings an end to android toggle button and switch in android tutorial. You can download the final Android SwitchAndToggle Project from the link below.

Descargar Proyecto de Interruptor y Botón de Alternancia de Android

Referencia: Documentación de ToggleButton Android

Source:
https://www.digitalocean.com/community/tutorials/android-toggle-button-switch-example