Looking for a universal TabHost style that will work on Android, HTC Sense, Samsung, etc. skins

Question

The default style for the Android TabHost works fine for straight Android systems. However, on HTC Sense, they use dark text on a dark background, which is unreadable.

What's the easiest way to have a TabHost that has visible text across all the various flavors of android skins? I would prefer to not have to make a completely custom look-and-feel if possible.

My targetSDK is 10 and my minSDK is 7.

Answer 1

I'll give you the advise to get completely independent from the TabWidget and create your own Navigation, which you can customize however you want and don't bother with the stiff TabWidget. I don't mean to throw away the awesome TabHost, because it's easy to use the TabHost with a custom navigation:

First set your TabWidget as gone:

<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">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"/>

And then create you own navigation in place of it. You could also create a menu (with the hardware menu button) or something like this:

<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">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"/>
        <!-- content of your tabs-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_above="@id/slider_stub"
            android:background="@color/overview_banner_bg_down"/>
        <!-- custom slider with horizontal scrollable radio buttons-->
        <com.example.WrappingSlidingDrawer
            android:id="@+id/tab_slider"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:handle="@+id/tab_slider_handle"
            android:content="@+id/tab_scroller">
            <RelativeLayout
                android:id="@+id/tab_slider_handle"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/def_slider">
            </RelativeLayout>
            <HorizontalScrollView
                android:id="@+id/tab_scroller"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:fadeScrollbars="false"
                android:scrollbarAlwaysDrawHorizontalTrack="true"
                android:scrollbarTrackHorizontal="@drawable/scrollbar_horizontal_track"
                android:scrollbarThumbHorizontal="@drawable/scrollbar_horizontal_thumb"
                android:fillViewport="true"
                android:scrollbarSize="3dip"
                android:fadingEdgeLength="80dp"
                android:background="#343534">
                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content">
                    <RadioGroup
                        android:id="@+id/custom_tabs"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:gravity="center"
                        android:orientation="horizontal"
                        android:checkedButton="@+id/tab_overview">
                        <RadioButton
                            android:id="@+id/tab_overview"
                            android:layout_height="55dp"
                            android:layout_width="55dp"
                            android:button="@null"
                            android:background="@drawable/def_checktab_overview"/>
                        <RadioButton
                            android:id="@+id/tab_news"
                            android:layout_height="55dp"
                            android:layout_width="55dp"
                            android:button="@null"
                            android:background="@drawable/def_checktab_news"/>
                            .....etc....your tabs......
                    </RadioGroup>
                </RelativeLayout>
            </HorizontalScrollView>
        </com.example.WrappingSlidingDrawer>
    </RelativeLayout>
</TabHost>

What you have to do in code now:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_tab_layout);

    setTabs();

    RadioGroup tabs = (RadioGroup) findViewById(R.id.custom_tabs);

    tabs.setOnCheckedChangeListener(new OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId) {
            case R.id.tab_overview:
                getTabHost().setCurrentTab(0);
                break;
            case R.id.tab_news:
                getTabHost().setCurrentTab(1);
                break;
            ....etc.....
            }
        }
    });
}

/**
 * Delegate tab creation and adding.
 */
private void setTabs() {
    // add the necessary tabs
    addTab(R.string.tab_overv_tag, OverviewActivityGroup.class);
    addTab(R.string.tab_news_tag, NewsActivityGroup.class);
            .....etc.....
}

/**
 * Create a tab with an Activity and add it to the TabHost
 *  
 * @param tagId
 *            resource id of the string representing the tag for finding the tab    
 * @param activity
 *            the activity to be added
 */
private void addTab(int tagId, Class<? extends ActivityGroup> activity) {
    // create an Intent to launch an Activity for the tab (to be reused)
    Intent intent = new Intent().setClass(this, activity);
    // initialize a TabSpec for each tab and add it to the TabHost
    TabHost.TabSpec spec = usedTabHost.newTabSpec(getString(tagId));
    // use layout inflater to get a view of the tab to be added
    View tabIndicator = getLayoutInflater().inflate(R.layout.tab_indicator, getTabWidget(), false);
    spec.setIndicator(tabIndicator);
    spec.setContent(intent);
    usedTabHost.addTab(spec);
}

The whole indicator stuff is not needed btw.^^ In your ActivityGroups you have to set the appropriate Activities, etc. You know the stuff.

You can use anything for your navigation and can still use the advantages of a TabHost. Just don't bother with that TabWidget anymore. ;)

Answer 2

After some research I think the best option would be to use ActionBar's tabbed interface since it looks much more easier to style. The ActionBarSherlock provides compatibility layer for ActionBar for devices starting from Android 1.6. Here you can look at examples on what you can get using the library.