toggle button

Android Toggle Button Example | Kotlin

In this tutorial, we will learn how to use the Android Toggle Button widget. We will also learn about the various toggle button widget attributes.

ToggleButton is used in Android to display the checked and unchecked state of a button. ToggleButton is basically an off/on button with a light indicator that indicates the toggle button’s current state. The most basic form of ToggleButton is turning on/off sound, Bluetooth, Location, hotspots, and so on.

Difference between switch button and toggle button

Developers frequently confuse between toggle switches and toggle buttons because they both manage states, but there is a significant difference. Toggle switches represent system states, whereas toggle buttons represent contextual states.

ToggleButton code in XML:

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

Attributes in toggle button are :

XML AttributeDescription
android:disabledAlphaThis is the alpha value you want to use when the indicator is turned off.
android:textOffWhen the toggle button is turned off, the text will be displayed.
android:textOnWhen the toggle button is turned on, the text will be displayed.
android:gravityit is used to set the gravity of button

Some of the most commonly used TextView attributes are :

XML Attributes Description
android:backgroundIt is used to give the View’s background.
android:backgroundTintit is used to set the background tint.
android:clickableWhen you want to make this View clickable, you use it to set true. Set false otherwise.
android:textit is used to set the text of the TextView
android:textAllCapsText is displayed in capital letters.
android:textColorit is used to set the color of the text 
android:textSizeit is used to set the size of the text
android:textStyle it is used to set the style of the text. For example, bold, etc
android:buttonTintit is used to set the button Tint

Android toggle button Example:

ToggleButton in Android Studio is demonstrated below. Using the attributes discussed earlier in this post, we display a toggle button and one “submit” button in this example. The current state of the toggle button is displayed in a Toast whenever the user clicks the submit button. The following is the final result, as well as a step-by-step explanation :

<– Android Toggle button


Step 1: Create New Project in Android Studio

Step 2: Open activity_main.xml –>Open res -> layout -> activity_main.xml then, add below code into it.

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

    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="132dp"
        android:text="ToggleButton"
        android:textSize="30sp"
        android:textColor="@color/white"
        android:background="@color/purple_700"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="209dp"
        android:text="Submit"
        android:backgroundTint="@color/teal_200"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: In MainActivity.kt file initialize variable and implement setOnClickListener on submit button.

package com.sagar.togglebutton

import android.os.Bundle
import android.widget.Button
import android.widget.Toast
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 toggleButton = findViewById<ToggleButton>(R.id.toggleButton)
        val submit = findViewById<Button>(R.id.button)
        submit.setOnClickListener {
            val status = "ToggleButton Status --> ${toggleButton.text}"
            Toast.makeText(this,status,Toast.LENGTH_SHORT).show()
        }
    }
}

Step 4: Code inside AndroidManifest.xml file is as below:

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.ToggleButton">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
  • We hope that this guide will assist you in quickly creating a Android toggle button. If you have any problems, please post them in the comments section, we will gladly assist you.

Material Dialogs in Android with Example

ImageView in Android with Example | Kotlin

Android Ratingbar Example | Kotlin

The official document of Android togglebutton

Leave a Reply