Search code examples
androidxamarinmultiplatform

How to increase size of switch control Xamarin forms?


I recently just started working with Xamarin Forms and have the task of switching a working iOS project to Droid. It's a multiplatform project so I'm creating the switch in the shared project, but trying to manage its style in .Droid styles.xml or a custom renderer. I'm needing the control to be a bit larger for the tablets.

Using styles.xml, I was able to change the width of the switch control using this line:

<item name="switchMinWidth">120dp</item>

But to my knowledge there's no way to change the height of the control in this manner. I've tried using a custom renderer and used the SetHeight, SetMinHeight, and SetMinimumHeight methods of the Control (Android.Switch.Widget) but nothing is working.

Here's what the switches look like currently:

https://i.sstatic.net/uwenv.jpg

I've also tried doing a HeightRequest in the xaml itself but it doesn't change the actual height of the control. Is there anything I can do to make these switches a little taller?


Solution

  • How to increase size of switch control Xamarin forms?

    Switch height is controlled by <switch android:track="@drawable/shape_mythumb".../>, and the track's height determines the Switch's overall height. So yo could add this property in your custom SwitchRenderer :

    public class MySwitchRenderer : SwitchRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Switch> e)
        {
            base.OnElementChanged(e);
            if(Control != null)
            {
                Control.SetTrackResource(Resource.Drawable.track);
            }
        }
    }
    

    You need custom a Track layout, you could draw a shape whatever you want.

    Example :

    track.xml

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item
          android:drawable="@drawable/switch_track_on"
          android:state_checked="true"/>
    
      <item
          android:drawable="@drawable/switch_track_off"
          android:state_checked="false"/>
    
    </selector>
    

    switch_track_on.xml

    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
    
      <corners
           android:radius="15dp" />
      <size
           android:width="75dp"
           android:height="25dp" />
      <solid
          android:color="#6decacec" />
    
    </shape>
    

    switch_track_off.xml

    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >
    
      <corners
          android:radius="15dp" />
      <size
          android:width="75dp"
          android:height="25dp" />
      <solid
          android:color="#6db3b1b3" />
    </shape>