Android Gauge View

Posted on by Serge Helfrich

With all these Raspberry Pi and Arduino projects in mind I am developing this gauge view for IoT apps on Android. There are some alternatives around, but I’m not quite satisfied with them as they either aren’t customizable enough to my needs or do not render well on the latest Android releases.

The library hasn’t been published to JCenter yet. Clone or download the GitHub project to use it: github.com/Pygmalion69/Gauge. Then import the ‘gauge’ module into your own project. Note that it is a work in progress (feel free to contribute!).

At present the View can only be declared and styled in XML. Check the README.md file for all available attributes and the demo app module to see them in action.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:gauge="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="de.nitri.gaugedemo.MainActivity">
 
    <de.nitri.gauge.Gauge
        android:id="@+id/gauge"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        gauge:labelTextSize="42"
        gauge:maxValue="1000"
        gauge:minValue="0"
        gauge:totalNicks="120"
        gauge:valuePerNick="10" />
 
<!-- ... -->
 
<?LinearLayout>

The gauge value can easily be set programmatically. Use setValue() to set the needle to a float value. Use moveToValue() to animate to this value.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Gauge gauge = (Gauge) findViewById(R.id.gauge);
 
        gauge.moveToValue(800);
 
        HandlerThread thread = new HandlerThread("GaugeDemoThread");
        thread.start();
        Handler handler = new Handler(thread.getLooper());
 
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                gauge.moveToValue(300);
            }
        }, 2800);
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                gauge.moveToValue(550);
            }
        }, 5600);
 
    }

That’s all there is to it for the basic gauge to work.

8 thoughts on “Android Gauge View”

  2. Pingback: Consuming REST on Android with Retrofit, ViewModel and LiveData – Pygmalion

  4. How do the Textsize and min/max value text size work ?
    On a Galaxy S6, setting a text size of 60 is perfect where as on a Galaxy Tab3, the same ratio needs a setting of 20.
    Also the values on the ticks are way to big on the Tab3 but perfect on the S6 ?

    I am displaying the gauges within constraints% so they are the correct size dials, just the text is all wrong ?

    Thanks !

  5. can i add an image as a background of the dial? just below the needle…??

  6. how can i make the number in my gauge in different colors, for example, half green and half blue
    gauge:scaleColor=”#FF0000″ this will allow me to color all the number in my gauge but I want different colors in the same gauge how can I accomplish that, is it possible?

  7. how can I change the color of the number in my gauge, my problem is that want to divide 3 colors upon my gauge, for example, 0 to 20 in red, 20 to 40 in green and 40 to 70 in black, is it possible, how can I do that

    I need your help, please.

Comments are closed.