Open In App

Sliding Toggle Button in Android

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going are build a very simple and interesting app “SlidingToggleButton” in Android Studio. Android Studio is really a great platform for app designing. We can use both Java and Kotlin Language for programming in Android Studio but note that we will be using java for our app development. ToggleButton is mainly an off/on button with a light indicator that indicates the current state of the toggle button. The most common examples of ToggleButton are doing on/off in sound, Bluetooth, wifi, hotspot, etc. The Switch is another type of toggle button that came into effect since Android 4.0 which provides a slider control. Starting with ToggleButton, we turned to switch, and now, from Android Support Library v21, we have a new style called SwitchCompat that we are going to use in our app. This widget works fine with any Android 7+ SDK. SwitchCompat is a complete copy of the core Switch widget that brings the functionality of that widget to older versions of the platform. Below is the image of ToggleButton that we are going to create. The rectangular shape is called “Track” and the oval shape is called “Thumb“.

ToggleButton Image

ToggleButton Image

A sample GIF is given below to get an idea about what we are going to do in this article.

Sliding Toggle Button in Android Sample GIF

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that you have to select Java as the programming language.

Step 2: Create a File for “Track”

We have to create a separate drawable file for the Track part of the image. To create this file Navigate to res > drawable. Now you have to Right Click on drawable then click on New and then on Drawable Resource File. It has been shown in the image given below.

After clicking on Drawable Resource File we can create a new drawable file like this given below in the image. Give a name to your file and then click OK, our track file has been created.

Step 3: Working with the track.xml file

Navigate to res > drawable > track.xml and add the below code to that file. We will create the track part of the toggle button and implement its features. I have made the track rectangular in shape with some strokes and corners radius so that it looks attractive. Its color is set to green 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”

XML




<?xml version="1.0" encoding="utf-8"?>
     
    <!--we are going to create 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 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>


Step 4: Create a File for “Thumb” 

We have to create a separate drawable file for the Thumb part of the image. To create this file Navigate to res > drawable. Now you have to Right Click on drawable then click on New and then on Drawable Resource File. After clicking on Drawable Resource File you will get an image like this given below:

You have to just add a file name and then click OK, your thumb file has been created.

Step 5: Working with the thumb.xml file

Navigate to res > drawable > tracks.xml and add the below code to that file. We will create the thumb part of the toggle button and implement its features. Thumb is made oval in shape filled with white color. It moves towards the right having 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. 

XML




<?xml version="1.0" encoding="utf-8"?>
     
    <!--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>


Step 6: Working with the activity_main.xml file

Navigate to res > layout > activity_main.xml and add the below code to that file. Here I have added SwitchCompat instead of a simple switch. When the ToggleButton is turned on it displays the text “on” and it displays “off” when the ToggleButton is turned off.

XML Attributes

android:thumb (Drawable to use as the “thumb” that switches back and forth)

android:track (Drawable to use as the “track” that the switch thumb slides within)

android:showText (whether to draw on/off text)

android:textOn (Text to display when the switch is in the “on” state)

android:textOff (Text to display when the switch is in the “off” state)

Below is the code for the activity_main.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<!--We are going to use linearlayout for this application-->
<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--Instead of simple ToggleButton i will be using SwitchCompat
     because it has backward API compatibility. Here track and thumb are
     called. when ToggleButton is turned on it will display "on" and
     when it is turned off it will display "off".-->
    <androidx.appcompat.widget.SwitchCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:padding="50dp"
        android:textOff="off"
        android:textOn="on"
        android:thumb="@drawable/thumb"
        app:showText="true"
        app:track="@drawable/track" />
 
</LinearLayout>


Step 7: Change the Title of the App

Go to the values folder first then choose the strings.xml file. Using this file we can change the title of our app. I have kept the title “GFG | SlidingToggleButton”. 

XML




<resources>
    <string name="app_name">GFG | SlidingToggleButton</string>
</resources>


Step 8: Change the color of the AppBar

Go to the values folder first then choose the colors.xml file. In the colors.xml file, you can keep colors of your choice as many as you want to use in your app. You have to just give the name and put the color code of the respective colors. We have kept the AppBar color as “#0F9D58” which we have named as “green”.

XML




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


Output:

You can get Source code on the GitHub link given below: https://github.com/Babitababy/SlidingToggleButton



Last Updated : 21 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads