Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How can I customize the color in switch?

SuperCDSuperCD USMember ✭✭

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.

Answers

  • leninmathileninmathi USMember ✭✭

    did u tried by overriding "OnElementPropertyChanged" method?

  • SuperCDSuperCD USMember ✭✭

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

  • VincentMenantVincentMenant USMember

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

  • SunilRajanna.1019SunilRajanna.1019 USMember
    edited February 2017

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

  • VinayakGawasVinayakGawas USMember ✭✭✭

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

  • @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.

  • VinayakGawasVinayakGawas USMember ✭✭✭
    edited 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);
                }
             }
        }
    }`
    
  • KevinGossKevinGoss USMember ✭✭

    @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.

  • J222J222 ARMember

    Same problem

  • LyverbeLyverbe CAMember ✭✭

    @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_BhandariRajendra_Bhandari INMember ✭✭

    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;
                        }
                    }
                }
    
  • Hir47Hir47 USMember ✭✭

    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......:smile:

  • jorgemhtjorgemht USMember

    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.

  • BartlomiejPaterBartlomiejPater PLMember

    @MarkHeinis it works! thanks :)

  • SteveShaw.5557SteveShaw.5557 USMember ✭✭✭
    edited 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.)

Sign In or Register to comment.