Custom style for Android's TabWidget

Question

I am using tabs in my Android app, and I have run into this problem when running the app on HTC Sense phones:

Android: Highlighted tab of TabWidget not readable on HTC Sense

The solution suggested there (setting android:targetSdkVersion to 4) does not fix the problem for me, nor do I want to set the target sdk to 4.

I have instead tried solving this problem my creating my own tab widget style, and modifying the text color. The problem is that there is no noticable difference when I use my own style; i.e. the style does not appear to be applied to the tabs.

This is the code for the main activity, holding the tabs:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tab);

    tabHost = getTabHost();
    tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Tab 1").setContent(new Intent(this, Tab1.class)));
    tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Tab 2").setContent(new Intent(this, Tab2.class)));

    tabHost.setCurrentTab(0);
}

This is my tab.xml. Notice that I have specified MyTabStyle as style for TabWidget:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">
        <TabWidget
            style="@style/MyTabStyle"
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

And this is my definition of MyTabStyle, which I have defined in res/values/styles.xml:

<style name="MyTabStyle" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:textColor">#5DFC0A</item>
</style>

Why do no changes in MyTabStyle show up in my app? Any other solutions to solving the invisible text on selected tabs in HTC Sense?

UPDATE 2011-06-02

I managed to solve this in a sort of hacky way, by using the knowledge that the text on the tabs are actually TextViews. Add the following method to your activity:

private void setTabColor(TabHost tabHost) {
    try {
        for (int i=0; i < tabHost.getTabWidget().getChildCount();i++) {
            TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); //Unselected Tabs
            if (tv != null) {
                tv.setTextColor(Color.parseColor("#ffffff"));
            }
            TextView tv2 = (TextView) tabHost.getCurrentTabView().findViewById(android.R.id.title); // Selected Tab
            if (tv2 != null) {
                tv2.setTextColor(Color.parseColor("#000000"));
            }
        }
    } catch (ClassCastException e) {
        // A precaution, in case Google changes from a TextView on the tabs.
    }
}

Add the following in your onCreate() method in your activity:

// Only apply the fix if this is a HTC device.
if (android.os.Build.MANUFACTURER.toLowerCase().contains("htc")) {
    // Set up the color initially
    setTabColor(tabHost);

    // Add a tab change listener, which calls a method that sets the text color.
    tabHost.setOnTabChangedListener(new OnTabChangeListener() {
        public void onTabChanged(String tabId) {
            InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
            imm.hideSoftInputFromWindow(tabHost.getApplicationWindowToken(), 0);
            setTabColor(tabHost);
        }
    });
}

Answer 1

This guy has posted a way to customize everything about the tab pretty much. Works with Android 1.6 and above: Custom Android Tabs.

I haven't tried it yet, but getting there. Basically you call setIndicator on your TabSpec and pass it a view instead of just text. Then you can customize that view using selectors etc.

Answer 2

If you are still using TabWidgets on >14, see http://code.google.com/p/android/issues/detail?id=2267. The last comment points to the iosched2011 and indeed there they replace the whole view for the TabIndicator. Except for a few properties (general background, text), any simple way seems broken and this complexity is required.