Xamarin.Android Switch -Set colors of thumb and track drawables

85 Views Asked by At

I have a switch with custom track and thumb.

<Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/switchLocationTracking"
        android:thumb="@drawable/thumb_background"
        android:track="@drawable/track_backgrounds"
        />

track_backgrounds.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle" >
            <solid android:color="#FFFF00" />
            <corners android:radius="30dp" />
            <size android:height="32dp" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="#ADD8E6" />
            <corners android:radius="30dp" />
            <size android:height="32dp" />
        </shape>
    </item>
</selector>

thumb_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="oval">
            <solid android:color="#ffa500" />
            <size android:width="30dp" android:height="30dp" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="oval">
            <solid android:color="#FF00FF" />
            <size android:width="30dp" android:height="30dp" />
        </shape>
    </item>
</selector>

I get the thumb and track colors for On/Off while runtime when the application starts through some properties in webview. And I want to set the colors for all the switch controls (4 so far) in my application. I am trying to figure out the best way to do it.

The solution that I could think of is for each control set the colors of the drawable in CheckedChange event like the example below. But its not an efficient solution and would like a better one. Thanks.

Drawable drawableSwitch = GetDrawable(Resource.Drawable.thumb_background);
DrawableCompat.SetTint(drawableSwitch, Color.ParseColor(MainActivity.theme.colorInput));
FindViewById<Switch>(Resource.Id.switchLocationTracking).ThumbDrawable = drawableSwitch;
2

There are 2 best solutions below

1
user2153142 On

Again I'd refer you to my github. https://github.com/gmck where you'll find an example using com.google.android.material.materialswitch.MaterialSwitch a modern replacement for the old Switch.

0
Jessie Zhang -MSFT On

If you want to set the color of thumb, you can also use property android:thumbTint for Switch.

For example:

     <Switch 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/thumb_background"
    android:track="@drawable/track_backgrounds"
    android:thumbTint="@color/color2"
    />

Note:

You can also set trackTint for Switch.

Please refer to the following code:

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/thumb_background"
    android:track="@drawable/track_backgrounds"
    android:thumbTint="@color/color2"
    android:trackTint="@color/color1"        
    />