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!

Tuesday, 22 January 2013

Animating the SearchView

I’ve been taking a closer look at the SearchView widget. This widget was introduced in Android 3.0 but has also had a few additions and updates to it since then. It was designed to be used mainly in an ActionBar , but it’s also possible to use it within any layout.

One of the cool things about the SearchView is that it can be collapsed (iconified) so that it only takes a small amount of space, and when pressed it can go into an expanded state so that text can be entered and searched

Collapsing and expanding the SearchView works fine, but for me something immediately did not feel right. If you try this yourself you’ll notice that there is no transition animation between the collapsed and expanded states. Things just disappear and appear, it’s like a magician's trick without the puff of smoke.

To make things better it would be good if there were some animations when collapsing and expanding the SearchView, maybe a slide in and out. So after a bit of digging around I noticed that the SearchView essentially is a Layout that contains a few LinearLayouts.

Since Android 3.0 it’s been possible to animate layout changes within a LinearLayout by setting an attribute called animateLayoutChanges. When this is set, removing a View from the layout will cause it to fade out and the remaining views will slide in to fill the empty space left by the removed view.  Adding a view will cause existing views to slide out of the way to make room for the new view.

So in theory we could just set this attribute on a LinearLayout in the SearchView and our transitions between the collapse and expand state will be animated. Not quite, since the LinearLayout is within the SearchView we do not have access to the XML so we need to do the equivalent in Java. We can do this by setting a LayoutTransistion on the LinearLayout within the search.  There’s a little more work than usual to get a reference to this LinearLayout, but once we have done that setting the layout transition is just one line of code. Here’s the code to do this:

SearchView searchView = (SearchView) menu.findItem(R.id.action_search).getActionView();
//Get the ID for the search bar LinearLayout
int searchBarId = searchView.getContext().getResources().getIdentifier("android:id/search_bar", null, null);
//Get the search bar Linearlayout
LinearLayout searchBar = (LinearLayout) searchView.findViewById(searchBarId);
//Give the Linearlayout a transition animation.
searchBar.setLayoutTransition(new LayoutTransition());

With these few lines of code we now have an animated expand and collapse for the SearchView, this is how it looks:

This is a video of the animations running in an emulator. On a real device the animations run much more smoothly. It’s not perfect, but its a fair improvement for not much effort. To make things even better it would also be nice to animate the adding and removing of buttons once the SearchView is in the expanded state. Unfortunately this is not something that can be done with a few lines of code. It’s most likely that to achieve this a new SearchView would have to be written with built in support for animations. Maybe that could be another blog post.