ToggleButton - Examples and Libraries

Understanding the ToggleButton in Android

When it comes to creating apps in Android, you may want to give users the ability to switch between two states, such as turning a setting on or off. This is where the ToggleButton comes in handy. In this article, we'll dive into what the ToggleButton is and how to use it in your Android apps.

What is a ToggleButton?

A ToggleButton is a UI element in Android that allows you to switch between two states, usually on and off. It is similar to a checkbox, but with a more visually appealing design. The ToggleButton has two states: checked and unchecked. When the user clicks on the ToggleButton, it switches between the two states.

Using the ToggleButton in Android

To use the ToggleButton in your Android app, you need to add it to your layout file. Here's an example of how to add a ToggleButton to your layout file:

<ToggleButton
    android:id="@+id/toggle_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="Off"
    android:textOn="On" />

In this example, we have added a ToggleButton with the ID "toggle_button". We have also set the textOff and textOn properties to "Off" and "On" respectively. This will display "Off" when the ToggleButton is unchecked and "On" when it is checked.

Now that we have added the ToggleButton to our layout file, we need to handle its events in our Java code. Here's an example of how to do this:

public class MainActivity extends AppCompatActivity {

    private ToggleButton toggleButton;

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

        toggleButton = findViewById(R.id.toggle_button);
        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    // ToggleButton is checked
                } else {
                    // ToggleButton is not checked
                }
            }
        });
    }
}

In this example, we have added a ToggleButton with the ID "toggle_button" in our layout file. In the onCreate method of our MainActivity, we have used findViewById to get a reference to the ToggleButton. We have then set an OnCheckedChangeListener on the ToggleButton. This listener will be called when the ToggleButton is checked or unchecked. Inside the onCheckedChanged method, we can check the isChecked parameter to see if the ToggleButton is checked or not.

Here are more examples:

Example 1: Kotlin Android ToggleButton Example

This is a simple togglebutton written in kotlin. Let's look at it step by step.

Step 1: Dependenies

No external dependencies are needed.

Step 2: Add to Layout

Go to your main activity layout and add the toggle button onto it:

activity_main.xml

<?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"
    android:id="@+id/main">

    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ToggleButton"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Write Code

Next write your kotlin code. Replace your main activity code with the below code:

MainActivity.kt

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        toggleButton.setOnClickListener {
            if (toggleButton.isChecked) main.setBackgroundColor(Color.DKGRAY)
            else main.setBackgroundColor(Color.WHITE)
        }
    }
}

Reference

Download the code below:

No	Link
1.	Download Code
2.	Browse Code
3.	Follow Code author

Example 2. Simple ToggleButton in Java

Let's look at a simple togglebutton example without a third party library.

Step 1: Dependencies

We don't need any third party library.

Step 2: Layouts

We will have only one layout: our main activity layout.

activity_main.xml

Add the the togglebutton widget in your main activity layout as follows:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://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"
    tools:context=".MainActivity" >

    <ToggleButton
        android:id="@+id/toggleButton"
        style="@style/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/toggle_button" />

</RelativeLayout>

Step 3: Write Code

The third and last step is to write code be it in java or kotlin. We will have only one class which is the main activity.

MainActivity.java

Add the following code in your main activity:

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ToggleButton toggleButton=(ToggleButton)findViewById(R.id.toggleButton);
        toggleButton.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                // TODO Auto-generated method stub
                if(isChecked==true)
                {
                    Toast.makeText(getApplicationContext(), "Toggle is on.", Toast.LENGTH_LONG).show();
                }
                else
                {
                    Toast.makeText(getApplicationContext(), "Toggle is off.", Toast.LENGTH_LONG).show();
                }
            }
        });
    }

}

Step 4: Run

Copy the above code and run it in your android studio.

Example 3: Simple ToggleButton in Kotlin

In this case we see examine an example in kotlin. There is a togglebutton and an imageview in a layout. When the user preses the togglebytton, we show a lit or unlit bulb based on choice.

Step 1: Dependencies

No special dependencies needed. However AndroidX and Kotlin are used.

Step 2: Create Layout

In your xml layout add an imageview and a togglebutton:

activity_main.xml

<?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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="323dp"
        android:layout_marginTop="60dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.496"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/kapalilamba" />

    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="193dp"
        android:text="ToggleButton"
        android:textOff="@string/kapali"
        android:textOn="@string/acik"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Write kotlin Code

Now come to your main activity and write some kotlin code for handling the toggle change:

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        toggleButton.setOnCheckedChangeListener { buttonView, isChecked ->
            if (isChecked)
                imageView.setImageResource(R.drawable.aciklamba)
            else
                imageView.setImageResource(R.drawable.kapalilamba)
        }

    }
}

Step 4: Run

Copy the code and run. Or you can download the code here. This code has been written by @aytimur.

Libraries

Let's also now look at some third party libraries for ToggleButton in android. These add more features as well as being more visually stunning while remaining as easy to use as the SDK widget.

(a). ToggleButtonLayout

Easy creation and management of toggle buttons from the Material Design spec.

Step 1: Install it

Start by installing this widget. In your project-level build file, register jitpack as a maven repository:

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Then specify the dependency in your app level build file:

implementation 'com.github.savvyapps:ToggleButtonLayout:1.3.0'
}

Now sync to fetch it.

Step 2: Create Menu

The menu you are creating will contain the segmented buttons that will compose the togglebuttonlayout:

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

    <item
        android:id="@+id/toggle_left"
        android:icon="@drawable/ic_format_align_left_black_24dp" />

    <item
        android:id="@+id/toggle_center"
        android:icon="@drawable/ic_format_align_center_black_24dp" />

    <item
        android:id="@+id/toggle_right"
        android:icon="@drawable/ic_format_align_right_black_24dp" />
</menu>

Step 3: Add it to Layout

Now add the togglebuttonlayout to your xml layout:

<com.savvyapps.togglebuttonlayout.ToggleButtonLayout
    android:id="@+id/toggle_button_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginBottom="16dp"
    app:menu="@menu/toggles" />

Step 4: Write Code

You can reference the widget in your kotlin code and use it. For example to obtain the selected item:

val selectedToggles = toggleButtonLayout.selectedToggles()
//do what you need to with these selected toggles

And to listen to toggle change events:

toggleButtonLayout.onToggledListener = { toggle, selected ->
    Snackbar.make(root, "Toggle " + toggle.id + " selected state " + selected, Snackbar.LENGTH_LONG)
            .show()
}

Example

Here's a full example showing usage of this library:

package com.savvyapps.togglebuttonlayout.sample

import android.graphics.Color
import android.os.Bundle
import com.google.android.material.snackbar.Snackbar
import androidx.core.content.ContextCompat
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_toggle_button.*

class ToggleButtonLayoutActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_toggle_button)

        toolbar.setTitle(R.string.app_name)

        toggleButtonLayout.onToggledListener = { _, toggle, selected ->
            Snackbar.make(root, "Toggle ${toggle.id} selected state $selected", Snackbar.LENGTH_LONG)
                    .show()
        }

        buttonSetSelectedColor.setOnClickListener {
            val primary = ContextCompat.getColor(this, R.color.colorPrimary)
            val accent = ContextCompat.getColor(this, R.color.colorAccent)
            if (toggleButtonLayoutText.selectedColor == accent) {
                toggleButtonLayoutText.selectedColor = primary
            } else {
                toggleButtonLayoutText.selectedColor = accent
            }
        }

        buttonSetDividerColor.setOnClickListener {
            val gray = Color.GRAY
            val red = Color.RED
            if (toggleButtonLayoutText.dividerColor == gray) {
                toggleButtonLayoutText.dividerColor = red
            } else {
                toggleButtonLayoutText.dividerColor = gray
            }
        }
    }
}

You can find the layuts here.

Reference

No.	Name
1.	Download
2.	Author

Conclusion

The ToggleButton is a useful UI element in Android that allows you to switch between two states. It is easy to use and can be customized to fit your app's design. By following the examples in this article, you should be able to use the ToggleButton in your own Android apps.