Android ToggleButton Tutorial

View more Tutorials:

1- Android ToggleButton

In AndroidToggleButton is a user interface control with the two  ON/OFF states. The ToggleButton is a subclass of Button, so it can also display Icons and text.
ToggleButton is quite similar to CheckBox and  Switch in terms of features and usage. All three classes are subclasses of CompoundButton,  and the  difference lies in their interface.

Text, Text On, Text Off

By default the ToggleButton will display the text,  "OFF", when it is OFF, and display the text,  "ON", when it is ON. The android:text attribute will not work. Instead, you can use 2 other attributes,  android:textOff and android:textOn to set the text for  ToggleButton in different states.
<!-- Default ON/OFF Text -->
<ToggleButton
    android:id="@+id/toggleButton"
    android:drawableLeft="@drawable/icon_alarm"
    android:text="ToggleButton"
    ... />

<!-- Custom ON/OFF Text -->
<ToggleButton
    android:id="@+id/toggleButton2"
    android:drawableLeft="@drawable/icon_alarm"
    android:text="ToggleButton"
    android:textOff="DISABLED"
    android:textOn="ENABLED"
    ... />

Image (Icon)

As mentioned above, ToggleButton is a subclass of  Button, so it allows you to display four icons maximum near the four edges by using the attributes of android:drawableLeft, android:drawableTop, android:drawableRight, android:drawableBottom, android:drawableStart, android:drawableEnd.
<ToggleButton
    android:id="@+id/toggleButton"
    android:drawableLeft="@drawable/icon_boat"
    android:drawableTop="@drawable/icon_car"
    android:drawableRight="@drawable/icon_bus"
    android:drawableBottom="@drawable/icon_bus"
    ... />

toggle()

All four classes of ToggleButton, CheckBox, RadioButton and Switch are subclasses of CompoundButton, so they inherit the  toggle() method. This is the commonly used method to switch between two states, from ON (Checked) to OFF (Unchecked) and vice versa.
CompoundButton button = (ToggleButton) findViewById(R.id.toggleButton);

button.toggle();

2- ToggleButton Styles

The style attribute is an option of  ToggleButton, which allows you to set the style for the ToggleButton. There are several styles available in Android library that may be ready to use.
ToggleButton Styles Example
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView24"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.AppCompat.DrawerArrowToggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ToggleButton
        android:id="@+id/toggleButton23"
        style="@style/Widget.AppCompat.DrawerArrowToggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:drawableLeft="@drawable/icon_alarm"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView24" />

    <TextView
        android:id="@+id/textView25"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.Button.Toggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleButton23" />

    <ToggleButton
        android:id="@+id/toggleButton24"
        style="@android:style/Widget.Button.Toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:drawableLeft="@drawable/icon_alarm"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView25" />

    <TextView
        android:id="@+id/textView26"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.Holo.Button.Toggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleButton24" />

    <ToggleButton
        android:id="@+id/toggleButton25"
        style="@android:style/Widget.Holo.Button.Toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:drawableLeft="@drawable/icon_alarm"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView26" />

    <TextView
        android:id="@+id/textView27"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.Holo.Light.Button.Toggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleButton25" />

    <ToggleButton
        android:id="@+id/toggleButton26"
        style="@android:style/Widget.Holo.Light.Button.Toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:drawableLeft="@drawable/icon_alarm"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView27" />

</androidx.constraintlayout.widget.ConstraintLayout>

3- ToggleButton Events

There are quite a few events related to a ToggleButton; however, the following two events are most frequently used:
  • setOnClickListener(View.OnClickListener)
  • setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener)

On Click Event:

The event happens when the user clicks the ToggleButton. It is the same as the action of the user clicking a Button.
ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggleButton);

toggleButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        boolean checked = ((ToggleButton) v).isChecked();
        if (checked){
            // Your code  
        }
        else{
            // Your code
        }
    }
});

On Checked Change Event:

The event happens when the ToggleButton changes its state due to the user's action or the effect of calling the  toggleButton.setChecked(newState) method, etc.
ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggleButton);

toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked)  {
           // Your code
        } else {
           // Your code
        }
    }
});

View more Tutorials: