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

Answer 2

To achieve this you can use a TabLayout inside a MaterialCardView. The MaterialCardView is needed to draw the corner radius for the outer section. In the TabLayout you can use the app:tabBackground to set a Drawable Selector for the Tab selected/unselected state and the app:tabTextAppearance where you can set a custom font style or size for the Tab.

Xml Layout:

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

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:cardBackgroundColor="#7a87a4"
        app:cardCornerRadius="10dp">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:backgroundTint="@android:color/transparent"
            android:layout_margin="1dp"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabIndicatorHeight="0dp"
            app:tabRippleColor="@android:color/transparent"
            app:tabTextColor="@android:color/black"
            app:tabSelectedTextColor="@android:color/black"
            app:tabBackground="@drawable/tabs_selector"
            app:tabTextAppearance="@style/CustomTabTextAppearance">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="By Current Location" />

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="By Location Name" />

        </com.google.android.material.tabs.TabLayout>

    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

where @drawable/tabs_selector is a drawable Selector to set the Tab Selected/Unselected state like below:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:state_selected="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <corners android:radius="0dp" />
        </shape>
    </item>
</selector>

and @style/CustomTabTextAppearance is a Custom Tab Text Appearance in case you want to change the Tab size or Font Family like below:

<style name="CustomTabTextAppearance" parent="TextAppearance.MaterialComponents.Button">
    <item name="fontFamily">@font/roboto_mono</item>
    <item name="android:fontFamily">@font/roboto_mono</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
</style>

Result:

Answer 3

Key classes are the following:

ToggleButton Switch SwitchCompat CompoundButton

You can even use Slider. Init the thumb and the track.