How to implement meter reading app using gaugeview in android

In this tutorial we will learn how to implement a meter app using gauge view in android. There is no default widget available to show meter reading in android. But it can be achieved by developing a custom view in android. Developing a custom gauge view from scratch will be also difficult , but there are lot of libraries also available in the market which will be having this feature. Here we will learn how to use the libraries in our project to implement a meter reading application.

Steps

  • Create new project in android studio
  • Compile the libraries and repositories inside build.gradle file
  • Add the gauge view widget to your layout file
  • Set the target value and animation codes inside activity’s java file

Create new project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Compile the libraries and repositories inside build.gradle file

Since i already mentioned we are developing this application using a library ,we need to compile the required library in our build.gradle file,First you need to add the following repository

allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}

and then the following dependency and click on Sync

compile 'com.github.thuat26:CustomGaugeView:1.0'

Add the gauge view widget to your layout file

Now we compiled the library so that we can display the gauge view widget just by calling the library class in your layout file. For displaying the gauge view just add the following code into your layout file.

<com.ntt.customgaugeview.library.GaugeView
android:id="@+id/gv_meter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
gauge:divisions="10"
gauge:rangeValues="@array/ranges"
gauge:scaleEndValue="100"
gauge:showInnerRim="false"
gauge:showNeedle="true"
gauge:showOuterBorder="false"
gauge:showOuterRim="true"
gauge:showOuterShadow="false"
gauge:showRangeText="true"
gauge:showRanges="true"
gauge:showScale="true"
gauge:subdivisions="1"
gauge:textUnit="Km/s"
gauge:textUnitColor="#000000"
gauge:textUnitSize="0.06"
gauge:textValueSize="0.15" />

We need to have an array which will contain the meter values. This array needs to placed inside your stings.xml file in which this array is referring in the above layout code.

<string-array name="ranges">
<item>0</item>
<item>10</item>
<item>20</item>
<item>30</item>
<item>40</item>
<item>50</item>
<item>60</item>
<item>70</item>
<item>80</item>
<item>90</item>
<item>100</item>
</string-array>

Set the target value and animation codes inside activity’s java file

We have a meter widget in our layout file, now we first we need to get reference of the widget in our layout file by adding the following code in your activity’s java file inside onCreate function

GaugeView gv_meter = (GaugeView) findViewById(R.id.gv_meter);

Now we need to add some line of code for setting the default value and some other settings.

gv_meter.setShowRangeValues(true);
gv_meter.setTargetValue(0);

The above value will set the default meter reading to zero or whatever value you set. Now the following code should be placed at the line where you get the final value to be fetched.

CountDownTimer timer = new CountDownTimer(10000, 2) {
@Override
public void onTick(long millisUntilFinished) {
gv_meter.setTargetValue(Float.valueOf(90));
}

@Override
public void onFinish() {
gv_meter.setTargetValue(Float.valueOf(90));
}
};
timer.start();

The above code will animate the meter from initial reading to the final reading you set in the above code. Now simply run the code and you will get the following output.

output

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *