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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to design a fuel meter using circular gauge?

Platform: Xamarin.Android |
Control: SfCircularGauge

How to design a fuel meter using Circular Gauge?


This article explains you to design a fuel meter using Circular Gauge.


To design a fuel meter using Circular Gauge,


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


        protected override void OnCreate(Bundle bundle)
      SfCircularGauge circularGauge = new SfCircularGauge(this);
            ObservableCollection<CircularScale> _circularScales = new ObservableCollection<CircularScale>();
            // adding  new CircularScale
            CircularScale circularScale = new CircularScale();
            circularScale.StartValue = 0;
            circularScale.EndValue = 100;
            circularScale.StartAngle = 180;
            circularScale.SweepAngle = 180;
            circularScale.RimWidth = 10;
            circularScale.RimColor = Color.ParseColor("#D14646");
            circularScale.MinorTicksPerInterval = 2;
            circularScale.ShowRim = false;
            circularScale.ShowLabels = false;
            circularScale.Interval = 5;




In fuel meter, the variations in fuel level can be identified by differentiating the Scale of Circular Gauge using Range in Circular Gauge. Fuel levels can be split up using range of different colors.



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


            CircularRange range1 = new CircularRange();

            range1.StartValue = 0;

            range1.EndValue = 40;

            range1.Offset = 0.0;

            range1.Width = 20;

            range1.Color = Color.Rgb(0, 102, 0);



            CircularRange range2 = new CircularRange();

            range2.StartValue = 40;

            range2.EndValue = 80;

            range2.Width = 20;

            range2.Offset = 0.0;

            range2.Color = Color.Rgb(255, 255, 102);


            CircularRange range3 = new CircularRange();

            range3.StartValue = 80;

            range3.EndValue = 100;

            range3.Offset = 0;

            range3.Width = 20;

            range3.Color = Color.Rgb(204, 0, 0);







            circularScale.CircularRanges = _circularRanges;




Add Major ticks and Minor ticks, which can be used to indicate the total number of fuel readings.


            //adding major ticks

            TickSetting majorTickstings = new TickSetting();

            majorTickstings.Color = Color.Black;

            majorTickstings.Size = 80;

            majorTickstings.Offset = -0.1;

            majorTickstings.Width = 10;

            circularScale.MajorTickSettings = majorTickstings;


            //adding minor ticks

            TickSetting minorTickstings = new TickSetting();

            minorTickstings.Color = Color.Black;

            minorTickstings.Offset = -0.1;

            minorTickstings.Size = 80;

            minorTickstings.Width = 10;

            circularScale.MinorTickSettings = minorTickstings;




In order to identify the exact level of fuel available, Range Pointer in Circular Gauge can be used as follows.


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


   RangePointer rangePointer = new RangePointer();

            rangePointer.Value = 60;

            rangePointer.Color = Color.Gray;

            rangePointer.Width = 4;

            rangePointer.Offset = 0.1;



            circularScale.CircularPointers = _circularPointers;



Headers in Circular Gauge can be used to render Text in Fuel Meter. Since positioning is possible with Header, different Texts can be positioned in the needed position.



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


            //adding header

            Header circularGaugeHeader = new Header();

            circularGaugeHeader.Text = "Fuel Meter";

            circularGaugeHeader.TextColor = Color.Gray;

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

            circularGaugeHeader.TextSize = 20;


            Header value = new Header();

            value.Text = "60%";

            value.TextColor = Color.Gray;

            value.Position = new PointF((float)0.5, (float)0.4);

            value.TextSize = 60;


            Header empty = new Header();

            empty.Text = "E";

            empty.TextColor = Color.Gray;

            empty.Position = new PointF((float)0.1, (float)0.5);

            empty.TextSize = 40;


            Header full = new Header();

            full.Text = "F";

            full.TextColor = Color.Gray;

            full.Position = new PointF((float)0.9, (float)0.5);

            full.TextSize = 40;






            circularGauge.Headers = _gaugeHeaders;





The following screenshot displays the Fuel Meter using CircularGauge.


Design a fuel meter using SfCircularGauge




2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile