Is there a way I can customize a Switch colors

Question

My code is using a standard switch like this:

<Switch HorizontalOptions="End" IsToggled="{Binding PbSwitch}" />

When displayed it looks like this for the on and off:

Is there a way to customize this so I can set the background color of the switch to a different color in both iOS and Android. I think this would require a custom renderer but I am not sure how to do that.

Problem with the solution proposed:

Answer 1

If I understand clear what you want , you may need custom renderer to achieve this effect.

---

First, define a CustomSwitch in PCL with color BindableProperty(with it you can set value and use on different platforms)

CustomSwitch

public class CustomSwitch : Switch  
{  
   public static readonly BindableProperty SwitchOffColorProperty =  
     BindableProperty.Create(nameof(SwitchOffColor),  
         typeof(Color), typeof(CustomSwitch),  
         Color.Default);  

   public Color SwitchOffColor  
   {  
       get { return (Color)GetValue(SwitchOffColorProperty); }  
       set { SetValue(SwitchOffColorProperty, value); }  
   }  

   public static readonly BindableProperty SwitchOnColorProperty =  
     BindableProperty.Create(nameof(SwitchOnColor),  
         typeof(Color), typeof(CustomSwitch),  
         Color.Default);  

   public Color SwitchOnColor  
   {  
       get { return (Color)GetValue(SwitchOnColorProperty); }  
       set { SetValue(SwitchOnColorProperty, value); }  
   }  

   public static readonly BindableProperty SwitchThumbColorProperty =  
     BindableProperty.Create(nameof(SwitchThumbColor),  
         typeof(Color), typeof(CustomSwitch),  
         Color.Default);  

   public Color SwitchThumbColor  
   {  
       get { return (Color)GetValue(SwitchThumbColorProperty); }  
       set { SetValue(SwitchThumbColorProperty, value); }  
   }  

   public static readonly BindableProperty SwitchThumbImageProperty =  
     BindableProperty.Create(nameof(SwitchThumbImage),  
         typeof(string),  
         typeof(CustomSwitch),  
         string.Empty);  

   public string SwitchThumbImage  
   {  
       get { return (string)GetValue(SwitchThumbImageProperty); }  
       set { SetValue(SwitchThumbImageProperty, value); }  
   }  
} 

Android

[assembly: ExportRenderer(typeof(CustomSwitch), typeof(CustomSwitchRenderer))]
namespace FormsApp.Android
{
public class CustomSwitchRenderer : SwitchRenderer  
{  
    private CustomSwitch view;  
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)  
    {  
        base.OnElementChanged(e);  
        if (e.OldElement != null || e.NewElement == null)  
            return;  
        view = (CustomSwitch)Element;  
        if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.JellyBean)  
        {  
            if (this.Control != null)  
            {  
                if (this.Control.Checked)  
                {  
                    this.Control.TrackDrawable.SetColorFilter(view.SwitchOnColor.ToAndroid(), PorterDuff.Mode.SrcAtop);  
                }  
                else  
                {  
                    this.Control.TrackDrawable.SetColorFilter(view.SwitchOffColor.ToAndroid(), PorterDuff.Mode.SrcAtop);  
                }  
               this.Control.CheckedChange += this.OnCheckedChange;  
                UpdateSwitchThumbImage(view);  
            }  
            //Control.TrackDrawable.SetColorFilter(view.SwitchBGColor.ToAndroid(), PorterDuff.Mode.Multiply);  
        }  
    }  
      
    private void UpdateSwitchThumbImage(CustomSwitch view)  
    {  
        if (!string.IsNullOrEmpty(view.SwitchThumbImage))  
        {  
            view.SwitchThumbImage = view.SwitchThumbImage.Replace(".jpg", "").Replace(".png", "");  
            int imgid = (int)typeof(Resource.Drawable).GetField(view.SwitchThumbImage).GetValue(null);  
            Control.SetThumbResource(Resource.Drawable.icon);  
        }  
        else  
        {  
            Control.ThumbDrawable.SetColorFilter(view.SwitchThumbColor.ToAndroid(), PorterDuff.Mode.Multiply);  
            // Control.SetTrackResource(Resource.Drawable.track);  
        }  
    }  

  private void OnCheckedChange(object sender, CompoundButton.CheckedChangeEventArgs e)  
    {  
        if (this.Control.Checked)  
        {  
            this.Control.TrackDrawable.SetColorFilter(view.SwitchOnColor.ToAndroid(), PorterDuff.Mode.SrcAtop);  
        }  
        else  
        {  
            this.Control.TrackDrawable.SetColorFilter(view.SwitchOffColor.ToAndroid(), PorterDuff.Mode.SrcAtop);  
        }  
    }  
    protected override void Dispose(bool disposing)  
    {  
        this.Control.CheckedChange -= this.OnCheckedChange;  
        base.Dispose(disposing);  
    }  
}  
}

iOS

[assembly: ExportRenderer(typeof(CustomSwitch), typeof(CustomSwitchRenderer))]
namespace FormsApp2.iOS
{
    class CustomSwitchRenderer : SwitchRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || e.NewElement == null)  return;

            CustomSwitch s = Element as CustomSwitch;

            UISwitch sw = new UISwitch();
            sw.ThumbTintColor = s.SwitchThumbColor.ToUIColor();
            sw.OnTintColor = s.SwitchOnColor.ToUIColor();

            SetNativeControl(sw);
        }
    }
}

Usage in Portable

<local:CustomSwitch Margin="50" SwitchOnColor="Red"/>

Don't forget add xmlns(namespace) in Xmal

xmlns:local = "clr-namespace:YouAppName"

Answer 2

In a Xamarin.Form shared app (mine is release v.4.6) one can simply add a Color to the OnColor(Toggled true background) and ThumbColor (circular toggle) properties. This value accepts named colors, rgb, rgba, etc.

<Switch IsToggled="True" OnColor="Red" ThumbColor="#d9d9d9" />

Answer 3

I had a similar issue for IOS Xamarin Forms:

Change Switch color in IOS Xamarin Forms

I solved it using custom Render with next code:

[assembly: ExportRenderer(typeof(MySwitch), typeof(CustomSwitchRenderer))]
namespace CheckMyBus.App.ios.Renderers
{
public class CustomSwitchRenderer: SwitchRenderer
{       
    protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
    {
        Element.Toggled += ElementToggled;

        base.OnElementChanged(e);

        if (Control != null)
        {
            UpdateUiSwitchColor();
        }
    }

    private void ElementToggled(object sender, ToggledEventArgs e)
    {
        UpdateUiSwitchColor();
    }

    private void UpdateUiSwitchColor()
    {
        var temp = Element as Switch;

        if (temp.IsToggled)
        {
            Control.ThumbTintColor = Color.FromHex(ColorConstants.BlueHex).ToUIColor();
            Control.OnTintColor = Color.FromHex(ColorConstants.OblueLightHex).ToUIColor();
        }
        else
        {
            Control.ThumbTintColor =  Color.FromHex(ColorConstants.GrayHex).ToUIColor();
        }
    }
}
}

and in Android Xamarin Forms project its done using

<item name="colorAccent">#6495ED</item>

in style.xml for MainTheme.Base style.

So this looks like an easier solution than creating a custom switch, you just need something like this so CustomSwitchRenderer could work:

public class MySwitch: Switch
{
}

and in XAML:

<myControls:MySwitch x:Name="" />

Answer 4

I use this in my App.xaml styles:

<Style x:Key="MySwitches" TargetType="Switch">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup>
                            <VisualState x:Name="On">
                                <VisualState.Setters>
                                    <Setter Property="ThumbColor" Value="{StaticResource OnColor}" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Off">
                                <VisualState.Setters>
                                    <Setter Property="ThumbColor" Value="{StaticResource OffColor}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

Usage:

<Switch Style="{StaticResource MySwitches}" />

Easy and practical, without any cumbersome and unnecessary Custom Render.