DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Mateusz Budnik
Mateusz Budnik

Posted on • Updated on

Custom Switch in Android

In this tutorial, I will show you how to take control of a switch and change its appearance.

We can change the track and the thumb of our switch by creating new drawable objects.

Track

Below is an example code for the track.

switch_track.xml

<?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="@color/salmon_pink"/>
            <corners android:radius="1dp"/>
        </shape>
    </item>

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/green"/>
            <corners android:radius="1dp"/>
        </shape>
    </item>
</selector>
Enter fullscreen mode Exit fullscreen mode

We defined a selector that selects an appropriate object (one of two) depending on the switch state (android:state_checked).

Then it is needed to assign our newly created track to the switch.
We do that by putting this line of code in switch definition.

 <androidx.appcompat.widget.SwitchCompat
   ...
   app:track="@drawable/switch_track"/>
Enter fullscreen mode Exit fullscreen mode

Thumb

It is very similar to changing track - creating a selector that shows the appropriate thumb depending on the switch state.

switch_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_thumb_unchecked" android:state_checked="false" />
    <item android:drawable="@drawable/switch_thumb_checked" android:state_checked="true" />
</selector>
Enter fullscreen mode Exit fullscreen mode

And below is an example code for thumb in checked switch.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/green" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <corners android:radius="5dp"/>
            <size android:height="30dp" android:width="60dp"/>
        </shape>
    </item>
</layer-list>
Enter fullscreen mode Exit fullscreen mode

Passing thumb to the switch.

 <androidx.appcompat.widget.SwitchCompat
    ...
    android:thumb="@drawable/switch_thumb" />

Enter fullscreen mode Exit fullscreen mode

The result

The possibilities are endless. You can create a switch that will perfectly fit your application.
final result

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›