Customizing tabs on state in Android

Question

I know how to put the icon on each tab, that is no problem. I also ran across this : [Stack Overflow thread on pretty much same thing][1]

I followed one of the links from that question and found [this][2]

Pretty much, it said to use a selector defined in the XML, sure, did that. But there is no id associated w/ it so I am not sure how to get the selector function as a drawable so I can use it as the icon for the tabs. Maybe I am going about this the wrong way. But this is what I have, and obviously missing something.

<selector
    android:id="@+id/myselector"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item
        android:state_focused="false"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/darklogo" />
    <item
        android:state_focused="false"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/lightlogo" />

    <!-- Focused states -->
    <item
        android:state_focused="true"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/lightlogo" />
    <item
        android:state_focused="true"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/lightlogo" />

    <!-- Pressed -->
    <item
        android:state_pressed="true"
        android:drawable="@drawable/lightlogo" />
</selector>

In my code, an example tab is generated using :

  host.addTab(host.newTabSpec("three")  
                .setIndicator("map",drawables)  
                .setContent(new Intent(this, Map.class)));

Right now drawable is just a reference to a drawable image resource. How do I make the selector a drawable?

This is my question [1]: Updating Android Tab Icons [2]: http://groups.google.com/group/android-evelopers/browse_thread/thread/ef3bdebcb715b385

score 22 · Accepted Answer · answered Apr 22 '09 at 22:50

The XML you've included here is a way of defining a drawable that lets you embed a case statement. It presents a different drawable depending on the state of the View it's being assigned to. As a drawable, you should save it as an xml file within the res/drawable folder of your project (for example tabselector.xml).

To use it for the Tabhost, you need to construct the TabActivity as you normally would (as shown in this tutorial example).

Then when you add each tab to the host, you specify the tabselector drawable as the indicator as shown for "TAB 1" below.

Drawable mySelector = getResources().getDrawable(R.drawable.tabselector);

mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1", mySelector).setContent(R.id.textview1));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2").setContent(R.id.textview2));

Note: You cannot change the color of the tab backgrounds behind the icons at this point.

As usual. Thank you very much. I think not having it my my drawable folder was my bigger issue. Thank you for including some code to get me moving.. I appreciate it. — Chrispix, Apr 23 '09 at 02:10
is this possible now? i mean your Note statement. check my question please: http://stackoverflow.com/questions/2810075/customizing-tab-indicator-images-in-android — Praveen, May 11 '10 at 13:27

score 1 · Answer 2 · edited Jun 22 '12 at 09:55

You could use a View as an indicator, this way you can customize it the way you wish.

mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator(View MyView).setContent(R.id.textview1));
mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2").setContent(R.id.textview2));

The first tab will use a View as its indicator and the second a CharSequence. Have a look at the actual TabSpec class (http://developer.android.com/reference/android/widget/TabHost.TabSpec.html).

Customizing tabs on state in Android

2 Answers2

Linked