We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to use a Circular Gauge control as a Circular Progress Bar?

How to use a circular gauge control as a circular progress bar?

This article explains you to design a circular progress bar using Circular Gauge.

 

Circular Gauge can be used as circular progress bar for various scenarios and control can be customized accordingly.

 

In this article, three gauges are added in a layout each can be used for different scenarios.

 

  1. Circular gauge for finding percentage of Shareholders in a company.

 

Create a Xamarin Android application and initialize SfCircularGauge control in it. Add Scale with suitable angles for Fuel Meter using StartAngle and SweepAngle

 

 

   SfCircularGauge circularGauge = new SfCircularGauge(this);

            ObservableCollection<CircularScale> _circularScales = new ObservableCollection<CircularScale>();

            ObservableCollection<CircularPointer> _circularPointers = new ObservableCollection<CircularPointer>();

            ObservableCollection<Header> _gaugeHeaders = new ObservableCollection<Header>();

            // adding new CircularScale

          CircularScale = new CircularScale();

            circularScale.StartValue = 0;

            circularScale.EndValue = 100;

            circularScale.StartAngle = 90;

            circularScale.SweepAngle = 360;

            circularScale.RimWidth = 30;

            circularScale.RimColor = Color.ParseColor("#606060");

            circularScale.MinorTicksPerInterval = 0;

            circularScale.ShowRim = true;

            circularScale.ShowLabels = false;

            circularScale.ShowTicks = false;

            circularScale.Interval = 5;

            circularScale.RadiusFactor = 0.6;

 

 

 

Range Pointers can be used to know the percentage of Share Holders available.

 

 

 

 

RangePointer = new RangePointer();

            rangePointer.Value = 60;

            rangePointer.Color = Color.ParseColor("#CC0000");

            rangePointer.Width = 30;

            rangePointer.Offset = 0.0;

            _circularPointers.Add(rangePointer);

 

            circularScale.CircularPointers = _circularPointers;

            _circularScales.Add(circularScale);

 

            scale.Pointers = pointers;

            scales.Add(scale);

            circularGauge.Scales = scales;

 

 

Add headers to add percentage value of shareholders, since header can be positioned as required.

 

 

 

            Header header1 = new Header();

            header1.Text = "Share Holder";

            header1.TextColor = Color.Gray;

            header1.Position = new PointF((float)0.98, (float)0.6);

  header1.TextSize = 20;

 

            Header header2 = new Header();

            header2.Text = "60%";//Pointer Value can be mapped directly to header Text as follows—[ header2.Text= (rangePointer.Value).ToString();]

            header2.TextColor = Color.Gray;

            header2.Position = new PointF((float)0.5, (float)0.6);

            header2.TextSize = 30;

 

            _gaugeHeaders.Add(header1);

            _gaugeHeaders.Add(header2);

            circularGauge.Headers = _gaugeHeaders;

            circularGauge.CircularScales = _circularScales;

            circularGauge.SetBackgroundColor(Color.Black);

 

 

 

  1. Circular gauge for finding progress of total Investors in a share market.

 

Create a Xamarin application and initialize SfCircularGauge control in it. Add Scale with suitable angles for Fuel Meter using StartAngle and SweepAngle

 

 

        SfCircularGauge circularGauge1 = new SfCircularGauge(this);

 

            ObservableCollection<CircularScale> _circularScales1 = new ObservableCollection<CircularScale>();

            ObservableCollection<CircularPointer> _circularPointers1 = new ObservableCollection<CircularPointer>();

            ObservableCollection<Header> _gaugeHeaders1 = new ObservableCollection<Header>();

            // adding new CircularScale

            CircularScale circularScale1 = new CircularScale();

            circularScale1.StartValue = 0;

            circularScale1.EndValue = 100;

            circularScale1.StartAngle = 90;

            circularScale1.SweepAngle = 360;

            circularScale1.RimWidth = 30;

            circularScale1.RimColor = Color.ParseColor("#B2FF66");

            circularScale1.MinorTicksPerInterval = 0;

            circularScale1.ShowRim = true;

            circularScale1.ShowLabels = false;

            circularScale1.ShowTicks = true;

            circularScale1.Interval = 5;

            circularScale1.RadiusFactor = 0.6;

 

 

Using Major and Minor Ticks, progress bar can be customized in circular gauge

 

 

 

            //adding major ticks

            TickSetting majorTickstings = new TickSetting();

            majorTickstings.Color = Color.Black;

            majorTickstings.Size = 80;

            majorTickstings.Offset = -0.1;

            majorTickstings.Width = 10;

            circularScale1.MajorTickSettings = majorTickstings;

 

            //adding minor ticks

            TickSetting minorTickstings = new TickSetting();

            minorTickstings.Color = Color.Black;

            minorTickstings.Offset = -0.1;

            minorTickstings.Size = 80;

            minorTickstings.Width = 10;

            circularScale1.MinorTickSettings = minorTickstings;

 

 

Add RangePointer in order to highlight the Investors percentage from Total.

 

 

RangePointer rangePointer1 = new RangePointer();

            rangePointer1.Value = 48;

            rangePointer1.Color = Color.Black;

            rangePointer1.Width = 30;

            rangePointer1.Offset = 0.0;

            _circularPointers1.Add(rangePointer1);

 

            circularScale1.CircularPointers = _circularPointers1;

            _circularScales1.Add(circularScale1);

 

 

Finally, Add header to indicate percentage value of Investors, since header can be positioned as required.

Header header3 = new Header();

            header3.Text = "Investors";

            header3.TextColor = Color.Gray;

            header3.Position = new PointF((float)0.05, (float)0.6);

  header3.TextSize = 20;

 

            Header header4 = new Header();

            header4.Text = "48%";//Pointer Value can be mapped directly to header Text as follows—[ header2.Text= (rangePointer1.Value).ToString();]

 

            header4.TextColor = Color.Gray;

            header4.Position = new PointF((float)0.5, (float)0.6);

            header4.TextSize = 30;

 

            _gaugeHeaders1.Add(header3);

            _gaugeHeaders1.Add(header4);

            circularGauge1.Headers = _gaugeHeaders1;

            circularGauge1.CircularScales = _circularScales1;

            circularGauge1.SetBackgroundColor(Color.Black);

 

 

  1. Circular gauge for finding percentage of Shareholders in a company.

 

Create a Xamarin application and initialize SfCircularGauge control in it. Add Scale with suitable angles for Fuel Meter using StartAngle and SweepAngle

 

 

            SfCircularGauge circularGauge2 = new SfCircularGauge(this);

 

            ObservableCollection<CircularScale> _circularScales2 = new ObservableCollection<CircularScale>();

            ObservableCollection<CircularRange> _circularRanges2 = new ObservableCollection<CircularRange>();

            ObservableCollection<Header> _gaugeHeaders2 = new ObservableCollection<Header>();

 

            // adding new CircularScale

            CircularScale circularScale2 = new CircularScale();

            circularScale2.StartValue = 0;

            circularScale2.EndValue = 100;

            circularScale2.StartAngle = 90;

            circularScale2.SweepAngle = 360;

            circularScale2.RimWidth = 5;

            circularScale2.RimColor = Color.ParseColor("#B2FF66");

            circularScale2.MinorTicksPerInterval = 2;

            circularScale2.ShowRim = false;

            circularScale2.ShowLabels = false;

            circularScale2.ShowTicks = false;

            circularScale2.Interval = 5;

            circularScale2.RadiusFactor = 0.3;

 

 

Ranges can be added to circular gauge, by which levels of progress can be differentiated using different colors.

 

 

 

CircularRange range1 = new CircularRange();

            range1.StartValue = 0;

            range1.EndValue = 70;

            range1.Offset = 0.0;

            range1.Width = 10;

            range1.Color = Color.ParseColor("#CC0000");

 

 

            CircularRange range2 = new CircularRange();

            range2.StartValue = 70;

            range2.EndValue = 85;

            range2.Width = 5;

            range2.Offset = 0.0;

            range2.Color = Color.Black;

 

            CircularRange range3 = new CircularRange();

            range3.StartValue = 85;

            range3.EndValue = 100;

            range3.Offset = 0;

            range3.Width = 80;

            range3.Color = Color.Yellow;

 

            _circularRanges2.Add(range1);

            _circularRanges2.Add(range2);

            _circularRanges2.Add(range3);

 

 

            circularScale2.CircularRanges = _circularRanges2;

            _circularScales2.Add(circularScale2);

 

 

Add Header, to know the profit percentage, using header the position can be altered as required.

            //adding header

            Header circularGaugeHeader = new Header();

            circularGaugeHeader.Text = "Profit = 20%";//Range Value can be mapped directly to header Text as follows—[ header2.Text= (range3.Value).ToString();]

 

            circularGaugeHeader.TextColor = Color.Gray;

            circularGaugeHeader.Position = new PointF((float)0.7, (float)0.5);

            circularGaugeHeader.TextSize = 25;

 

            _gaugeHeaders2.Add(circularGaugeHeader);

            circularGauge2.Headers = _gaugeHeaders2;

            circularGauge2.CircularScales = _circularScales2;

            circularGauge2.SetBackgroundColor(Color.Black);

           

 

 

Finally, add all the three circular gauge in layout and set content as that layout.

            ViewGroup.LayoutParams layoutparams = new ViewGroup.LayoutParams(700,550);

            circularGauge.LayoutParameters = layoutparams;

            circularGauge1.LayoutParameters = layoutparams;

            circularGauge2.LayoutParameters = layoutparams;

 

            LinearLayout layout = new LinearLayout(this);

            layout.Orientation = Orientation.Vertical;

            layout.SetBackgroundColor(Color.Black);

            layout.SetVerticalGravity(GravityFlags.Fill);

            layout.AddView(circularGauge);

            layout.AddView(circularGauge1);

            layout.AddView(circularGauge2);

 

            SetContentView(layout);

 

 

The following screenshot displays the circular progress bar using circular gauge.

 

 

 

 

 

 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
6619 04/12/2016 04/12/2016 Xamarin.Android SfCircularGauge
Did you find this information helpful?
Comments
Chad Church [Syncfusion] Dec 09, 2016
Hi Support,

Please provide a link to download this sample.

Thanks,
Chad
Reply
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.