Custom style for Android's TabWidget
Asked Answered
C

3

14

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);
        }
    });
}
Capitally answered 8/11, 2010 at 19:50 Comment(1)
Related, but not exactly a duplicate, but has a better (newer?) answer for how to style the TabWidget: https://mcmap.net/q/303721/-how-to-change-the-color-of-the-tabs-indicator-text-in-androidReportage
P
11

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.

Plattdeutsch answered 10/3, 2011 at 18:2 Comment(2)
but sadly you will still need at least min sdk4 for this.Plattdeutsch
The link is broken.Aerogram
R
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.

Romalda answered 25/12, 2012 at 23:26 Comment(0)
P
-6

<!-- 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" />

Prudy answered 14/2, 2011 at 10:14 Comment(2)
How does this answer my question?Capitally
Cause this is how you style a Tab.Elwood

© 2022 - 2024 — McMap. All rights reserved.