Saturday, September 19, 2009

Fun With Tabs in Android

So I'm attempting to implement my first multiplayer game, and I'm working off an example multiplayer chatroom as the basis. The idea is that the user logs into a lobby chatroom, finds someone to play, then either creates a new game or joins an existing game.

The sample app I'm working from uses tabs for navigation, which I haven't used in an app before, but it seems like a nice approach to the UI.

There's just one hitch...I'm having an unholy bitch of a time customizing the tabs, even in seemingly trivial ways.

What's wrong with the default tab parameters? Well, here's a look at the app with the default tabs:


One thing you might notice off the bat is that the tabs are monstrously huge. You could say "Well, they designed them that way for people with fat thumbs." Yes, but default button sizes are nowhere near that big, and they are easily customizable. Not so with tabs. There's just no reason why they need to be that humongous, taking up a quarter of precious screen space. Perhaps if I were designing apps for a race of sasquatches, this might make sense. But I'm not. Okay, some of the users might be sasquatch-like, but I digress.

It took a while, but I figured out how to resize the tabs to non-monstrous dimensions using the following line for each tab:

tabHost.getTabWidget().getChildAt(index).getLayoutParams().height = 40;


Hey, the size looks pretty good now. I load this onto my actual phone and I can very easily navigate between tabs. 40px is plenty tall for a tab. But wait...the background colors are messed up. That should be easy to fix, right? Guess again, dude. If you change the background color programmatically, it overrides the selected and unselected states, so all the tabs are the same color all the time, whether or not they're selected. You can define a custom set of images for selected, unselected, and focused states, but that's a pain in the ass. Why can't I just adjust the background of the unselected state programmatically? Or maybe I can, but I damn sure can't find out how to do that anywhere. Sounds like if I want to change one thing, I have to define a whole set of custom images, which is dumb.

In lieu of that, I thought "Well, the gray stripe on the tabs actually doesn't look half bad, if it weren't offset from the text. It shouldn't be that hard to reorient the text on a tab." Wrong again, dude. You want to align the text on a tab centered vertically? Or aligned at the top of the tab? As far as I can tell, there's no simple way to do this. Why not?

Oh Android...most of the time designing a UI is elegant and easy. In retrospect you make me glad I never worked with tabs before. And now that I am, you're making me want to claw my eyes out.

5 comments:

  1. hey

    have you reached a conclusion?
    it would really help because i'm on the point of a heart attack.

    ReplyDelete
  2. The only solution i found :

    change the size to 33 and the tabs will look a little better.

    If you have a better solution I would like to know it

    ReplyDelete
  3. Could you send me example code of how you actually got the tabs to work?! I've been Googling my day away and I can not figure out how to use tabs.

    My email is admin@thenerdtv.com. Thanks.

    ReplyDelete
  4. I think you're safer to subtract off the size that the icon (that they expect you to have) would be taking up. Here's how I did it:

    ReplyDelete
  5. Any help for my query?

    1. To create Tab along with IMAGE BUTTON in single Line.
    2. ONLY TAB is Horizontally Scrollable but image button is fixed at the right extreme.

    TAB | TAB | TAB | TAB | TAB |(+)
    ------Scrollable --------- --Fixed

    Some one help me please

    Regards
    Vinod

    ReplyDelete