A Guide to Building Custom Switches in Android

Hello World, today we are going to make a custom switch. Why? Because the default one looks so boring and ugly. Why we use a switch? As the name suggests, the switch is used to trigger the value either it is on, or it is off. Let's see, how our custom switch will look at the end of the tutorial.

In the above gif, there are 3 switches. The First one is the default one and the second and third are our custom switches. To make these custom switches we need to follow certain steps are as follows:

Step 1. Add Switch to Activity Layout

First, we need to add the switch to our layout XML file. We will add SwitchCompat to the layout.

Look at the below code for better understanding.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    >
    <androidx.appcompat.widget.SwitchCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/customSwitch"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

        app:track="@drawable/track"
        android:thumb="@drawable/thumb"

        android:text="Custom switch  "

        />
</androidx.constraintlayout.widget.ConstraintLayout>

In the above code, things to be noticed are app:track and android:thumb attributes.

The track is the horizontal container where our thumb or round shape view is placed and the thumb is, as I told you before, is the round shape where we will add an image on top of it. 

Step 2. Make Custom Track for Switch

To make our custom track we need to make a drawable file and set the root element as a selector. So click on the drawable folder and make a new file and name it as track.

In our track.xml we write this code for making the custom track.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="100sp"/>
            <stroke android:color="#8e8e8e"
                android:width="1dp"/>
        </shape>
    </item>

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent"/>
            <corners android:radius="100sp"/>
        </shape>
    </item>

</selector>

In the above code, we made two items in the selector where the first item represents the state when the switch is off or not checked and the second item represents the state when the switch is on or checked.

In the first item, we made a shape of a rectangle and fill white color with having corner radius with a grey color stroke or outline and in the second item the only difference is filled color will be our accent color and stroke will be removed but the corner radius will be the same.

Now let's make our thumb part where we will add images on the thumb.

Step 3. Make Custom Thumb with Image. 

To make custom thumb for the switch, create a drawable file in a drawable folder and name it as the thumb.

In our thumb.xml file, we will write the below code.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false"
        android:drawable="@drawable/switch_thumb_false"/>

    <item android:state_checked="true"
        android:drawable="@drawable/switch_thumb_true"/>

</selector>

As track.xml here we also have the root element as a selector and have the same item tags but this time we set drawable in the attribute. These drawable are our drawable file where we will add images. Let's add our vector icons to use in thumb drawable.

Add images for thumbRight-click on drawable then click on new then select vector assets and then choose your icon from clip art. For demo purposes, we are selecting notification on and off icon.

After adding the icons, we need to make drawable files for custom thumb off and one for the thumb on which will be add in thumb.xml as drawable.

Let's make the first file in the drawable for thumb off and set an image to the thumb. Check the below code. 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
            <size android:height="48dp"
                android:width="48dp"/>

        </shape>
    </item>

    <item android:drawable="@drawable/ic_notifications_off"
        android:bottom="12dp"
        android:top="12dp"
        android:left="12dp"
        android:right="12dp"
        />

</layer-list>

If you noticed, we are using the layer-list as the root element and in the child, we have 2 items.

The first item is our oval (round) shape of the thumb with the size and background color and the second item is our image drawable with 12dp padding from the top, bottom, left, and right.

See also: Cardview with Recyclerview Example

So this was for when the switch is off our custom thumb will look like this now its turn for thumb true when the switch is on.

Create a new file with the name switch_thumb_true and the code will be like below.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
            <size android:height="48dp"
                android:width="48dp"/>
            <stroke android:width="1sp"
                android:color="#8e8e8e"
                />

        </shape>
    </item>


    <item android:drawable="@drawable/ic_notification_on"
        android:bottom="12dp"
        android:top="12dp"
        android:left="12dp"
        android:right="12dp"
        />


</layer-list>

Like thumb false, this code is similar to it but the differences are we added the stroke to the round shape and of course change the image drawable.
Now we have made the all necessary files now its time to run our app and your custom switch is ready. Tada!!!!

This switch is our middle one if you want to make track height small then you need to do some extra work.

How to make track height smaller than the thumb

To make a smaller track, we need to make 2 files for the track on and track off and set to selector file as drawable as we did for the thumb on and off.

First, change your track.xml like the below code.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false"
        android:drawable="@drawable/track_off"
        >
    </item>
    <item android:state_checked="true" android:drawable="@drawable/track_on">
    </item>
</selector>

Now this time we removed the shape code and add drawable files. Now make both files and let's see their code.

For the first track_off.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle"
            >
        </shape>
    </item>

    <item
        android:top="12sp"
        android:bottom="12sp"
        >
        <shape android:shape="rectangle"
            >
            <solid android:color="@android:color/white"/>
            <corners android:radius="100sp"/>
            <stroke android:color="#8e8e8e"
                android:width="1dp"/>
        </shape>
    </item>


</layer-list>

We are using the layer-list as root element and then the first item has a shape with the same code on previous track code but the twist is we have just added a rectangle shape and add 12sp padding to the top and the bottom of the second shape to make track height smaller than the thumb.

The same thing needs to be done in the track_on.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


    <item>
        <shape android:shape="rectangle">
        </shape>
    </item>

    <item

        android:top="12sp"
        android:bottom="12sp"
        >
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent"/>
            <corners android:radius="100sp"/>
        </shape>
    </item>


</layer-list>

After setting these files to track.xml run your app and your track height will be small.

Thanks for reading have a nice day.

Previously published at https://www.akshayrana.in/2020/07/custom-switch-in-android.html