CODEWITHSUNDEEP
androidviewandroid-animationandroid-custom-viewgauge
oikonomopo
oikonomopo

Reputation: 4065

Simple gauge view like speedmeter in android?

I want to have a simple gauge view where i will define the start value and the end value and have a pointer to show given variable value.

enter image description here

So i can show a given value like speedmeter. For example if my the value of a textView is 1300, then next to the textview i want to have this custom meter view animation like this!

It is possible? Any existing example code?

Upvotes: 22

Views: 85596

Answers (8)

Salman Shaikh
Salman Shaikh

Reputation: 331

I've developed a library in Kotlin that allows Android developers to easily create custom gauge and speedometer views. It's called Gauge-Library-Android, and it's designed to be lightweight and flexible, enabling seamless integration into your Android projects.

enter image description here

You can find the library on GitHub:
šŸ”— Gauge-Library-Android

The library provides an intuitive API for configuring a variety of gauge views, such as speedometers or battery level indicators, with customizable features like colors, ranges, and more. It simplifies the process of creating visually appealing gauges without having to reinvent the wheel.

For a detailed walkthrough on how to implement and use this library, check out my article on Medium:
šŸ”— Building Gauge-Library-Android: A Custom UI Gauge for Android Developers

Feel free to contribute or leave any feedback on GitHub!

Upvotes: 0

Jigs Patel
Jigs Patel

Reputation: 11

Use this : Sample Project

It can easily be added to your Gradle project:

repositories {
    maven {
        url 'https://www.jitpack.io'
    }
}

dependencies {
implementation 'com.jignesh13.speedometer:speedometer:1.0.0'
}

The views are declared in XML:

    <com.jignesh13.speedometer.SpeedoMeterView
        android:id="@+id/speedometerview"
        android:layout_width="250dp"
        android:layout_height="250dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.453"
        app:layout_constraintStart_toStartOf="parent"
        app:backimage="@android:color/black"
        app:needlecolor="#fff"
        app:removeborder="false"
        app:linecolor="#fff"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.079" />

Upvotes: 0

Samuele
Samuele

Reputation: 129

On this site you will find some free customizable gauges.

ScComponents

Very easy to install and well documented. For example you can have for free something like this in 5 minutes following the instruction below.

enter image description here

Go on the above linked website. Click the GR004 and after the popup appear click on "Download for FREE". The library will downloaded, unzip and follow the instruction to install the library (aar file) inside your Android project.

Write this code in your XML layout and your gauge will done:

<com.sccomponents.gauges.gr004.GR004
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

You have many XML options to customize it:

  • sccAnimDuration
  • sccEnableTouch
  • sccInverted
  • sccFontName
  • sccLabelsSizeAdjust
  • sccMajorTicks
  • sccMaxValue
  • sccMinorTicks
  • sccMinValue
  • sccShowContour
  • sccShowLabels
  • sccText
  • sccValue

And the related function by coding.

Upvotes: 4

Pygmalion
Pygmalion

Reputation: 571

I made this one a while ago. Feel free to clone and modify. (It takes some ideas from the old Vintage Thermometer.)

github.com/Pygmalion69/Gauge

enter image description here

It can easily be added to your Gradle project:

repositories {
    maven {
        url 'https://www.jitpack.io'
    }
}

dependencies {
    compile 'com.github.Pygmalion69:Gauge:1.1'
}

The views are declared in XML:

<de.nitri.gauge.Gauge
    android:id="@+id/gauge1"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:layout_weight="0.75"
    gauge:labelTextSize="42"
    gauge:maxValue="1000"
    gauge:minValue="0"
    gauge:totalNicks="120"
    gauge:valuePerNick="10"
    gauge:upperText="Qty"
    gauge:lowerText="@string/per_minute" />

Here's an example of setting the values programmatically:

    final Gauge gauge1 = (Gauge) findViewById(R.id.gauge1);
    final Gauge gauge2 = (Gauge) findViewById(R.id.gauge2);
    final Gauge gauge3 = (Gauge) findViewById(R.id.gauge3);
    final Gauge gauge4 = (Gauge) findViewById(R.id.gauge4);

    gauge1.moveToValue(800);

    HandlerThread thread = new HandlerThread("GaugeDemoThread");
    thread.start();
    Handler handler = new Handler(thread.getLooper());

    handler.postDelayed(new Runnable() {
        @Override
        public void run() {
            gauge1.moveToValue(300);
        }
    }, 2800);
    handler.postDelayed(new Runnable() {
        @Override
        public void run() {
            gauge1.moveToValue(550);
        }
    }, 5600);

    HandlerThread gauge3Thread = new HandlerThread("Gauge3DemoThread");
    gauge3Thread.start();
    Handler gauge3Handler = new Handler(gauge3Thread.getLooper());
    gauge3Handler.post(new Runnable() {
        @Override
        public void run() {
            for (float x = 0; x <= 6; x += .1) {
                float value = (float) Math.atan(x) * 20;
                gauge3.moveToValue(value);
                try {
                    Thread.sleep(100);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    });

    gauge4.setValue(333);

Upvotes: 5

oikonomopo
oikonomopo

Reputation: 4065

Another one i found at Evelina Vrabie's blog, used it and worked perfect!

Look at Evelina Vrabie's GitHub. It has a gauge library and some samples to interact with.

Big thanks to the owner Evelina Vrabie!

enter image description here

However it is not working on XHDPI/Few versions of android devices (above 4). Problem is the text in gauge view.

Upvotes: 21

user6602265
user6602265

Reputation:

I don't know whether the late answer is going to help or not. I also came to the same situation where i want to use a gauge to visualize data, since gauge is not given as widget in android, as a enthusiast i went for libraries like above which can be found through various links in the Internet, although it was quite helpful(thanks to the wonderful authors of it..) i find myself difficult to visualize the during certain situations, so another solution what i have done is for my app is i integreated the JavaScript gauges into my android application. You can do that by the following steps

  1. Create an asset folder in our project-look this link and you will see how to create an asset folder if someone don't knows about it.
  2. Next one is you have design an html page on how your page sholud look like, for eg- header,no.of guages etc... and place it in the folder asset.
  3. There are many sites which provide the guages like This is one site or you can browse other sites and take whatever you feel cool...!! take it all including .js files and place it in the asset folder.
  4. Android provides a class for handling webiview called "WebViewClient" you can browse more to know more about it in internet

  5. This is sample code for viewing the webview content..

    web = (WebView) findViewById(R.id.webview01); progressBar = (ProgressBar) findViewById(R.id.progressBar1);

    web.setWebViewClient(new myWebClient());

  web.getSettings().setJavaScriptEnabled(true);
            web.post(new Runnable() {
                @Override
                public void run() {
                    web.loadUrl("file:///android_asset/fonts/guage.html");
                }
            });

The above for loading the html & javscript.

 public class myWebClient extends WebViewClient
{
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // TODO Auto-generated method stub
        super.onPageStarted(view, url, favicon);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // TODO Auto-generated method stub
        progressBar.setVisibility(View.VISIBLE);
        view.loadUrl(url);
        return true;

    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // TODO Auto-generated method stub
        super.onPageFinished(view, url);

        progressBar.setVisibility(View.GONE);
    }
}

This the webview class

  1. You can also send data from activity to html page.. Refer This link

Kindly read through all, corrections are welcomed..!!

Upvotes: 2

Sulejman Sarajlija
Sulejman Sarajlija

Reputation: 424

All other gauges you recommended have bugs and don't run fine on Kitkat and Lollipop. Also there is no Android Studio and gradle friendly library here.

Here's git repo for the more recent one updated for Lollipop you can use with Gradle:

enter image description here

After you include library in your project add gaugelibrary to xml layout of your activity:

<io.sule.gaugelibrary.GaugeView
 android:id="@+id/gauge_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#ffffff"
 gauge:showOuterShadow="false"
 gauge:showOuterRim="false"
 gauge:showInnerRim="false"
 gauge:needleWidth="0.010"
 gauge:needleHeight="0.40"
 gauge:scaleStartValue="0"
 gauge:scaleEndValue="100"
 />

This will show static gauge without needle. To instantiate needle with random animation you need to do that in activity class file. See how it's done here:

package io.sule.testapplication;

import android.app.Activity;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.Menu;
import android.view.MenuItem;

import java.util.Random;

import io.sule.gaugelibrary.GaugeView;

public class MainActivity extends Activity {
   private GaugeView mGaugeView;
   private final Random RAND = new Random();

   @Override
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);

      mGaugeView = (GaugeView) findViewById(R.id.gauge_view);
      mTimer.start();
   }


   private final CountDownTimer mTimer = new CountDownTimer(30000, 1000) {

      @Override
      public void onTick(final long millisUntilFinished) {
         mGaugeView.setTargetValue(RAND.nextInt(101));
      }

      @Override
      public void onFinish() {}
   };
}

This will instantiate needle and make it animate moving to random values.

Upvotes: 13

pkleczko
pkleczko

Reputation: 837

For anyone looking for simple gauge view I made a library that you can clone and use/modify for your needs.

CustomGauge

enter image description here

Upvotes: 19

Related Questions