How do I make a ProgressBar with rounded corners using Xamarin Forms - xamarin

Question

So my goal is to create a ProgressBar with rounded corners. This seems to be way harder than what it should be. I've tried looking at examples on StackOverflow but most of them are outdated or is referring to Android Studio which is NOT what I am working with.
As far as I know, I need to create a whats called "Custom Renderer" which is essentially a class that inherits from ProgressBarRenderer. And then change most of the properties there, which seems kinda silly since the UI should be done using XAML in my opinion.
I keep running into multiple issues when trying to create the custom renderer.
The first one being this
I've already installed Xamarin.Forms and it still keeps throwing that error.
And then there is a issue regarding the constructor. The constructor that doesn't take any parameters is obsolete and doesn't work anymore and it requires me to add a Context which I can't either because it throws the same error as above.
How do I properly create a progressbar with rounded corners and text in the middle indicating how much % it's at?

Answer 1

You should add proper reference to use the ProgressBarRenderer:
using App498.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
The custom renderer should look like this:
[assembly: ExportRenderer(typeof(Xamarin.Forms.ProgressBar), typeof(myProgressBarRenderer))]
namespace App498.Droid
{
public class myProgressBarRenderer : ProgressBarRenderer {
public myProgressBarRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e)
{
base.OnElementChanged(e);
}
}
}
If you want to add round corner to progress bar, check this thread.

Answer 2

I would refer you to SkiaSharp, graphics library, that enables you to create... well everything.
See the documentation here:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/
You'll need to play around for a while to get used to work with it, but it's quite intuitive and easy to work with.
To achieve round corners, you'll need to work with paths, described in here:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/curves/clipping
By a chance I also needed a progress bar in my app. I've drawn a picture with transparent line within for the progress to be shown, merged it with green rectangle (the progress itself) and voila, you've got the progress bar. When you need to update the progress, you just redraw the progress bar.
There are surely plenty of other solutions, but this one I reccomend as I know it will work fine.
Hapyy coding ;)