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

3 mins read

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.

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);

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);

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.

Did you find this information helpful?

Yes

Comments

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

Access denied