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)