Customise Android SwitchCompat

Question

In my Android app, I have a list with a SwitchCompat to filter the list data. The default theme can't serve my purpose what I need is a iOS like switch. I have no idea how can I customize it to look exactly like the iOS switch. Thanks for reading.

            <androidx.appcompat.widget.SwitchCompat
                android:id="@+id/switch_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@xml/custom_switch_background_main"
                android:theme="@style/AppTheme.SwitchOverlay"/>

This is what I have archived so far

custom_switch_background_main.xml

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

custom_switch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="50dp" />
    <solid android:color="@color/transparent" />
    <stroke
        android:width="1dp"
        android:color="@color/hello" />
</shape>

This is what I want

How about MaterialButtonToggleGroup from https://material.io/develop/android/components/buttons — Gunaseelan, Sep 08 '20 at 07:37
Wow, it's pretty close, one question though. I don't want the traditional `Button`. How can I customize those inside buttons? — , Sep 08 '20 at 07:46

score 1 · Answer 1 · answered Sep 10 '20 at 10:21

You can achieve something like:

with the standard MaterialButtonToggleGroup:

      <com.google.android.material.button.MaterialButtonToggleGroup
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:selectionRequired="true"
           app:singleSelection="true">
           
           <com.google.android.material.button.MaterialButton
               app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.rounded"
               style="?attr/materialButtonOutlinedStyle"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="ITEM1"/>

           <com.google.android.material.button.MaterialButton
               app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.rounded"
               style="?attr/materialButtonOutlinedStyle"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="ITEM2"/>
           
           
       </com.google.android.material.button.MaterialButtonToggleGroup>

with:

<style name="ShapeAppearanceOverlay.App.rounded" parent="">
    <item name="cornerSize">50%</item>
</style>

If you want the border you can wrap the MaterialButtonToggleGroup in a container (LinearLayout, CardView....) applying a stroke a small padding.

If you want the button with rounded corners on both side you can check something like this question.

Hey, thank you for answering, I've achieved the design that I was talking about. I'll post it later. — , Sep 10 '20 at 15:05

score 0 · Answer 2 · answered Sep 08 '20 at 08:29

0

I think you should use sliding tab layout instead of switchcompat to fulfill your requirement. I have found one third party library that's looks like same switch as you want.

Click Here to Use This Library

answered Sep 08 '20 at 08:29

Bhavik Nathani

470
5
13

No it's won't work without tabs i will let you know if i found. – Bhavik Nathani Sep 08 '20 at 08:48
ok, but I would still like to customize the `SwitchCompat` – Sep 08 '20 at 08:55

score 0 · Accepted Answer · answered Feb 07 '21 at 11:26

I achieved the design by using a custom vector (and the text inside was a mask) which was replacement for the switch’s state indicator. then I changed the switch compat background vector with a custom border design as well to achieve the border. I’ll update this answer again soon.

Customise Android SwitchCompat

3 Answers3