techStackGuru

Togglebutton


In the field of computers, the word Toggle literally means to change a state from one to another by pressing the same key. Following that definition, a Toggle Button is nothing but a simple button in Android that changes states. Basically, a Toggle Button is just an on and off button that has a light indicator, which shows the current state of the Toggle Button.

Like many other Android buttons, a Toggle Button also has two states: on (checked) and off (unchecked). The terms on and off are set as a default, but it can be changed to checked and unchecked.

MainActivity.java


package com.techstackguru.toggle;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    ToggleButton toggleButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toggleButton = (ToggleButton)findViewById(R.id.toggle);

        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"Button is "+toggleButton.getText().toString(),Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Using the above-mentioned code, we have created a basic template of our project, placing the desired UI elements. So, of course, we have placed a Toggle Button in our project by using this code. Apart from that, we have also added a Toast message in our project that will appear after the user has interacted with Toggle Button. This Toast message is programmed to read, “Button is” followed by the current state name of the Toggle Button. After coding in your java class file, open the second file of your project, i.e. activity_main.xml, in order to add the following code in it:

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ToggleButton
        android:id="@+id/toggle"
        android:layout_margin="150dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:textOff="OFF"
        android:textOn="ON" />

</LinearLayout>

With the help of this code, we have designed all our UI elements. First off, we have set the default of our Toggle Button as the “checked” state. Then, we have named the checked state “ON” and the unchecked state “OFF.” These names will appear after “Button is” in the Toast message. After entering all the codes in their respective files, your project will be good to go. Therefore, you will have to launch your project after that. Launching your project will show you the following output:

Output
toggle-button-1

previous-button
next-button