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.
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. ;)
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.
© 2022 - 2024 — McMap. All rights reserved.