TabHost on Facebook for Android

Question

Anyone know how facebook did this:

From what I know we cannot change the height of tabhost. I'm guessing that they laid the "Frank Cho" view over the tabhost to give it the appearance of being shorter but I may be wrong. Anyone know what's going on?

Answer 1

You actually can have custom looking tab widgets. You need to set the tab indicator to some custom layout (with your drawables) and you should be good to go.

Here's an semi-example:

final TabHost host = getTabHost();

final TextView indicator = (TextView) getLayoutInflater().inflate(
                            R.layout.tab_indicator,
                            getTabWidget(), false);
indicator.setText("Tab title");

host.addTab(host.newTabSpec("The tab tag")
            .setIndicator(indicator)
            .setContent([put your content here]));
}

Where the tab_indicator layout can look like this:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_label"
    android:layout_width="0dip"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:textSize="14sp"
    android:textStyle="bold"
    android:minHeight="38dp"
    android:background="@drawable/minitab" />

The minitab drawable is a drawable item selector (so you need to have an image for selected, default, pressed, and unselected). The facebook app used some white drawable image for the default tab and the blue gradient drawable for the unselected tabs.

Check out the Google IO Schedule app for a full working example: http://code.google.com/p/iosched/ (and specifically the TrackDetailActivity.java)

Answer 2

Somebody else had what I think is the correct answer, but deleted it for some reason...

The height in question is not that of the TabHost, but of the TabWidget.

Try using the version of setIndicator() that takes a View instead of just a String or String plus drawable resource. While I have not played with this yet, my understanding is that it solves this problem nicely.

Be careful, though, that you don't wind up with tabs that are too tough to tap.