Custom Progress Ring in Xamarin iOS

Hi Friends ,

Today I would like to create a custom  progress ring  as below .In this progress ring you can create progress with change size , progress width , background ,ring color , label indicator style color, font size etc.

 Create a project as Xamarin forms .

1. Create a class name 

CustomProgressRing and three bindable property 

  public class CustomProgressRing : View
    {
        public static readonly BindableProperty ProgressValueProperty =
            BindableProperty.Create<CustomProgressRing, double>
                  (p => p.ProgressValue, double.NaN, BindingMode.TwoWay, propertyChanged: (bindable, oldValue, newValue) =>
                  {
                  var control = (CustomProgressRing)bindable;
                      control.ProgressValue = newValue;

                  });

        public double ProgressValue
        {
            get { return (double)GetValue(ProgressValueProperty); }
            set { SetValue(ProgressValueProperty, value); }
        }


        public static readonly BindableProperty ProgressRadiusProperty =
            BindableProperty.Create<CustomProgressRing, double>
           (p => p.ProgressRadius, 0.7, BindingMode.TwoWay, propertyChanged: (bindable, oldValue, newValue) =>
           {
                    var control = (CustomProgressRing)bindable;
               control.ProgressRadius = newValue;

           });

        public double ProgressRadius
        {
            get { return (double)GetValue(ProgressRadiusProperty); }
            set { SetValue(ProgressRadiusProperty, value); }
        }



        public static readonly BindableProperty ProgressColorProperty =
            BindableProperty.Create("ProgressColor", typeof(Color), typeof(CustomProgressRing), Color.White, BindingMode.TwoWay, null, null);
        public Color ProgressColor
        {
            get { return (Color)GetValue(ProgressColorProperty); }
            set { SetValue(ProgressColorProperty, value); }
        }


        public static readonly BindableProperty LabelFontSizeProperty =
            BindableProperty.Create("LabelFontSize", typeof(int), typeof(CustomProgressRing), 8, BindingMode.TwoWay, null, null);
        public float LabelFontSize
        {
            get { return (int)GetValue(LabelFontSizeProperty); }
            set { SetValue(LabelFontSizeProperty, value); }
        }

        public static readonly BindableProperty IsProgressLabelProperty =
            BindableProperty.Create("IsProgressLabel", typeof(bool), typeof(CustomProgressRing), true, BindingMode.TwoWay, null, null);
        public bool IsProgressLabel
        {
            get { return (bool)GetValue(IsProgressLabelProperty); }
            set { SetValue(IsProgressLabelProperty, value); }
        }
       
        public static readonly BindableProperty ProgressRingWidthProperty =
            BindableProperty.Create("ProgressRingWidth", typeof(int), typeof(CustomProgressRing), 6, BindingMode.TwoWay, null, null);
        public int ProgressRingWidth
        {
            get { return (int)GetValue(ProgressRingWidthProperty); }
            set { SetValue(ProgressRingWidthProperty, value); }
        }
       

        public static readonly BindableProperty BackColorProperty =
            BindableProperty.Create("BackColor", typeof(Color), typeof(CustomProgressRing), Color.Blue, BindingMode.TwoWay, null, null);
        public Color BackColor
        {
            get { return (Color)GetValue(BackColorProperty); }
            set { SetValue(BackColorProperty, value); }
        }

        public static readonly BindableProperty LabelColorProperty =
            BindableProperty.Create("BackColor", typeof(Color), typeof(CustomProgressRing), Color.Black, BindingMode.TwoWay, null, null);
        public Color LabelColor
        {
            get { return (Color)GetValue(LabelColorProperty); }
            set { SetValue(LabelColorProperty, value); }
        }



        public event EventHandler ValueChanged;
        public void NotifyValueChanged()
        {
            if (ValueChanged != null)
            {
                ValueChanged(this, new EventArgs());
            }
        }
    }

2. Custom Renderer.

We have create four classes 

1. CustomProgressRingRenderer :- This used for custom renderer set value like colors, size etc.
2. BigRadialProgressLayer : - This class used for create ring and background etc.
3.   RadialProgressLayer : - This class for calculate angle and properties etc.
4. BezierPathGenerator -: This used for draw circle and lines.

 You can download or see the code for all classes.

3. Implement control 

Xaml Page 

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:customProgressRing"

    x:Class="customProgressRing.customProgressRingPage">
      <ContentPage.Content>
     <StackLayout Margin="10" Spacing="20" Padding="20">
            <Button Text="Start" VerticalOptions="Center" HorizontalOptions="Center" Clicked="Progress_Tabbed" />

            <local:CustomProgressRing ProgressRadius="1.7" 

IsProgressLabel="false" ProgressRingWidth="1" BackColor="Red" 

ProgressColor="Blue" LabelColor="Olive" LabelFontSize="36"

 x:Name="progressRing" HorizontalOptions="FillAndExpand" 

 VerticalOptions="FillAndExpand" />
          </StackLayout>
        </ContentPage.Content>

</ContentPage>

Code behind 
We are implement a sample progress bar 

 void Handle_Clicked(object sender, System.EventArgs e)

  {
           
    progressBar.ProgressValue = 0;                   Xamarin.Forms.Device.StartTimer(TimeSpan.FromSeconds(.2), OnTimer);

  }

 private bool OnTimer()

 {

                    progressRing.ProgressValue = progressRing.ProgressValue + .02;

 return true;

 

}

.




You can find source code as below url

https://github.com/rahultripa/CustomRing