Custom Radial Progress Indicator in Xamarin Forms
I was working on a health app and had to create a progress Indicator widget for it. I was searching for any readily available library that would do the job for me. It was the first Xamarin Project of my life with no prior experience on the platform. Timeline was very stringent and I was running out of time searching and trying libraries that would suffice the need. Eventually none of the libraries helped me. It’s pretty much easy to do the stuff on native Android & iOS due to available libraries but its not the same on Xamarin.
Soon I came across a graphic drawing library ‘SkiaSharp’ which supported drawing 2D graphics on canvas and going through the documentation I made my mind to give it a shot. Soon after spending couple of days in it finally I was able to suffice the requirement which brought a big relief to the developer inside me. This blog is a result of my time spent researching and developing a simple radial progress indicator
What is SkiaSharp?
Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products. Skia is sponsored and managed by Google, but is available for use by anyone under the BSD Free Software License. Microsoft has ported the Skia Library for Xamarin under the name SkiaSharp.
Documentation & Repository Links:
My Github Repository : RadialProgreess
1 STEP : Creating & Configuring Project
Firstly create a new Xamarin Forms blank project.
2 STEP : Installing SkiaSharp Nuget Package
Install the SkiaSharp.View.Forms nuget package in Forms App Root Directory.
3 STEP: Creating Utils Class
This class is solely dedicated to provide responsive functionality to our progress widget. User can have device with various screen sizes and hard coding XY coordinates won’t help us with different screen sizes. I have used a standard pixel screen size values as a reference and then using simple ratio proportion concepts to derive proportional values for user’s device.
4 STEP: Making up the View
The View is basically made up of canvas(SKCanvasView) view to be presented to drawGaugeAsync() function to draw the radial gauge over it.
The trick lies in using the sweepAngleSlider which is a slider widget and is hidden( IsVisible=”false”) in the view. It basically provides the change event to redraw the canvas on every data change.
Note : Just ignore the StackLayout View after SKCanvasView. It was a part of my project to have list after the progress Indicator and has been left untouched to keep the view intact as it is.
5 STEP: Drawing the Gauge & Animation
Xc Yc basically are our center points for our rectangle. X1Y1 defines our rectangles left top coordinates while X2Y2 defines rectangles bottom right coordinates. This rectangle will define the boundary for our radial circle.
SKPaint is used for defining styling for our graphic to be drawn.
SKRect defines our rectangle with coordinates (X1,Y1) (X2,Y2). SKPath is used to draw a graphic along a path. startAngle & sweepAngle are constants which define the start and end angle of our radial gauge.
So our SKPaint1 defines our radial gauge with grey background which will represent the whole progress indicator. Secondly SKPaint2 is our overlayed path which renders progress over empty gauge. SKPath1 & SKPath2 renders our empty and progress gauge respectively. canvas.DrawText() is used to render text with coordinates
Animating your progress indicator is basically redrawing the gauge at various data intervals and finally stopping at the data value.
You could basically understand the rest of code by reading my comments in the code.
Finally reached the END GOAL :) !!
