Last updated Dec 13, 2021

Add Switch/Toggle Button in Android Studio with RRutors

In this example tutorial, we will see how to add an Switch Button by using Kotlin in android studio.

What is Switch/Toggle Button?
The Android Switch Button is a UI widget with only two states: ON and OFF. It allows the user to toggle or switch between these two states.


Implementation:

To begin, Create a new project in android studio and enter the name, select the project location and language to Kotlin. Then press the Finish button.
   Open the activity_toggle_button.xml file and add the LinearLayout with orientation (Vertical or horizontal).

 

      <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"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#E7EACE"
    tools:context=".ToggleButtonActivity">
</LinearLayout>

 

In activity_toggle_button.xml file, insert an Switch Button inside a LinearLayout.

        <Switch
        android:id="@+id/switchbtn"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:text="Switch "
        android:textSize="30sp"
        android:switchMinWidth="60dp"
        android:thumbTint="@color/black"
        android:trackTint="@color/teal_700"
        >
    </Switch>

 

Change color of switch using thumbTint property to Switch and you can set min width of the switch using switchMinWidth.

android:switchMinWidth="60dp"
android:thumbTint="@color/black"

 

Switch in android has the following properties:
id, padding, tracktint, thumbTint, textSize, text, textColor, background, layout_margin etc...

android:switchMinWidth="60dp"
android:thumbTint="@color/black"
android:padding="10dp"
android:background="#E7EACE"
android:text="Switch "
android:textSize="30sp"
android:textColor="#000"
android:switchMinWidth="60dp"
android:layout_margin="10dp"

 

Now go to ToggleButtonActivity.kt and add the unique id of Switch Button which is available in activity_toggle_button.xml file.

val switch = findViewById(R.id.switchbtn)

 

Set the onClickListener event on the switch instance and use if-else conditional statements to determine whether the switch is ON or OFF.

switch.setOnClickListener{
            if (switch.isChecked()) {
                Toast.makeText(this, "Switch ON", Toast.LENGTH_SHORT).show();
            } else {

                Toast.makeText(this, "Switch OFF", Toast.LENGTH_SHORT).show();
            }
        }

 

Show a Toast on condition if switch is ON "Switch ON" or OFF "Switch OFF".

Note: Toast is small message which displayed on a screen for some time.

 

Now run the application, you will see the output shown below.

Output:
 

Switch Toggle Example

 

Switch Toggle Example

 

 Complete source code  for Android Switch Button example:
 

activity_toggle_button.xml file

<?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"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#E7EACE"
    tools:context=".ToggleButtonActivity">

    <Switch
        android:id="@+id/switchbtn"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:text="Switch "
        android:textSize="30sp"
        android:switchMinWidth="60dp"
        android:thumbTint="@color/black"
        android:trackTint="@color/teal_700"
        >
    </Switch>
</LinearLayout>

 

ToggleButtonActivity.kt file

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Switch
import android.widget.Toast
import com.nishajain.kotinexamples.R

class ToggleButtonActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_toggle_button)
        val switch = findViewById(R.id.switchbtn)
        switch.setOnClickListener{
            if (switch.isChecked()) {
                Toast.makeText(this, "Switch ON", Toast.LENGTH_SHORT).show();
            } else {

                Toast.makeText(this, "Switch OFF", Toast.LENGTH_SHORT).show();
            }
        }
    }
}

 

Conclusion: We have covered the topic how to add an Switch/Toggle Button to Android by using Kotlin.