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

Sweet

@Suchismita The answer is accepted by original poster. What is the purpose of this bounty? – Varian

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.

Sweet

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.

Verniavernice

Best and nyc explanation.. :) – Smarmy

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

Malay

I don want to use the Text and Icon, I want to change the Images of the Tab on selected and not selected forms. – Sweet

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

Gottuard

Answer 5

In this TabLayout tutorial, different images are used when a Tab is selected and not selected.

Basically you have to create a Statelist drawable. Here's the code for the same from the developer site

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

Also setIndicator(CharSequence, Drawable) is called to set the text and icon for the tab.

Hastie

Answer 6

this codes show how to set an icon in tab host and also setting intent

  TabHost tabHost = getTabHost();

        // Tab for Photos
        TabSpec photospec = tabHost.newTabSpec("Photos");
        // setting Title and Icon for the Tab
        photospec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_photos_tab));
        Intent photosIntent = new Intent(this, PhotosActivity.class);
        photospec.setContent(photosIntent);

        // Tab for Songs
        TabSpec songspec = tabHost.newTabSpec("Songs");
        songspec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_songs_tab));
        Intent songsIntent = new Intent(this, SongsActivity.class);
        songspec.setContent(songsIntent);


        // Tab for Videos
        TabSpec videospec = tabHost.newTabSpec("Videos");
        videospec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_videos_tab));
        Intent videosIntent = new Intent(this, VideosActivity.class);
        videospec.setContent(videosIntent);

        // Adding all TabSpec to TabHost
        tabHost.addTab(photospec); // Adding photos tab
        tabHost.addTab(songspec); // Adding songs tab
        tabHost.addTab(videospec); // Adding videos tab

Cress

Answer 7

You can to use ImageButton it's better because a imageView can be selected and not selected and the ImageButton can be selected not selected and pressed and others....

Hepatic

Answer 8

@Suchismita better you use TextView instead of TabActivity. I faced these following problems in tabactivity

• I could not start another activity within same tab, this is major problem i faced

• next is customizing view of tab, I could not change divider drawable.

• And TabActivity is deprecated in ICS

Next using TextView I found its very easy to handle events and activity flow,here You have full control on the behavior of application and also You can customize the look and feel of tab however you want.

are you interested in how to implement ?

Ligule

Answer 9

If you want to change image of tab programmatically then:

ImageView yourImage= (ImageView)mTabHost.getTabWidget().getChildTabViewAt(youtTabPosition).findViewById(android.R.id.icon);   
yourImage.setImageResource(R.drawable.ic_more_vert_white_24dp);

Arterio