How can we create customized toggle button in android

Question

I have been trying to create a customized toggle button in native android, But I'm not able to achieve it. Here is the Image which I want to look like :

can someone help me on this?

Answer 1

If you need to create a custom switch, you don't have to create a custom view. In fact, with the help of some drawables you will be able to achieve what you want.

I will give an example and you can customize it to your needs.

There are three main resources that you need.

1. Thumb
2. Track
3. Text Coloring.

Let's start with the Thumb which represents the moving part in the Switch.

thumb_selector.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">
            <corners android:radius="12dp" />
            <solid android:color="@android:color/white" />
            <size android:width="120dp" android:height="@dimen/toggle_button_height" />
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <corners android:radius="12dp" />
            <solid android:color="@android:color/white" />
            <size android:width="120dp" android:height="@dimen/toggle_button_height" />
        </shape>
    </item>
</selector>

Then we need to draw the track which represents the bottom layer of the Switch.

track_selector.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">
            <corners android:radius="12dp" />
            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <corners android:radius="12dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</selector>

Now moving to the last part which is the text coloring to give our text a different color depending on the selection state.

text_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/darker_gray" android:state_checked="false" />
    <item android:color="@color/colorPrimary" android:state_checked="true" />
</selector>

We need to create a style for this text because it can't be added directly to the Switch. So, in your styles.xml create a new style for the text color.

styles.xml

<style name="SwitchTextAppearance" parent="@android:style/TextAppearance.Holo.Small">
    <item name="android:textColor">@drawable/text_color_selector</item>
    <item name="android:textSize">14sp</item>
</style>

Finally, we need to tie all parts together in our layout.

layout.xml

...
<androidx.appcompat.widget.SwitchCompat
    android:id="@+id/switch"
    android:layout_width="240dp"
    android:layout_height="40dp"
    android:layout_gravity="center"
    android:checked="false"
    android:textAllCaps="false"
    android:textOff="Off"
    android:textOn="On"
    android:textSize="15sp"
    android:thumb="@drawable/thumb_selector"
    app:showText="true"
    app:switchTextAppearance="@style/SwitchTextAppearance"
    app:track="@drawable/track_selector" />
...

Results