Custom style for Android's TabWidget
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"
开发者_如何学JAVA 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);
}
});
}
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.
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.
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" />
<!-- Pressed -->
<item android:state_pressed="true" android:drawable="@drawable/tab_press" />
精彩评论