How to change the Tabs Images in the TabHost

Question

I am using the TabHost in my application, I am using four Tabs in my application and I want to use the different Images in the TabHost when the Particular Tab is been Selected and not selected. I need to use to different Images for a particular tab each.

When I Select any Tab the Image is little bright and when I switch to another Tab that bright Image becomes grey shaded.

I have implemented the TabHost but I don know how to change the Images in the TabHost.

Can anybody help me in this.

Thanks, david

Answer 1

If you wish to use different images for the selected and unselected states, then create 'selector' XML files in your drawables folder for each tab, e.g. tab1_selector.xml, tab2_selector.xml which should contain the following, replacing the drawable references to your images for selected and unselected states. i.e.

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

Then using the .setIndicator method as bharath wrote above you should reference your new xml drawable resource.

Answer 2

First of all you must have the two images, because you want to change from one to another, so you need the both images, and you must place it on the three drawable folders.

In my example I have to images, one called icon1.png and icon2.png.

After that, create a xml file inside the drawable folders (the same file for all drawable folders). This is the file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use icon1 -->
<item android:drawable="@drawable/icon1"
      android:state_selected="true" />
<!-- When not selected, use icon2-->
<item android:drawable="@drawable/icon2" />
</selector>

You can choose what image is the one which will appear when the tab is selected. In this case, the icon1 will appear, cause we declared it on the tag where state_selected=true.

So now, you have the two images and the xml file inside the three drawable folders. Ok!

Now, in the class you declare the tabs, add this line for each tab you want to add.

tabHost.addTab(tabHost
.newTabSpec("one")
.setIndicator("The Tab",
  res.getDrawable(R.drawable.yourxmlfile))
.setContent(new Intent(this, YourClass.class)));

Remember that R.drawable.yourxmlfile correponds to the xml file you created in the drawable folders.

That's it! Hope this helps you.

Answer 3

To set text & icon we need to use setIndicator property.

 tabSpec.setIndicator(Char,Drawable);
 firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.logo));
 secondTabSpec.setIndicator("Second Tab Name",getResources().getDrawable(R.drawable.logo));

use this to set seperate image for each tab

Answer 4

Create a selector xml file tabicon.xml and put this code

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

now go to your TabActivity and put this code

TabSpec MyTab = tabhost.newTabSpec("MyTab");
MyTab.setIndicator("", getResources().getDrawable(R.drawable.tabicon));
//note:if you give some text in setIndicator sometimes the icon will not be showed. 
Intent tabIntent = new Intent(this, TabOne.class);
TWTTab.setContent(tabIntent);