Android Switch - How to add an Switch/Toggle Button in Android Studio using Kotlin.

Last updated Dec 13, 2021


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.


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

23 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions