Toggle Button in Android Example

In Android development, even the smallest UI (User Interface) elements are as important as the big ones. Sometimes, you can ruin the user experience of your app just because of a mere button. This article is focused on one such UI element, i.e. Toggle. Many app developers usually evaluate the context and ensure the consistency of Toggle implementation whenever they are reviewing the app. This is important because a Toggle Button in Android has a great impact on user experience.

Although the Toggle Button is an extremely uncomplicated UI element, it shares similarities with a few other Android tools, which makes dealing with it a bit challenging for app developers. For that reason, we have prepared this article to explain the Toggle Button clearly and show how to implement it in your Android app.

Toggle Button in Android

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.

Toggle Button Applications

We know this sounds very familiar to you. This is because Android app developers have made use of this simple button in tons of important places that we visit almost every day. Android app developers apply a Toggle Button in order to enable users to change preferences, settings and many other types of information.

Another important part of applying a Toggle Button for app developers is that a Toggle Button should provide direct labels, use a standard visual design and deliver immediate results. Also, it is of utmost importance for app developers to remember that a Toggle Button should be used to allow a user to select one out of two opposing options or states.

Toggle Button Examples

As the Toggle Button is used for a very basic purpose, Android app developers have to use it again and again. So this widely used UI element is difficult to miss. In fact, you can even find a Toggle Button without opening any Android application.

For this, you can simply go to the settings of your Android device and find the on/off button of sound, Bluetooth, WiFi, hotspot and many more.

Comparison of Toggle Button and Switch

Switch is very much like the Toggle Button as it also has two states (on and off). Additionally, just like the Toggle Button, it also shows whether the state is on or off. From these, an app developer chooses one to set as the initial state, and the user can change it. The similarities lead the two buttons, Switch and Toggle Button, to become the subclasses of CompoundButton.

The Toggle Button has been here since the very beginning of Android OS (Operating System), i.e. API 1 (also known as Android 1.0). However, Android introduced a new button called Switch with its API 14 or Android 4.0. The Toggle Button is added to the application layout by using the ToggleButton object. On the other hand, the Switch is added to the application layout by using the Switch object. However, the primary difference between the two buttons is their look; the Toggle Button looks like a typical button, whereas the Switch provides the user a slider control.

An Android app developer can choose to use either UI element for the same function, but many users believe that a Switch gives a clearer indication of the current state of the button.

Toggle Button vs Check Box

Apart from their looks, there are not many major differences between a Check Box and a Toggle Button. For this reason, many app developers use Toggle Buttons in place of Check Boxes. That’s a mistake.

While doing this, app developers forget that Toggle Buttons give immediate results, and users expect that from them. An immediate effect should not require a Submit button, which is commonly used by Check Boxes. This is why using a Toggle Button instead a Check Box creates confusions in users, which is not affordable for app developers at all as it affects the overall user experience.

A Toggle Button or Switch must only be used for operations that need to take effect instantaneously, such as settings in a device. In contrast, if a button needs to be pressed before an operation can take effect (such as in long forms), Check Boxes are used.

Toggle Button in Android Steps

To create a Toggle Button in your Android application, you must use the Android Studio IDE (Integrated Development Environment). So, first of all, open Android Studio and create a project. While doing so, you will need to enter your project name and package name, like we did. We named our project “Toggle.” As for our package name, we used “com.androidaura.toggle” as the name.

When you are done with creating a project, open your MainActivity.java class file in order to enter the following code:

// MainActivity.java

package com.androidaura.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 in Android