Question

My main activity is a TabActivity, but my tabs don’t require icons. I know I can omit the icon by using the overloaded TabHost.TabSpec.setIndicator(CharSequence label) method, as answered in this question.

But the space where the icon would go is still reserved, so a lot of space is wasted. This has already been remarked in this question. It seems I can’t just reduce the tab height. I’ll have to supply my own View with the TabHost.TabSpec.setIndicator(View view) overload.

Fine, but I want to make sure the rest of the styling (background/coloring) remains consistently ‘android’ across all devices, just as if I’d used a default tab indicator. So I don’t want to supply my own colors.

I’ve found @android:color/tab_indicator_text and using it for the TextViews text-color seems to work as expected. But I don’t know where to get the default tab-background-colors. I’ve also discovered the @android:style/Widget.TabWidget style, but applying it to neither the TextView nor the surrounding LinearLayout seems to help.

This is my tab indicator view xml file, taken from some tutorial:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:padding="12dip" >

    <TextView
        android:id="@+id/tabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/tab_indicator_text" />
</LinearLayout>

How do I get ‘android default’ tab styling on this?

---

Edit: Next, I tried to add a default tab through setIndicator(CharSequence), take the getBackground drawable of its indicator view, clear all tabs, add my custom views (see above), then put the drawable I retrieved in setBackground for the new indicators.

The result looks sort of right and sort of wrong. For one, they’re too high again, so I gained nothing. For another, the background states of all tabs are now linked somehow (active, highlighted, selected, etc.). Using mutate() on the drawable(s) didn’t help at all. Next trick: I added three default tabs, took all of their backgrounds, cleared them, and gave my own three tabs one background each.

Well, that solves the second problem. Their states are no longer linked. But they’re still too high. So I reduced the height of the TabWidget using updateViewLayout. This works, but leaves a discolored bar at the top of the tab indicators.

Actually, I just end up with the same situation as when using the TabHost.TabSpec.setIndicator(CharSequence label) method. And anyway, all these hacks make me feel dirty. Isn’t there an elegant way to get default android styling on a custom view?

Answer 1

This code taken from android sources tab_indicator.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="64dip"
    android:layout_weight="1"
    android:layout_marginLeft="-3dip"
    android:layout_marginRight="-3dip"
    android:orientation="vertical"
    android:background="@android:drawable/tab_indicator">

    <ImageView android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />

    <TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        style="?android:attr/tabWidgetStyle"
    />

</RelativeLayout>

You can try to just take this code, delete the ImageView, change layout_centerHorizontal in the TextView to layout_center, reduce height of the RelativeLayout, and provide this view in TabHost.TabSpec.setIndicator(View view). There are references only to @android resources, so you do not need create any drawables or text styles.

EDIT

The standard android drawable background for the tab indicator is not visible from an app, but it is possible to do it like this:

TabSpec tc = getTabHost().newTabSpec("tag");
tc.setIndicator("indicator1");
tc.setContent(content);
getTabHost().addTab(tc);
getTabHost().findViewById(android.R.id.icon).setVisibility(View.GONE);
TextView tv = (TextView) getTabHost().findViewById(android.R.id.title);
RelativeLayout.LayoutParams rllp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rllp.addRule(RelativeLayout.CENTER_IN_PARENT);
tv.setLayoutParams(rllp);

Then it is possible to reduce the height of the tabs:

RelativeLayout parent = ((RelativeLayout) tv.getParent());
ViewGroup.LayoutParams vglp = parent.getLayoutParams();
vglp.height = android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
parent.setLayoutParams(vglp);

The result will be: