Xamarin Forms Custom progress bar blurred

Question

I´m using a custom renderer to customize the height and color of my progress bar, but my progress bar gets blurred:

My CustomRenderer looks like this:

public class ColorProgressBarRenderer : ProgressBarRenderer
{
    public ColorProgressBarRenderer(Context context) : base(context)
    {
    }

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

        if (e.NewElement == null)
        {
            return;
        }

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

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == ColorProgressBar.BarColorProperty.PropertyName)
        {
            UpdateBarColor();
        }
    }

    private void UpdateBarColor()
    {
        var element = Element as ColorProgressBar;

        Control.ProgressTintList = Android.Content.Res.ColorStateList.ValueOf(element.BarColor.ToAndroid());
        Control.ScaleY = 10f;
    }
}

My CustomProgressBar looks like this:

public class ColorProgressBar : ProgressBar
{
    //public static BindableProperty BarColorProperty = BindableProperty.Create<ColorProgressBar, Color>(p => p.BarColor, default(Color));
    public static BindableProperty BarColorProperty = BindableProperty.Create(nameof(BarColor), typeof(Color), typeof(ColorProgressBar), default(Color));

    public Color BarColor
    {
        get { return (Color)GetValue(BarColorProperty); }
        set { SetValue(BarColorProperty, value); }
    }
}

This only happens in Android, with my iOS Renderer all is working fine! Why this is happen?

Answer 1

You can try this advanced progress bar. https://www.nuget.org/packages/MultiColor.ProgressBar/ Documentation: https://github.com/udayaugustin/ProgressBar/blob/master/README.md

It supports multi color. It has properties like

• Height
• Width
• Corner Radius and etc