0

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 enter image description here 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?

Riley Varga
  • 670
  • 1
  • 5
  • 15
  • you cannot mix xamarin.forms with xamarin.android. As far as I know the progressbarrender is a native xamarin android class. – tuke307 Dec 31 '20 at 00:16
  • You would create a new custom class that inherits from Xamarin.Forms.ProgressBar and add a corner radius property. Next you would use a custom renderer on each platform to implement the native view code yourself. I personally use a progress bar renderer to make it any height for large, chunky progress bars. Its very common to override the drawing of this control natively as both platforms (ios & android) provide rather lacklustre progress bars – Axemasta Dec 31 '20 at 13:57

2 Answers2

0

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.

nevermore
  • 15,432
  • 1
  • 12
  • 30
0

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 ;)

Nys
  • 99
  • 1
  • 9