Increase height of slider without affecting thumb in Android App

Question

I am trying to increase height of a slider in a Xamarin Forms project using a custom renderer for Android. Following code works for the most part using ScaleY.

But when I move the slider the shadow also is scaled and the thumb become invisible. Is there a way to increase the size of the slider without affecting the thumb and size of the shadow?

Custom Renderer

[assembly: ExportRenderer(typeof(MySlider), typeof(MySliderRenderer))]
namespace CustomRenderer.Android
{
    public class MySliderRenderer : Xamarin.Forms.Platform.Android.SliderRenderer
    {
        public MySliderRenderer()
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Control.ProgressDrawable.SetColorFilter(
                new PorterDuffColorFilter(
                                            Xamarin.Forms.Color.FromHex("#F50F76").ToAndroid(),
                                            PorterDuff.Mode.SrcIn));

                // Set Progress bar Thumb color
                Control.Thumb.SetColorFilter(
                    Xamarin.Forms.Color.FromHex("#F50F76").ToAndroid(),
                    PorterDuff.Mode.SrcIn);

                //Change height
                Control.ScaleY = 10;

            }
        }

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);
        }
    }
}

XAML

<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
x:Class="CustomRenderer.MainPageXaml">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
    <Label Text="Hello, Custom Renderer 444!" />
    <local:MySlider Minimum="0" Maximum="400" Value="5"  />
</StackLayout>
</ContentPage>

MySlider

public class MySlider : Xamarin.Forms.Slider
{
    public MySlider()
    {

    }
}

score 1 · Accepted Answer · answered Aug 11 '17 at 02:35

1

Since we cannot write style to SeekBar in custom renderer, here is a workaround to increase the height of it.

You should be able to create a LayerDrawable, then you can remove the code Control.ScaleY = 10; and code for example like this:

GradientDrawable p = new GradientDrawable();
p.SetCornerRadius(10);
p.SetColor(Color.Rgb(0x70, 0xb2, 0x3f));
ClipDrawable progress = new ClipDrawable(p, GravityFlags.Left, ClipDrawable.Horizontal);
GradientDrawable background = new GradientDrawable();
background.SetColor(Color.Rgb(0xe0, 0xe0, 0xe0));
background.SetCornerRadius(10);
LayerDrawable pd = new LayerDrawable(new Drawable[] { background, progress });
Control.SetProgressDrawableTiled(pd);

answered Aug 11 '17 at 02:35

Grace Feng

16,564
2
22
45

Amazing. Thanks. Do you have an iOS equivalent iOS renderer? – LCJ Aug 14 '17 at 18:15
@Lijo, I'm sorry, I'm not familiar with iOS for now, the native control of `Slider` on iOS platform is `UISlider`, there're some discussions about increase the height of it in SO for example like [this](https://stackoverflow.com/questions/23320179/make-uislider-height-larger), but I can't test the solutions for Xamarin.Forms, maybe you can have a try. – Grace Feng Aug 15 '17 at 05:35

Increase height of slider without affecting thumb in Android App

1 Answers1

Linked