Monday, September 26, 2011

Segmented Button Control in Android

For an Android project I did a little while back I needed a pair of so-called segmented buttons, as they are named in iOS (see for example the official iOS API for it).

The idea is that when you select one of the buttons, it usually shows just about the same related data but in a different way (at least that's my translation of what it should do).
The Android version of it which I provide below looks currently most like the third and fourth example in the above image. But of course you can change the code to style it like the others too.

Android does not have this control out of the box. Luckily, I found a reference to the source of the Foursquared app.
In there, a segmented button control is created! Big thanks for the creators of Foursquared for sharing the code and thus of the segmented button control :)

Since the Foursquared app is quite big, I extracted the segmented buttons code from it and made it an Eclipse project, for your and my convenience. It's now just one Activity and the widget.
You can get it from here and use it anyway you like, following the Foursquared source Apache License 2.0 rules of course.
Here's two screenshots of what it will show:

Above shows at startup by default the Recent button is selected

Above shows after clicking on the Nearby button

Please not that I kept it as basic as possible; for example you'll keep seeing the progress indicator from layout/empty_loading.xml, which of course should be replaced with actual data. I also did not go through all the drawables etc to see which ones are needed and which are not, so you'll still have to clean those up.
Code has been tested on 2.1-update1.


Anonymous said...

link is dead.

Techie said...

Which link is dead? Just tried all of them, seem fine.

Anonymous said...

All links work. Man, what a shitty comment "link is dead.". At least, point which one.

Anonymous said...

it seems can't download from, is it possible to share the code via some other site e.g. git-hub


Techie said...

Well, you can download from 4shared, but they really force you to login in some form (ok I didn't try that even so indeed maybe it doesnt work :/). I won't be posting to 4shared anymore then for any new source code... Thanks for pointing it out.

I did find a workaround for you. Just use this URL:

Note it has prefixed to the original URL.
Now I'm not affiliated with that domain in any way, so use at your own risk. I just tried it, it seems ok.
Just make sure you click on the bold text link in "if not, click FoursquaredSegmentedButton to download." Clicking on the button that says "Download" seems just another spam thingie.


Anonymous said...

The link is dead again. May I suggestGoogle drive is much cleaner and never changes.

Techie said...

Thanks for reporting the broken link!

It's now available here:
Updated the link in the article too.

Yes good idea of moving to Google drive (although "never" is a really long time ;)

Anonymous said...

Does it support images/icons?

Techie said...

Images where? On the tabs/buttons? That should not be too hard to add I guess.