Skip to main content

Custom Switch in Android | Akshayrana.in | Android Tutorial

How to make Custom Switch in Android?

Custom Switch 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.


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.


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.


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 thumb

Right-click on drawable then click on new then select vector assets and then choose your icon from clip art. for demo purpose we are selecting notification on and off icon.

notification on icon

notification 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. 


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.


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.


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. Keep reading...

How to make track height smaller than the thumb.

smaller track than thumb switch


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.


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


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


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

If you like this article do share it with your friends and batchmates and don't forget to subscribe to our newsletter if you haven't joined already.

Thanks for reading have a nice day.

Share this Article 👇

Subscribe to our Newsletter


By subscribing to our newsletter you're agreeing with our T&C.

Popular Posts

How to make splash screen in Android in 2020 [Best Guide]

Working with Bottom Navigation bar in Android [Full Guide]