Gauge and Dial widget for Android

It wasn’t hard at all creating my own widget for Android. The Vintage Thermometer created by Ivan (the guy from MindTheRobot.com) served as a starting point for my widget.  First I removed the sensor specific part from the code and added getters and setters to be able to pass any value I like to the widget. The second step was adding a significant amount of comment to the code. The third and last thing I did was making the widget more configurable. The result is given below.

As said, the widget is configurable. Most of what you see in the image above can be configured in the layout file. The following properties are available:

  • Widget type: gauge, dial or both.
  • Enabling the extra colored ring indicating ranges scale ranges.
  • Setting the 3 individual colors of the gauge.
  • Setting the scale limits.
  • Setting the min and max values for each range.
  • Setting the increments for each large and small notch.

I will make the binary version available soon. Please check back later.

Because Ivan was very helpfull, I decided to update his code also. I’ve added properties and inline comments to his source code. Please check Mind the Robot for updates on the Vintage Thermometer. Also check that site for other Android related items.


    Advertisements
    This entry was posted in Post Android, Uncategorized, User Interfaces and tagged , , , , , , , , . Bookmark the permalink.

    28 Responses to Gauge and Dial widget for Android

    1. Ivan says:

      Great job Freddy!
      It’s really a new professional level for that simple piece of code that I wrote.
      Hope to see it in apps 🙂

    2. Pingback: Mind The Robot » Android UI: Vintage Thermometer – Code Update

    3. Looks great. Any chance we get to have a look at the code as well?

      • atstechlab says:

        Hello Manfred,
        I need to find a way to share the widget in source or binary form and I also need to determine the license type. I will probably host this widget on Google somewhere.
        Freddy

    4. Cool. If you put it on google code as a project, it would be great if you could use mercurial/hg as repository format rather than svn. That way contributing is much easier. I look forward to have a peek.

    5. C L says:

      Great looking dial widget. Would love to use that in a demo for polling a database and displaying summary metrics.

    6. Pingback: Gauge widget available at Google Code | ATS TechLab

    7. MiloTheGreat says:

      Great stuff, is there a demo app to use it in action? I’ll be interested if there is swing animation when the needle moves.

      Thanks.

    8. Jay Vaughan says:

      Any idea when the code for this project will be available?

    9. ramakanth says:

      Hello ATS,
      i have created the same type of view for my Speedometer Gauge development, is there any much easier method to do this like in IPHONE, can we use Animations in Android to acheive the same???
      Please post a reply.

    10. Yasmeen says:

      Looks great..I tried to download it but couldn’t either. Could you please post it elsewhere? I really appreciate it.

    11. Hey Freddy,

      I tried to get code using SVN but it returned 405 error. Can you send me zip in mail “madhavjgd@gmail.com” would be good help from you

      Regards
      Prashant

    12. Freddy Martens says:

      To all who requested the code. I created a zip archive and you can download it from http://tinyurl.com/6wum5qt. You may use it in commercial applications. It would be nice to give MindTheRobot some credits for most of the work he did and it would also be nice to send me a note about the way you are using the widget.

    13. Thanks Freddy. To those who want to download code directly from http://code.google.com/p/widgets4androidhmi/source/checkout needs “Mercurial” to be installed. Once you install “Mercurial” for windows, just open “command prompt” and paste the link “hg clone….” and your code will be downloaded, however thanks to Freddy for uploading ZIP to those who are unaware of “Mercurial”

    14. That’s a very good tutorial, I was inspired to try and create my own GaugeView (looks like this http://goo.gl/vvzTz) but I wonder if you know that if you turn on hardware acceleration for compatible devices the animation stops working. It has to do with the new rendering method introduced in Honeycomb but I’m not sure yet what to do in order to fix it. Any thoughts? Thanks.

    15. Silva says:

      Hi guys!
      Thanks to both of you for share this great work!
      I’m trying to use your gauge in an Android application for read different electrical parameters but I don’t understand how to change the scale.
      Each time I try to change the number of total notches or increments, the whole scale goes to hell…
      Can you help me, please? How should I change to different scales?
      Thanks again 🙂

      • Freddy Martens says:

        Hi Silva, I do not have that much time to spare to look into that issue. I know that I had to fiddle with the notches too.

    16. sanket says:

      Hey freddy what i am trying to do is something similar to what you have done. i have images placed on the speedometer and when the page loads i want the needle to move across the dial and each image should change as the needle move over the image.and when user clicks on the image the needle should move to that image. can u tell me how to go about it. and when trying ur example i wasn’t able to see needle what could be the reason for it.

      • Freddy Martens says:

        Lets say you have 5 pictures. The picture will sit at a certain angle from the center. Try to do some math using the functionality behind the hotter and colder buttons.

    17. Pingback: Circle Meter Type UI in android? : Android Community - For Application Development

    18. Hakan Gumus says:

      Thanks Freddy, we are using in our application for showing speed:
      https://play.google.com/store/apps/details?id=net.veloxity.app

      Regards,
      Hakan

    19. vdraka says:

      Hi.
      Did you try checking your gauge at different targetSdkVersion?
      When I set it to 16 or 17, I get bizzare results (like green background behind gauge) and no arrow (the one pointing the temperature) at all

      • Freddy Martens says:

        Nope, I did not test it with other versions.

      • Hakan Gumus says:

        Hi vdraka,

        Please try to put below lines in init :

        @TargetApi(11)
        private void init(Context context, AttributeSet attrs) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s