Change the drawable of tabs on selection -- android

Question

I am using tab view in one of my activity. I want to change the drawable of the tabs on the basis of their selection. So it is like this -- I have 4 images T11, T12, T21, T22. I want to set the image T11 and T22 initially with tab 1 selected. Now I want to change the images to T12 and T21 as soon as I select Tab 2.

So far I tried using via an xml file of drawable type:

drawable for left tab( tab1) --

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 <item android:state_window_focused="false" android:state_enabled="true"
  style="?attr/left_active" />

 <item android:state_window_focused="false" android:state_enabled="false"
  style="?attr/left_inactive" />
 <item android:state_pressed="true" android:state_enabled="true"
  style="?attr/left_active" />
 <item android:state_pressed="true" android:state_enabled="false"
  style="?attr/left_inactive" />
</selector>

Drawable for Tab right(Tab2) --

 <item android:state_window_focused="false" android:state_enabled="true"
  style="?attr/right_active" />

 <item android:state_window_focused="false" android:state_enabled="false"
  style="?attr/right_inactive" />
 <item android:state_pressed="true" android:state_enabled="true"
  style="?attr/right_active" />
 <item android:state_pressed="true" android:state_enabled="false"
  style="?attr/right_inactive" />

In activity:

TabHost tabHost = getTabHost();
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Tab1", getResources().getDrawable(R.drawable.left)).setContent(new Intent(this, Left.class)));
tabHost.addTab(tabHost.newTabSpec("tab2")
    .setIndicator("Tab2", getResources().getDrawable(R.drawable.right))
    .setContent(new Intent(this, Right.class)));
tabHost.setCurrentTab(1);

Please help...

what does the question mark symbol represent on the style= ? — Jono, Jul 17 '14 at 14:27
@jonney The question mark means it's a reference to a resource value in the currently theme. — OrhanC1, Sep 07 '15 at 14:11

score 11 · Accepted Answer · edited Apr 14 '15 at 12:38

I finally got the answer of my question. What I was doing earlier was the right approach. What I am doing wrong is, using style attribute in the drawable file.

So here is the example code for future references:

Drawable file ( create a file in drawable folder with name tab_left.xml)

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

    <item android:state_focused="false" android:state_selected="true"
        android:state_pressed="false" android:drawable="@drawable/tab_left_active" />

    <item android:state_focused="true" android:state_selected="false"
        android:state_pressed="false" android:drawable="@drawable/tab_left_inactive" />

    <item android:state_focused="true" android:state_selected="true"
        android:state_pressed="false" android:drawable="@drawable/tab_left_active" />

    <item android:state_pressed="true"
        android:drawable="@drawable/tab_left_active" />
</selector>

Setting this as background image of a tab:

TabWidget tw = getTabWidget();
View leftTabView = tw.getChildAt(0);
leftTabView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_left);
View rightTabView = tw.getChildAt(1);
rightTabView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_right);

Exactly what I was searching for, works like a charm and is really easy to implement. Thanks! — PakitoV, Dec 09 '11 at 10:13
always feels gud when my code helps some one... You can press up vote button if it helped you. — mudit, Dec 09 '11 at 12:56

score 1 · Answer 2 · edited May 23 '17 at 11:48

I've done this in my app, but not using xml/styles. I did it in code and then swap the background images in the onTabChanged() method.

Part of the code you can see in my comment in post Android TabHost - Activities within each tab

The onTabChanged would then look like this:

public void onTabChanged(String tabId) {
        if ("tabMap".equals(tabId)) {
            txtTabMap.setBackgroundDrawable(getResources().getDrawable(newsList==null?R.drawable.bg_tab_right_active_left_inactive:R.drawable.bg_tab_middle_active_both_inactive));
            txtTabInfo.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_tab_left_inactive_right_active));
            if(txtTabNews!=null)txtTabNews.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_tab_right_inactive_left_active));
        } else if ("tabInfo".equals(tabId)) {
            scrlDescription.scrollTo(0, 0);
            txtTabMap.setBackgroundDrawable(getResources().getDrawable(newsList==null?R.drawable.bg_tab_right_inactive_left_active:R.drawable.bg_tab_middle_inactive_left_active));
            txtTabInfo.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_tab_left_active_right_inactive));
            if(txtTabNews!=null)txtTabNews.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_tab_right_inactive_left_inactive));
        } else if ("tabNews".equals(tabId)) {
            txtTabMap.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_tab_middle_inactive_right_active));
            txtTabInfo.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_tab_left_inactive_right_inactive));
            if(txtTabNews!=null)txtTabNews.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_tab_right_active_left_inactive));
        }
    }

Thanks Mathias, but i have another issue.. I am using themes in my application, so there will more than one image for a tab and will change if user changes the theme of the application. So how i do implement this?? — mudit, Jul 08 '10 at 10:39

Change the drawable of tabs on selection -- android

2 Answers2