SeekArc - a curvy SeekBar


Please note: Unfortunately we can no longer provide support for SeekArc. This code is provided as is, and you're welcome to use it however you like! However we're unable to help you learn to code. Sorry for the inconvenience.

Cover photo by Tim Gamble.


Recently 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 different Sweep angles.

The SeekArc with different 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.

The Triggertrap sound sensor mode.

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 SeekArc 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 sample app.

Screen shots of sample app.

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.

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.

7 Comments