C# custom control (circle progress bar) Xamarin Forms

Question

I want to know the best way to create the similar thing of this image with Xamarin Forms:

I never created anything like that. I know how to use Progress bar, but not a 'circle progress bar'

Thank you for your help and for any tips.

EDIT : If you have a plugin/nuget to do that, it's cool, but I would like to know how to do it myself. I never made something like this.

Solution 1

My Trip Countdown is a Xamarin.Forms sample to show how to create goodlooking UI with Xamarin.Forms. This sample is based on Countdown timer designed by Victoria Sgarro.

Here You go: https://github.com/jsuarezruiz/MyTripCountdown

Solution 2

You can achieve this using Custom Renderer.

Xamarin's James Montemagno have a good guide regarding creating custom circular progress bar.

https://devblogs.microsoft.com/xamarin/using-custom-controls-in-xamarin-forms-on-android/

Official Documentation on Xamarin.Forms Custom Renderers can be found at https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/

Solution 3

I know it's an old post, but some people like me got this thread when we do a search for circular progress.

Andreas Hennig made a nice plugin, working for iOS and Android, you can install it from nuget: Progress Ring Control Plugin

XAML

1. Add XAML namespace:

   xmlns:control="clr-namespace:ProgressRingControl.Forms.Plugin;assembly=ProgressRing.Forms.Plugin"

2. Add the xaml:

   <control:ProgressRing RingThickness="20" Progress="0.5"/>

You can find it at:

https://github.com/AndreasHennig/ProgressRingPlugin

Solution 4

I found this post to have the best solution so far for a Xamarin Forms "circle progress bar." Basically you use two half circle images and rotate them based on the progress which I think is a really creative and elegant solution. No custom renderers needed!

Solution 5

I tried finding a library for Xamarin Forms but couldn't find any which had support for both Android as well as iOS. Moreover, there isn't much of choice to choose from different types of progress indicators. I ended up building up my own custom radial progress indicator widget in Xamarin Forms using SkiaSharp which supported both Android & iOS.

Tutorial Link: https://medium.com/@kpshinde25/custom-radial-progress-indicator-in-xamarin-forms-c7ed81840c1e

You can modify the code to have a circle, multi-circle indicators etc as per your requirement.

View more solutions

Comments

[Admin]

I like James Montemagno tutorial but the renderer is only for Android. And i want to make something for IOS too

[Abdul Muhaymin]

Your questions was about how to create Circular Progress Bar, the solutions is to use "Custom Renderer" Any way you could use components.xamarin.com/gettingstarted/radialprogress component

[Sanket]

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes.

[Emil]

do you know if there is a way to acomplish this for uwp?

[LCJ]

@AbdulMuhaymin The radialprogress is for native solution, isn't it. The questions is for Xamarin Forms that should support iOS, Android.

[Fatikhan Gasimov]

How can I show the number of the progress bars in the middle of ProgressRing?

[Jonathan Parker]

The code for this is still available here github.com/billreiss/xamlnative/tree/master/XamarinForms/…