Custom made Xamarin.Forms Radial Progress control

Although there are many controls that are missing from Xamarin.Forms the good thing is that we can customize each built in control and create our own controls that will fulfill our App requirements. In this example I’ll demonstrate the implementation and simple usage of a custom build Xamarin.Forms Radial Progress control.

RadialProgressDemo2

How to create custom control with a renderer

First thing we need to implement is Xamarin.Forms control that will have bindable properties. The implementation in this case is in the RadialProgress class.

public class RadialProgress : View

The other parts that needs to be implemented is the Custom Renderer for each platform. For now, I’ve implemented Renderer for Android platform and soon I hope I’ll have implementation for iPhone and Windows as well.

We basically need to override tho methods for this custom control renderer, one is

void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)

where will detect all control property changes that are being bind. And the other is

void OnDraw(Canvas canvas)

in which we are doing the actual drawing of the custom made Xamarin.Forms control.

Check the implementation on GitHub and test the component with the demo app.

Basic usage

This radial progress control contains many properties that you can set to adjust it to the application needs.

RadialProgressColor

Almost everything is adjustable on the control so you can set:

  • Max value
  • Border Color
  • Fill Color
  • Max Reached Border Color
  • Progress Text
  • Progress Type (Percentage or Progress)
  • Text Color

Here is a sample code how can make instance of the radial progress control and setting some of the properties as we want :

var radialProgressStats1 = new RadialProgress
{
Progress = 81,
Diameter = 100,
BorderColor = Color.Blue,
FillColor = Color.Green,
TextColor = Color.White,
DisplayMode = DisplayModeTypes.ShowPercentage
};

I hope you’ll find this control to be useful to you.

Happy coding… until the next time!

 

Advertisements

3 thoughts on “Custom made Xamarin.Forms Radial Progress control

  1. Nice article, have you any thoughts on using DispatchDraw() instead of OnDraw() in the android renderer w.r.t to which one gives the best speed/resource usage?
    Many thanks
    Steven

    Liked by 1 person

    • Hi Steven,

      thank you for your comment. I haven’t consider using DispatchDraw() instead of OnDraw() and measure the performances. But I’ll put this into consideration when developing my new component and publish any relevant results(if any)

      Regards,
      Jordan

      Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s