How to change the background of an Android tab widget?

Question

My extends extends TabActivity class

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 someone tell me how to change the background image or the color of the selected tab?

Answer 1

What if you log TabHost.OnTabChanged events and call mTabHost.getCurrentTabView () to get a view and then view.setBackgroundResource ()?

Answer 2

This will set the colors of your tab:

 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 inside onTabChangedListener (), it will keep the correct color for the selected tabs.

Answer 3

As mentioned in mbaird, the best solution is to use a background with a selector, so you don't need to check onTabChanged and perform a manual update. The minimum 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 the xml that can be selected using the 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> 

To fully customize the tab, I will add code to change the style of the tab text using a 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 a custom background and custom text style .

Answer 4

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

Answer 5

 > 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 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> 

Answer 6

I set the parameter "android: background" in the TabWidget XML element to get the general background of all the tabs.

Then I passed the views fanned 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 this is the best way to do this.