Android : Customizing tabs on state : How do I make a selector a drawable

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

I followed one of the links from that question, and found this

Pretty much, it said 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"&gt;
    <!-- 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 drawables is just a reference to an drawable image resource. How do I make the selector a drawable? * This is my question *

Answer 1

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.

Answer 2

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

Answer 3

Question to the same

I am trying to change the Icon of one of the tabs of tab host at run time. I am not able to figure out how to do with the widget. could some one let me know how its done ?

spec = tabHost.newTabSpec("hello").setIndicator("hello", res.getDrawable(R.drawable.tab1)).setContent(intent); tabHost.addTab(spec)

The xml file is as below

!-- When selected, use grey -- item android:drawable="@drawable/icon1" android:state_selected="true" !-- When not selected, use white-- item android:drawable="@drawable/icon1"

Thanks , Titus

Answer 4

Ive used this method and its works well, yet when I add a drawable to the selector within the xml, it appears with a small 5px padding within the tab. reiterate: The drawable is added to the tab, yet the default tab color shows around the individual tabs drawable. Is there a default padding? I have tried everything I can think of the 0 it out. Running out of light bulbs, so any help is awesome!

Thanks for this...