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.
android:disabledAlpha
: La opacidad aplicada al indicador cuando está desactivadoandroid:textOff
: El texto para el botón cuando no está marcadoandroid:textOn
: El texto para el botón cuando está marcado
Para modificar programáticamente el ToggleButton, se utilizan los siguientes métodos.
CharSequence getTextOff()
: Devuelve el texto cuando el botón no está en el estado marcadoCharSequence getTextOn()
: Devuelve el texto cuando el botón está en el estado marcadovoid 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:
- Es el mejor reemplazo para casillas de verificación y botones de radio
- La implementación lleva menos de un minuto
- 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