How to create standard design of ios switch on android?

Question

I want to create a custom switch on android which looks like standard ios switch.

Please help me do it

Answer 1

We could implement it by using Custom Renderer

in Forms

Create a Custom Button

public class CustomSwitch : Button
    {

        public bool IsToggle { get; set; }


        public event EventHandler Toggled;

        public void OnToggled() =>
        Toggled?.Invoke(this, null);

    }

in Android Project

Firstly, we need install the package Xamarin.Android.SwitchButton from Nuget .

And in the ButtonRenderer

using Android.Content;

using Android.Widget;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

using App14.Droid;
using Com.Kyleduo.Switchbutton;
using App14;

[assembly:ExportRenderer(typeof(CustomSwitch),typeof(MySwitchRenderer))]
namespace App14.Droid
{
    public class MySwitchRenderer : ButtonRenderer
    {

        Context context { get;}

        public MySwitchRenderer(Context context) : base(context)
        {
            this.context = context;
        }

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

            if(Control!=null)
            {
                SwitchButton switchButton = new SwitchButton(context);

                //  switchButton.SetHighlightColor(Android.Graphics.Color.Green);

                switchButton.CheckedChange += SwitchButton_CheckedChange;

                SetNativeControl(switchButton);

            }

        }

        private void SwitchButton_CheckedChange(object sender, CompoundButton.CheckedChangeEventArgs e)
        {
            var customSwitch = Element as CustomSwitch;
            customSwitch.IsToggle = e.IsChecked;

            customSwitch.OnToggled();

        }
    }
}

Now in Forms we need to use Device class to add different Element on iOS and Android .

 <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">

   
        <OnPlatform x:TypeArguments="View">
           <On Platform="Android">
            <local:CustomSwitch Toggled="CustomSwitch_Toggled" />
          </On>
             <On Platform="iOS">
            <Switch Toggled="Switch_Toggled" />
         </On>
            
        </OnPlatform>
   

</StackLayout>


public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

   

    private void Switch_Toggled(object sender, ToggledEventArgs e)
    {
      
        Switch _switch = sender as Switch;
        ToggledChanged(_switch.IsToggled);
    }

    private void CustomSwitch_Toggled(object sender, EventArgs e)
    {
        CustomSwitch customSwitch = sender as CustomSwitch;
        ToggledChanged(customSwitch.IsToggle);
    }

  
    void ToggledChanged(bool isToggle)
    {
        DisplayAlert("Title", $"IsToggled{isToggle}", "OK");
    }
     
}

Answer 2

You need to create custom renderer for switch;

public class CustomSwitchRenderer : SwitchRenderer
{
    public CustomSwitchRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
    {
        base.OnElementChanged(e);
        if (e.OldElement != null || e.NewElement == null)
            return;
       /*
        Control.TrackDrawable.MinimumWidth holds the value of the tracker size.
        to change it, you need a new shape for tracker.
        */
        Control.SetTrackResource(Resource.Drawable.tracker);
    }
}

So you need to create a drawable for tracker under your android project.