Material 3 - Change switch icon size in style.xml

Question

I'm trying to add an icon to a switch control via thumbIcon, but I can't find a way to resize the icon. I'm trying to learn about this on this Page but I haven't been able to.

If I use the drawable without a selector, the icon displays the correct size, but if I use the drawable with the selector, the icon size becomes large, larger than 16dp and unsightly. Is there a way to change the icon size with the drawable mode selector? or can this be done in some way? I want when the switch is in the unchecked position it shows a different icon than the checked position with the right size or fit.

Material Switch

<com.google.android.material.materialswitch.MaterialSwitch
    android:id="@+id/SFilter_WorldWideValue"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:checked="true"
    android:fontFamily="@font/roboto_medium"
    android:text="@string/search"
    android:textAllCaps="true"
    android:textColor="@color/Text_Base_White"
    android:textIsSelectable="false"
    android:textSize="16sp"
    app:thumbIcon="@drawable/icon_check" --> **Normal Size**
    app:thumbIcon="@drawable/default_switch_icon" --> **Size is not normal**
    tools:ignore="TouchTargetSizeCheck" />

style.xml

<style name="Theme.Default" parent="Theme.Material3.Light.NoActionBar">
    ...
    <item name="materialSwitchStyle">@style/Switch.Default</item>
</style>
    
<style name="Switch.Default" parent="Widget.Material3.CompoundButton.MaterialSwitch">
    <item name="thumbIcon">@drawable/default_switch_icon</item>
    <item name="checkedIconSize">16dp</item> // Not working
    <item name="selectorSize">16dp</item> // Not working
    <item name="iconSize">16dp</item> // Not working
    <item name="drawableSize">16dp</item> // Not working
    <item name="itemIconSize">16dp</item> // Not working
    <item name="maxImageSize">16dp</item> // Not working
    <item name="materialThemeOverlay">@style/Switch.Colors.Default</item>
</style>

<style name="Switch.Colors.Default" parent="">
    ...
    ...
</style>

drawable/default_switch_icon.xml

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

score 3 · Accepted Answer · answered Dec 23 '22 at 13:41

You can use a layer-list in your selector :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- State Checked -->
    <item android:state_checked="true">
        <layer-list>
            <item android:drawable="@drawable/ic_check"
                android:height="16dp"
                android:width="16dp"
                android:gravity="center"/>
        </layer-list>
    </item>

    <!-- State Unchecked -->
    <item android:drawable="@color/transparent" />
</selector>

I had to set the gravity to center or the icon was not centered in the thumb.

Hi, thanks for the answer and it's exactly what I wanted. for unchecked state i use like checked state. so the switch has a different icon when checked and unchecked. — Espada, Dec 26 '22 at 08:33

Material 3 - Change switch icon size in style.xml

1 Answers1