ToggleButton en Android

ToggleButton se utiliza para permitir a los usuarios realizar dos operaciones en un solo botón. Estos se utilizan para realizar operaciones de encendido y apagado como la de Switch. ToggleButton puede realizar dos operaciones diferentes al hacer clic en él. En este artículo, veremos cómo implementar ToggleButton en Android. 

Nota : este artículo de Android cubre los lenguajes Java y Kotlin

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Cómo crear/iniciar un nuevo proyecto en Android Studio

Paso 2: trabajar con el archivo activity_main.xml

Vaya a aplicación > res > diseño > actividad_principal.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/idRLContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--on below line we are creating
        a text for our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/idTVStatus"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Toggle Button in Android"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a text view-->
    <TextView
        android:id="@+id/idTVStatus"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/idBtnToggle"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Status"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a toggle button-->
    <ToggleButton
        android:id="@+id/idBtnToggle"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:padding="10dp"
        android:textAllCaps="true"
        android:textColor="@color/black"
        android:textOff="Off"
        android:textOn="On" />
  
</RelativeLayout>

Paso 3: trabajar con el archivo MainActivity 

Vaya a aplicación > java > nombre del paquete de su aplicación > archivo MainActivity y agregue el código a continuación. Se agregan comentarios en el código para conocer en detalle. 

Kotlin

package com.gtappdevelopers.kotlingfgproject
  
import android.os.Bundle
import android.widget.TextView
import android.widget.ToggleButton
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
  
    // on below line we are creating a variable.
    lateinit var toggleBtn: ToggleButton
    lateinit var statusTV: TextView
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // on below line we are initializing our variables.
        toggleBtn = findViewById(R.id.idBtnToggle)
        statusTV = findViewById(R.id.idTVStatus)
  
        // on below line we are setting text view
        // by checking toggle button status.
        if (toggleBtn.isChecked) {
            // if button is checked we are setting
            // text as Toggle Button is On
            statusTV.text = "Toggle Button is On"
        } else {
            // if button is unchecked we are setting
            // text as Toggle Button is Off
            statusTV.text = "Toggle Button is Off"
        }
  
        // on below line we are adding click listener 
        // for our toggle button.
        toggleBtn.setOnClickListener {
            // on below line we are checking if 
            // toggle button is checked or not.
            if (toggleBtn.isChecked) {
                // on below line we are setting message for 
                // status text view if toggle button is checked.
                statusTV.text = "Toggle Button is On"
            } else {
                // on below line we are setting message 
                // for status text view if toggle button is un checked.
                statusTV.text = "Toggle Button is Off"
            }
        }
  
    }
}

Java

package com.gtappdevelopers.kotlingfgproject;
  
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.ToggleButton;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    // on below line we are creating a variable.
    private ToggleButton toggleBtn;
    private TextView statusTV;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // on below line we are initializing our variables.
        toggleBtn = findViewById(R.id.idBtnToggle);
        statusTV = findViewById(R.id.idTVStatus);
  
        // on below line we are setting text view by 
        // checking toggle button status.
        if (toggleBtn.isChecked()) {
            // if button is checked we are setting 
              // text as Toggle Button is On
            statusTV.setText("Toggle Button is On");
        } else {
            // if button is unchecked we are setting 
            // text as Toggle Button is Off
            statusTV.setText("Toggle Button is Off");
        }
  
        // on below line we are adding click listener for our toggle button
        toggleBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are checking if 
                // toggle button is checked or not.
                if (toggleBtn.isChecked()) {
                    // on below line we are setting message 
                    // for status text view if toggle button is checked.
                    statusTV.setText("Toggle Button is On");
                } else {
                    // on below line we are setting message for 
                    // status text view if toggle button is un checked.
                    statusTV.setText("Toggle Button is Off");
                }
            }
        });
  
    }
}

 Ahora ejecute su aplicación para ver el resultado. 

Producción:

Publicación traducida automáticamente

Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *