In this article we will show you the solution of custom toggle button in android, in Android, a Switch is a type of button that helps the user toggle between two actions or instances.

In simple words, a Switch is used for selecting just one between two options that can be invoking any actions or functions.

You can see a sample Switch shown in the below image we are going to execute this project using the Kotlin language.

Step By Step Guide On Custom Toggle Button In Android :-

XML

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<corners android:radius="15dp" />
<gradient android:angle="270" android:endColor="#6600FF00" android:startColor="#66AAFF00" />
<size android:width="37dp" android:height="37dp" />
<stroke android:width="4dp" android:color="#0000ffff" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<corners android:radius="15dp" />
<gradient android:angle="270" android:endColor="#ff0000" android:startColor="#ff0000" />
<size android:width="37dp" android:height="37dp" />
<stroke android:width="4dp" android:color="#0000ffff" />
</shape>
</item>
</selector>

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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">
<Switch
android:id="@+id/switch_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="ON"
android:layout_centerInParent="true"
android:textOff="OFF"
android:thumb="@drawable/custom_switch"
tools:ignore="UseSwitchCompatOrMaterialXml" />
</RelativeLayout>

Kotlin

package org.geeksforgeeks.switchwidget
import android.annotation.SuppressLint
import android.os.Bundle
import android.widget.Switch
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
@SuppressLint("UseSwitchCompatOrMaterialCode")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val mSwitch = findViewById<Switch>(R.id.switch_1)
mSwitch.setOnCheckedChangeListener { _, isChecked ->
if (isChecked) {
Toast.makeText(applicationContext, "Switch On", Toast.LENGTH_SHORT).show()
} else {
Toast.makeText(applicationContext, "Switch Off", Toast.LENGTH_SHORT).show()
}
}
}
}

1. First step, in order to create a new project in Android Studio You can refer to How to Create a New Project in Android Studio. We have demonstrated the application in Kotlin, so kindly make sure you select Kotlin as the primary language while creating a New Project for your application.
2. Kindly Navigate to res > drawable. Then, Right-click on the drawable folder, select new, then click on Drawable Resource File. Now kindly set the name as custom_switch, root element as the selector, and click OK. Now you have to add the below code to your file. The below code presents two states on the Switch, when true and when false. When true, the color is blue, and when false the color is red.
3. Kindly Navigate to the app > res > layout > activity_main.xml and add the following code to that file. Below you may see is the code for the activity_main.xml file. Kindly Add a Switch as shown below. And Lastly Set the thumb attribute as the custom switch created in the above code.
4. Lastly, Working with the MainActivity.kt file.Kindly Go to the MainActivity.kt file and refer to the following code. Below you can see is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail and then you can make critical analysis of the code.

Conclusion :-

In this tutorial we explained you the custom toggle button switch in Android.

This is a pretty important feature as buttons are essential elements in Android applications. In future tutorials we will learn sliding toggle button in android.

I hope this article on custom toggle button in android helps you and the steps and method mentioned above are easy to follow and implement.