In this article we will show you the solution of sliding toggle button in android, this article, we will create a very simple and interesting app "SlidingToggleButton" in Android Studio.

Android Studio is a wonderful platform for app designing.

We can actually use both Java and Kotlin Language for programming in Android Studio but note that we will be using java for our app development.

The most common examples of ToggleButton are doing on/off in sound, Bluetooth, wifi, hotspot and more.

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

The Switch is basically another type of toggle button that has arrived since Android 4.0 that provides a slider control. Starting with ToggleButton, we turned to switch, and now, from Android Support Library v21, we have a brand-new style called Switch Compat that we are going to use in our app.

This widget perfectly works fine with any Android 7+ version SDK. Rectangular shape is called Track and oval shape is called Thumb.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<! --we are going to create track the track and implement its functionality
when the toggleButton is turned on. I have made its shape rectangular and color
is set to green. Height is fitted to 20 dp and corners-radius is made 100 dp for
rounded shape at every corner of rectangle.
-->
<item android:state_checked="true">
<shape android:shape="rectangle">
<solid android:color="#34c759" />
<corners android:radius="100dp" />
<stroke android:width="1dp" android:color="#8c8c8c" />
<size android:height="20dp" />
</shape>
</item>
<!--we are going to create track the track and implement its functionalities
when the toggleButton is turned off.I have made its shape rectangular and color
is set to white. Height is fitted to 20 dp and corners-radius is made 100 dp for
rounded shape at every corner of rectangle.
-->
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="100dp" />
<stroke android:width="1dp" android:color="#8c8c8c" />
<size android:height="20dp" />
</shape>
</item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--first of all we are going to create thumb item where we will
keep state_checked="true" that means when toggleButton is turned on.
It is filled with white color having border-color green. Its height and
width both are made 100 dp.-->
<item android:state_checked="true">
<shape android:shape="oval">
<solid android:color="@android:color/white" />
<stroke android:width="1dp" android:color="#34c759" />
<size android:width="100dp" android:height="100dp" />
</shape>
</item>
<!--first of all we are going to create thumb item where we will
keep state_checked="false" that means when toggleButton is turned off.
It is filled with white color having border-color white. Its height and
width both are made 100 dp.-->
<item android:state_checked="false">
<shape android:shape="oval">
<solid android:color="@android:color/white" />
<stroke android:width="1dp" android:color="#8c8c8c" />
<size android:width="100dp" android:height="100dp" />
</shape>
</item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="green">#0F9D58</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
</resources>

1. In order to create a new project in Android Studio kindly refer to How to Start a New Project in Android Studio.
2. Now, we have to create a separate drawable file for the Track of the image. In order to create this file, you have to navigate to res > drawable. Now Right Click on drawable then select New and then on Drawable Resource File.
3. In this step, navigate to res > drawable > track.xml and add the below code to that file. Now we will create the track part of the toggle button and execute its features. Here, I have made the track rectangular in shape with some strokes and radius so that it looks quite attractive. Its color is set to blue color having color code “#34c759” when the ToggleButton is turned on and when the ToggleButton is turned off it is set to white color having color code “#8c8c8c”.
4. Now we will have to create a separate drawable file for the Thumb part of the image. In order to create this file, kindly Navigate to res > drawable. Then you have to Right Click on drawable then click on New and then on Drawable Resource File.
5. Kindly Navigate to res > drawable > tracks.xml and add the below code to that file. Now we will create the thumb part of the toggle button and execute its features. Thumb is oval in shape filled with white color. It actually towards the right containing a border color of green(“#34c759”) when the toggle button is turned on and moves towards the left having a border color of white(#8c8c8c) when the toggle button is turned off.
6. Now, navigate to res > layout > activity_main.xml and kindly add the below code to that file. Here I added SwitchCompat instead of a simple switch.
7. Now, you need to Go to the values folder first then select the strings.xml file. Using this file, we can clearly change the title of our app. My title is “KFG | SlidingToggleButton”. <resources><string name="app_name">GFG | SlidingToggleButton</string></resources>
8. Lastly, go to the values folder first then select the colors.xml file. Now In the colors.xml file, you can keep colors of your own choice as many as you want to use in your app. You have to just give a proper name and input the color code of the respective colors. Now we have named the AppBar color as #0F9D58 which we named as “green”.

Conclusion :-

So, this is the method to implement sliding toggle button in your android application. In next tutorials we will study on more advanced topics on android.

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