ToggleButton

 

ToggleButton

Imagine a switch or light button that can be ON or OFF.
In Android, this clickable two-state button is called a ToggleButton.

Example:

OFF  → Tap → ON
ON   → Tap → OFF

Think of it as a light switch on your phone.

---

1. Definition

ToggleButton is an Android UI component that allows users to switch between two states: ON or OFF.

Simple meaning:

ToggleButton = A button that flips between two states.

---

2. Purpose

ToggleButton is used to:

• Enable or disable features

• Switch between two options

• Represent binary choices (YES/NO, ON/OFF)

Examples in apps:

App Feature	ToggleButton Example
Wi-Fi settings	ON/OFF switch
Dark mode	ON/OFF
Notifications	Enable/Disable
Music player	Repeat ON/OFF

---

3. Basic Syntax (XML)

Example layout:

<ToggleButton
    android:id="@+id/toggleWifi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOn="Wi-Fi ON"
    android:textOff="Wi-Fi OFF"/>

Explanation:

• id → unique identifier

• layout_width → width

• layout_height → height

• textOn → label when toggled ON

• textOff → label when toggled OFF

Result:

Wi-Fi OFF  → Tap → Wi-Fi ON

---

4. Using ToggleButton in Kotlin

Example inside Activity:

import android.os.Bundle
import android.widget.ToggleButton
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

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

        val toggle = findViewById<ToggleButton>(R.id.toggleWifi)

        toggle.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) {
                println("Wi-Fi is ON")
            } else {
                println("Wi-Fi is OFF")
            }
        }
    }
}

Explanation:

• findViewById() connects XML ToggleButton to Kotlin

• setOnCheckedChangeListener detects ON/OFF changes

---

5. Important Properties

1. textOn

Label when toggled ON.

android:textOn="ON"

---

2. textOff

Label when toggled OFF.

android:textOff="OFF"

---

3. checked

Set default state (ON or OFF).

android:checked="true"  <!-- ON by default -->

---

4. background

Set background color or image.

android:background="#00FF00"

---

5. padding

Add space inside ToggleButton.

android:padding="8dp"

---

6. Important Methods (Kotlin)

isChecked

Check current state.

if (toggle.isChecked) {
    println("ON")
} else {
    println("OFF")
}

---

setChecked()

Set state programmatically.

toggle.isChecked = true   // Turns it ON

---

toggle()

Switch state programmatically.

toggle.toggle()

---

setOnCheckedChangeListener()

Detect when user changes state.

toggle.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) println("ON") else println("OFF")
}

---

7. Real-Time Examples

Example 1: Wi-Fi Switch

XML:

<ToggleButton
    android:id="@+id/toggleWifi"
    android:textOn="Wi-Fi ON"
    android:textOff="Wi-Fi OFF"/>

Kotlin:

toggle.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) println("Wi-Fi Enabled") 
    else println("Wi-Fi Disabled")
}

---

Example 2: Dark Mode Toggle

OFF → Tap → ON

Kotlin:

toggle.textOn = "Dark Mode ON"
toggle.textOff = "Dark Mode OFF"

---

Example 3: Notifications Toggle

Notifications OFF → Tap → Notifications ON

Used in Settings screens.

---

8. Advantages

✔ Shows binary options clearly
✔ Simple to use
✔ Saves space compared to separate buttons
✔ Very common in settings and control screens

---

9. Disadvantages

❌ Only supports two states
❌ Not suitable for multiple options (use CheckBox instead)

---

10. One-Line Summary

ToggleButton is an Android UI component that switches between two states (ON/OFF) and triggers an action when toggled.

---