How do I change the background of an Android tab widget?

Question

My class extends extends TabActivity

TabHost mTabHost =  getTabHost();

TabHost.TabSpec tab1 =mTabHost.newTabSpec("tab1");
TabHost.TabSpec tab2 =mTabHost.newTabSpec("tab2");

tab1 .setIndicator("title tab1");
tab2 .setIndicator("title tab2");
mTabHost.addTab(tab1);mTabHost.addTab(tab2);

TabHost.setCurrentTab(0 or 1)

Can anybody guide me how do I change the background image or color of selected tab?

Blundell · Answer 1 · 2014-02-04T10:38:40.083

91

This will set your tab colors:

public static void setTabColor(TabHost tabhost) {
    for(int i=0;i<tabhost.getTabWidget().getChildCount();i++) {
        tabhost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#FF0000")); //unselected
    }
    tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(Color.parseColor("#0000FF")); // selected
}

and if you put it within the onTabChangedListener(), it will keep the correct color for selected tabs.

edited Feb 04 '14 at 10:38

answered Oct 14 '10 at 19:11

Blundell

75,855
30
208
233

Thanks a lot, this really helped me. Is there any way to implement this approach in XML? – teoREtik Apr 04 '11 at 07:58
1

@teoREtik XML is static content, only for when your activity is first launched (layout initialisation), so no. – Blundell Oct 23 '11 at 15:55
Thanks for your help.. This answer is very helpful.. +1 for that.. Cheers up..!! – Nov 17 '12 at 05:49
What abought highlighting on touch? – Euthyphro Apr 22 '13 at 00:43
I don't like this way. but i don't think we have better way – Leo Nguyen Nov 28 '13 at 10:50
helpful! Take +1..But I do wanna more stylish tab e.g http://jgilfelt.github.io/android-actionbarstylegenerator/ ..It give .xml and .png..How do I implement this? And can it compatible for android 2.2? I intend my app for almost android version..Give me some tutorials.. – lynndragon Feb 04 '14 at 10:36
If you want to use an XML file you can check out the answer below that sets the selector in an XML style http://stackoverflow.com/a/7453721/413127 – Blundell Feb 04 '14 at 10:39

score 36 · Answer 2 · edited Aug 11 '12 at 11:15

As mbaird mentioned, the better solution is to use background with selector, so you don't have to check onTabChanged and do manual update. The minimal code is here:

private void initTabsAppearance(TabWidget tabWidget) {
    // Change background
    for(int i=0; i < tabWidget.getChildCount(); i++)
        tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_bg);
}

Where tab_bg is an xml drawable with selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:state_selected="true" android:drawable="@drawable/tab_bg_selected" />
    <item android:drawable="@drawable/tab_bg_normal" />
</selector>

For the full Tab customization I will add the code for changing tab text style using custom theme. Add this to styles.xml:

<resources>

    <style name="MyCustomTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:tabWidgetStyle">@style/CustomTabWidget</item>
    </style>

    <style name="CustomTabWidget" parent="@android:style/Widget.TabWidget">
        <item name="android:textAppearance">@style/CustomTabWidgetText</item>
    </style>

    <style name="CustomTabWidgetText" parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textSize">12sp</item>
        <item name="android:textStyle">bold</item>
    </style>

</resources>

To use this theme, define it in AndroidManifest.xml:

<application android:theme="@style/MyCustomTheme">

And now you have tab widgets with custom background and custom text style.

score 25 · Accepted Answer · answered Jan 20 '10 at 13:53

25

What if you register for TabHost.OnTabChanged events and call mTabHost.getCurrentTabView() to get the View, then view.setBackgroundResource()?

answered Jan 20 '10 at 13:53

RickNotFred

3,381
2
24
26

score 2 · Answer 4 · answered Apr 03 '13 at 12:25

>     TabHost mTabHost =  getTabHost();
>     
>     TabHost.TabSpec tab1 =mTabHost.newTabSpec("tab1");
>     TabHost.TabSpec tab2 =mTabHost.newTabSpec("tab2");
>     
>     tab1.setIndicator("title tab1");
>     tab2.setIndicator("title tab2");
>     mTabHost.addTab(tab1) ;mTabHost.addTab(tab2);
>     
>     TabHost.setCurrentTab(0 or 1);


mTabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.tab1selector); 

mTabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.tab2selector);    

mTabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.tab3selector);    

mTabHost.getTabWidget().getChildAt(3).setBackgroundResource(R.drawable.tab4selector);

Use .setBackgroundResource and tabNselector is an XML - tabNselector.xml

    <?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_selected="false" android:drawable="@drawable/tabN"/>
   <item android:state_selected="true" android:drawable="@drawable/tabNsel"  />
</selector>

score 2 · Answer 5 · answered Jan 20 '10 at 16:19

2

Does this solve your problem? Basically calling setBackgroundDrawable on each tab view with a selector?

answered Jan 20 '10 at 16:19

Mark B

183,023
24
297
295

score 0 · Answer 6 · answered Dec 25 '11 at 16:09

I set the 'android:background' parameter in the TabWidget element of the XML to give the generic background of all the tabs.

Then I passed views inflated from another XML in the '.setIndicator' method.

 View v = LayoutInflater.from(this).inflate(R.layout.tab_widget, null);
    TextView label = (TextView) v.findViewById(R.id.tabLabel);
    label.setText("Whatever");
 tab1 .setContent(v);

I feel that's a nicer way of doing this.

How do I change the background of an Android tab widget?

6 Answers6

Linked

Related