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

@Suchismita The answer is accepted by original poster. What is the purpose of this bounty? — Ron, Dec 04 '12 at 15:43

David Brown · Accepted Answer · 2010-12-22T15:42:14.697

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.

score 16 · Answer 2 · edited Sep 01 '11 at 22:57

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.

A more complete answer. Thanks :) – Sufian Mar 29 '13 at 05:06 — Sufian, Mar 29 '13 at 05:06
Best and nyc explanation.. :) – Subhalaxmi Nov 26 '14 at 08:18 — Subhalaxmi, Nov 26 '14 at 08:18

score 10 · Answer 3 · edited Jul 26 '12 at 09:16

10

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

edited Jul 26 '12 at 09:16

zawhtut

8,335
5
52
76

answered Dec 22 '10 at 09:26

bharath

141
8

I don want to use the Text and Icon, I want to change the Images of the Tab on selected and not selected forms. – David Brown Dec 22 '10 at 10:32

score 6 · Answer 4 · answered Nov 11 '13 at 15:49

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

score 2 · Answer 5 · answered Dec 11 '12 at 07:24

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

score 2 · Answer 6 · answered Dec 22 '10 at 09:49

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.

score 1 · Answer 7 · answered Dec 15 '11 at 21:12

1

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

answered Dec 15 '11 at 21:12

ademar111190

14,215
14
85
114

score 0 · Answer 8 · edited May 22 '14 at 14:19

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

score 0 · Answer 9 · edited Mar 28 '16 at 09:00

0

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

edited Mar 28 '16 at 09:00

Remi Guan

21,506
17
64
87

answered Mar 28 '16 at 08:49

Irfan Shah

11
3

How to change the Tabs Images in the TabHost

9 Answers9

Linked