how to create a buttonbar with a sliding control in android?

Question

The footprints and clock app on a HTC sense phones use a slider control on the bottom buttonbar (see this movie for an example: https://docs.google.com/leaf?id=0B9hmEy_z2CRzOTJmYTVlNDktYjkwMS00YTM5LTk3ODQtYmIzODU4Yzk1YjA0&hl=en&authkey=CMWwwegG).

From the hierarchy viewer I can see that they use a custom control for this. I'm looking for a way to achieve the same effect. I want a buttonbar on the bottom of my app with a movable selector which I can drag from left to right and back, thereby selecting the different tabs.

Can anyone give some tips on how I might achieve this? Which layout controls could I use for this purpose? I know how to create the tabs and the button bar, but I'm a bit puzzled on the sliding selector.

Thanks and kind regards, Ivo

Answer 1

I would extend the TabWidget class to do my own rendering. You'd have the benefits of hot-swappability with other tab systems and uniform interface, while still being able to draw your tab bar the way you want. You'd start your animation in setCurrentTab.

Answer 2

Thanks for you answer Jean! I guess I will need to start reading up on using animations in Android. So far I've been using the standard views/widgets with slight modifications. Could you or anyone else give me tips on how to go about creating a view (with a drawable) which you can grab and move in a horizontal direction with your finger?

Thanks

Answer 3

To create a view, you have two main options.

One is to define it in XML, in a layout file your Activity will use.

<LinearLayout ... > <!-- or any other layout, see layout documentation in the SDK -->
  <ImageView ...    <!-- or another view as fits your needs -->
    android:id="@+id/myview"
    android:src="@drawable/myimage" ... />
</LinearLayout>

You can then reference your view in your code, after you called setContentView, with findViewById(R.id.myview). (of course, if you said, say, "@+foo/bar" in the XML file, you'd use R.foo.bar).

The other way is to create it dynamically and attach it to the view hierarchy.

ImageView v = new ImageView();
v.setImageResource(R.drawable.myimage);
... // initialize your view here
parent.addChild(v);

...Or so.

To get events, you have several options again. One of them is to subclass View (or ImageView for that matter) and implement onTouchEvent. You'd need to adapt the code above to create an instance of your new class instead of an ImageView (obvious in Java code, for XML you'd write as tag name and make sure you implement the constructor that takes (Context, AttributeSet) to call its superclass' constructor). Or, you could write a TouchDelegate and use setTouchDelegate on your ImageView, which is probably simpler in your case.

Another approach would be to create a GestureDetector and to match touches to your view using its hitTest method. For the task you are describing it's overkill, but it might come in handy when your application becomes more complicated.