Tuesday, 5 November 2013

SeekArc - a curvy SeekBar

In my day job I’ve been doing a lot of work on the new Triggertrap mobile Android app. As part of that work I’ve developed a number of custom UI components. One or two of these could be useful generic widgets and I’ve been keen to share them with others. So with the kind permission of the good folks here at Triggertrap I’m happy to share with you a new UI widget I made call the SeekArc.

What is a SeekArc?

So what the heck is a SeekArc? Essentially it’s a SeekBar that has been wrapped around a circle. It acts like a SeekBar and generally has the same settings. You can even add a Listener to it as you would with a SeekBar. So if its in a circle why not call it a SeekCircle? The answer is that the SeekArc does have a few more setting than the SeekBar one of these is the sweepAngle, which means that the SeekArc doesn’t have to be drawn as a full circle, and can be drawn as a circle, semi-circle  or quarter arc or whatever you like.

The SeekArc with varying sweep angles

The SeekArc came about when developing the Sound Sensor mode for the Triggertrap mobile app. We just wanted to get away from straight lines and progress bars so we came up with a concept for using a round progress bar to show the volume of the mic input.  To set a threshold on the sound trigger it made sense to have a round or curved seek bar like input and so the SeekArc was born.

The Triggertrap sound sensor mode as seen wit the Android mobile app
Using the SeekArc
Using the SeekArc is straightforward. There are a number of settings from sweep angle to rotation that can be set. One of the less obvious settings is the radius or diameter of the SeekArc. When I developed the SeekArc I thought about adding an attribute for defining the diameter of the circle. In the end I decided against this. I thought a more flexible approach would be to allow the SeekArc to expand to the size of  its container layout. This way the SeekArc can grow in size with a layout that has widths or heights of match parent. Also it is still possible to set the SeekArc to a specific size by setting the container layouts width and height to specific dp values. This sizing approach gives the best of both worlds. To further adjust how the arc fits in its container a padding attribute can also be used.
To help with understanding how to use the SeeekArc I’ve put together a sample app with a number of controls that can be used to adjust the attributes of the SeekArc. This is by far the best way to get a good understanding of how to use the SeekArc. From the sample app you’ll see that it is possible to set attributes such as:
  1. Sweep angle
  2. Rotation
  3. Clockwise, (which way do you want the progress to increase clockwise/anticlockwise)
  4. Arc and progress width
  5. Rounded corners
  6. Touch inside enable/disable.

Screen shots of the sample app with holo dark and holo light themes

By default the SeekArc can use a Holo light or dark theme. Of course the SeekArc is fully customisable and its also possible to change the colours and thumbnail used as shown with the Custom style in the sample app

SeekArc with custom style
Getting the SeekArc
The SeekArc is fully open sourced under the MIT licence.  You can get the full source for it here , along with the sample app. I’ve also have a branch on my git hub here.

I’d loved to hear how you are using the SeekArc so please drop me a line if you do, and as always feedback for improvement and any questions are more than welcome. That's all from me for now, have fun with the new SeekArc!

1 comment:

  1. Hi Neil, thanks for sharing this. Now I'm playing with it in my project.