Checkboxes, Switches, Toggle Buttons, and Radio Buttons

Checkboxes, Switches, Toggle Buttons, and Radio Buttons are common UI elements that allow users to interact with an app. They are essential components that can significantly improve the usability and functionality of our applications. In this topic, we will see the difference between use cases for these UI elements and see how we can add them to our Android apps.

Checkboxes

A Checkbox is a UI element that allows users to make multiple selections from a list of options. It is represented as a square box that can be checked or unchecked. Common use cases include allowing users to select multiple items from a list and enabling or disabling specific features or settings.

To add a checkbox to our Android app, we use the <CheckBox> tag in our XML layout. We can customize its appearance using attributes like android:text and android:checked.

Here's our activity_main.xml with a TextView and two checkboxes. We imagine a scenario where we want to make an app for a restaurant. We want the user to select whether they want fries and/or salad as extras.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Choose your extras:" />
    <CheckBox
        android:id="@+id/checkBoxFries"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fries"
        android:checked="false" />
    <CheckBox
        android:id="@+id/checkBoxSalad"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Salad"
        android:checked="false" />

</LinearLayout>

We use Java/Kotlin code to handle checkbox interactions. For each CheckBox, we need to add event listeners. These event listeners allow us to update the state of our app based on checkbox changes. This is what we'll add to our MainActivity.kt:

        findViewById<CheckBox>(R.id.checkBoxFries)
            .setOnCheckedChangeListener { _, isChecked ->
                if (isChecked) {
                    // Checkbox is checked, implement the desired behavior here
                } else {
                    // Checkbox is unchecked, implement a different behavior here
                }
            }

        findViewById<CheckBox>(R.id.checkBoxSalad)
            .setOnCheckedChangeListener { _, isChecked ->
                if (isChecked) {
                    // Checkbox is checked, implement the desired behavior here
                } else {
                    // Checkbox is unchecked, implement a different behavior here
                }
            }
    

This is what our checkboxes look like:

Switches

A Switch is a UI element that presents a binary choice – it's either on or off. It can be used to allow users to enable or disable a specific feature and toggle between two mutually exclusive settings.

We add something like this to our XML file (e.g. activity_main.xml).

    <Switch
        android:id="@+id/switchElement"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dark mode"
        android:checked="true"/>

And in our Kotlin code (e.g. Main_Activity.kt) we add the event listeners.

findViewById<Switch>(R.id.switchElement).setOnCheckedChangeListener { _, isChecked ->
   Log.d("CHECKBOXES", "Switch: $isChecked")
}

The switch looks like this:

Toggle buttons

Toggle Buttons are similar to switches. However, while switches provide a slider control, toggle buttons are buttons that have different texts for off and on states.

This is what our XML code for the toggle button looks like. We use the <ToggleButton> tag to define a Toggle Button. We set the android:textOff and android:textOn attributes to specify the text for each state.

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

Here's our Kotlin code:

        val toggleButton = findViewById<ToggleButton>(R.id.toggleButton)

        toggleButton.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) {
                // ToggleButton is turned on, implement the desired behavior here
            } else {
                // ToggleButton is turned off, implement a different behavior here
            }
        }

This is what our toggle button looks like:

Radio buttons

Radio Buttons are used when you want users to choose a single option from a list of mutually exclusive choices. Only one option can be selected at a time. As examples, we can use radio buttons to get users to select a payment method (Credit Card/PayPal/Google Pay) or drink sizes (S, M, L).

In our XML code, we need to use the <RadioGroup> and <RadioButton> tags to create Radio Buttons. We can group related Radio Buttons within the <RadioGroup>.

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/radioA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Choice A" />

        <RadioButton
            android:id="@+id/radioB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Choice B" />

        <RadioButton
            android:id="@+id/radioC"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Choice C" />
    </RadioGroup>

Similar to what we did for the other UI elements, we use our Kotlin code to add event listeners.

        findViewById<RadioGroup>(R.id.radioGroup).setOnCheckedChangeListener { _, checkedId ->
            when (checkedId) {
                R.id.radioA -> {
                    // radio button A is selected, implement the desired behavior here
                }
                R.id.radioB -> {
                    // radio button B is selected, implement a different behavior here
                }
                R.id.radioC -> {
                    // radio button C is selected, implement another behavior here
                }
            }
        }

Here's what our radio button looks like:

Conclusion

Checkbox, Switch, Toggle Buttons, and Radio Buttons are interactive components that allow users to interact with your app. These UI elements have similar implementations. We use XML to define the layout. And we use Java/Kotlin code to define event listeners and handle the state changes.