How can I customize the color in switch?

SuperCD · March 2016

I'm using xamarin.Forms and want to customize the color of the switch? I found on forum to customize the switch but it seems to be not working.
Below is the code :
[assembly: ExportRenderer(typeof(Xamarin.Forms.Switch), typeof(CustomSwitchRenderer))]
namespace EVGMobileSolution.Droid.Custom_Renderer
{
public class CustomSwitchRenderer : SwitchRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
{
base.OnElementChanged(e);

        if (Control != null)
        {
            //Control.TextOn = "Si";
            //Control.TextOff = "No";
            Android.Graphics.Color colorOn = Android.Graphics.Color.Maroon;
            Android.Graphics.Color colorOff = Android.Graphics.Color.LightGray;
            Android.Graphics.Color colorDisabled = Android.Graphics.Color.Gray;

            StateListDrawable drawable = new StateListDrawable();
            drawable.AddState(new int[] { Android.Resource.Attribute.StateChecked }, new ColorDrawable(colorOn));
            drawable.AddState(new int[] { Android.Resource.Attribute.StateEnabled }, new ColorDrawable(colorDisabled));
            drawable.AddState(new int[] { }, new ColorDrawable(colorOff));

            Control.ThumbDrawable = drawable;
        }
    }

}

Can anybody let me know what I'm missing here.

leninmathi · March 2016

did u tried by overriding "OnElementPropertyChanged" method?

SuperCD · March 2016

Yes.. didnt worked on customizing, switch control doesn't appear at all on the Lollipop.

VincentMenant · May 2016

Try to Use SwitchExtended control of Xamarin Forms Labs. Color can be personalized with this control

SaraLlorente · February 2017

Best way is a custom render for Android, you can use styles also, but low api levels does not allow switch customization

[assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.Forms.Switch),
typeof(App.Droid.CustomRenders.SwitchRenderer))]

namespace App.Droid.CustomRenders
{
    using Android.Graphics;
    using Android.Widget;
    using Xamarin.Forms.Platform.Android;

    public class SwitchRenderer : SwitchRenderer
    {
        private Color greyColor = new Color(215, 218, 220);
        private Color greenColor = new Color(32, 156, 68);

        protected override void Dispose(bool disposing)
        {
            this.Control.CheckedChange -= this.OnCheckedChange;
            base.Dispose(disposing);
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
        {
            base.OnElementChanged(e);

            if (this.Control != null)
            {
                if (this.Control.Checked)
                {
                    this.Control.ThumbDrawable.SetColorFilter(greenColor, PorterDuff.Mode.SrcAtop);
                }
                else
                {
                    this.Control.ThumbDrawable.SetColorFilter(greyColor, PorterDuff.Mode.SrcAtop);
                }

                this.Control.CheckedChange += this.OnCheckedChange;
            }
        }

        private void OnCheckedChange(object sender, CompoundButton.CheckedChangeEventArgs e)
        {
            if (this.Control.Checked)
            {
                this.Control.ThumbDrawable.SetColorFilter(greenColor, PorterDuff.Mode.SrcAtop);
            }
            else
            {
                this.Control.ThumbDrawable.SetColorFilter(greyColor, PorterDuff.Mode.SrcAtop);
            }
        }
    }
}

For iOS is simpler:

UISwitch.Appearance.OnTintColor = UIColor.FromRGB(0x91, 0xCA, 0x47);

You can see more in: https://developer.xamarin.com/guides/xamarin-forms/platform-features/ios/theme/

SunilRajanna.1019 · February 2017

A simple solution for customizing Switch color on Android is available here

VinayakGawas · February 2017

You just have to change accent Color in Color.xml to change switch color..
NO need to use a custom renderer...

GeradeLintonGeldenhuys · February 2017

@VinayakGawas What about on IOS? I am using forms. I have the Accent color resource to my app, but it's still the default green. Am i missing something.

VinayakGawas · February 2017

@GeradeLintonGeldenhuys You will have to create a custom switch for that..
`Create a custom Render for the switch (UISwitch in iOS) and set its OnTintColor Property.

In PCL :

public class CustomSwitch : Switch
{
}

In iOS :

[assembly: ExportRenderer(typeof(CustomSwitch), typeof(CustomSwitchRenderer))]

namespace xyz.iOS.CustomControlRenderers
{
    public class CustomSwitchRenderer : SwitchRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<Switch> e)
        {
            base.OnElementChanged (e);

            if (Control != null) 
            {
                // do whatever you want to the UISwitch here!
                Control.OnTintColor = UIColor.FromRGB (204, 153, 255);
            }
         }
    }
}`

KevinGoss · March 2017

@SaraLlorente , I am trying to use your custom renderer and it works fine as far as style goes (finally). But now that the style works, the Toggle event is not raised in the Forms library. Do you have any idea why there is no event raised when it is checked? Thanks.

J222 · April 2017

Same problem

Lyverbe · July 2017

@KevinGoss said:
@SaraLlorente , I am trying to use your custom renderer and it works fine as far as style goes (finally). But now that the style works, the Toggle event is not raised in the Forms library. Do you have any idea why there is no event raised when it is checked? Thanks.

Add this:

private void OnCheckedChanged(object sender, CompoundButton.CheckedChangeEventArgs e)
{
  Element.IsToggled = Control.Checked;
}

Rajendra_Bhandari · July 2017

Hi All,
Can any one know how to set StateListDrawable to switch.ThumbDrawable it is working in Android API 16 but not on API 15. I am using switch custom renderer.

here is code I am using

    protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
            {
                base.OnElementChanged(e);
                if (Control != null)
                {
                    if (Build.VERSION.SdkInt > BuildVersionCodes.JellyBean)
                    {
                        if (e.NewElement.IsToggled)
                        {
                            if (Control.ThumbDrawable != null)
                            {
                                Control.ThumbDrawable.SetColorFilter(Xamarin.Forms.Color.FromHex("#E60000").ToAndroid(), PorterDuff.Mode.Multiply);
                            }
                        }
                        else
                        {
                            if (Control.ThumbDrawable != null)
                            {
                                Control.ThumbDrawable.SetColorFilter(Xamarin.Forms.Color.White.ToAndroid(), PorterDuff.Mode.Multiply);
                            }
                        }
                    }
                    else
                    {
    // this works for android 16 but not 15
                        StateListDrawable drawable = new StateListDrawable();
                        drawable.AddState(new int[] { Android.Resource.Attribute.StateChecked }, new ColorDrawable(Xamarin.Forms.Color.FromHex("#E60000").ToAndroid()));
                        drawable.AddState(new int[] { -Android.Resource.Attribute.StateEnabled }, new ColorDrawable(Xamarin.Forms.Color.White.ToAndroid()));
                        drawable.AddState(new int[] { }, new ColorDrawable(Xamarin.Forms.Color.Aqua.ToAndroid()));
                        Control.ThumbDrawable = drawable;
                    }
                }
            }

Hir47 · July 2017

Its simple just apply bellow code in AppDelegate.cs for change switch color in iOS
UISwitch.Appearance.TintColor = UIColor.FromRGB(192, 0, 0);
// UISwitch.Appearance.ThumbTintColor= UIColor.FromRGB(192, 0, 0);
UISwitch.Appearance.OnTintColor= UIColor.FromRGB(192, 0, 0);

for Android to set "colorAccent" in Style.xml file for change Switch color .....

Happy Coding......

jorgemht · October 2017

I have the same problem,

at the moment I "fix" when I change the color in <item name="colorAccent"> YOURCOLOR</item> in styles.xml in Android

Regards, Jorge.

MarkHeinis · June 2018

FYI it's in the latest Xamarin Forms 3.1.0 build:

 <Switch OnColor="Green" />

BartlomiejPater · July 2018

@MarkHeinis it works! thanks

SteveShaw.5557 · August 2018

In Xamarin Forms 3.1.0.697729, on Android,

<Switch OnColor="Red" />

Changes the color of the track, but NOT the color of the thumb, which is still a pale blue-green (when On).

Is this a bug? Or does thumb still have to be changed via Android theme, or custom renderer?

**UPDATE: **
Removing "colorAccent" item from theme leaves thumb as pale blue-green, that seems to be the default.
Setting "colorAccent" item in Android theme sets the thumb color, regardless of whether the Switch's OnColor is set or not. E.g.

<item name="colorAccent">#FFFF00</item>

in Android theme sets the thumb color to Yellow when switch is On.
(If DON'T set "OnColor", "colorAccent" also sets the color of the track.)

Xamarin

Quick Links

How can I customize the color in switch?

Answers