Question

I have a TabHost with a TabWidget. I want to customize the selected and unselected states for the tab. I’m not sure how to put all of these XML files together so that I can have customized tabs?

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp">
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:padding="5dp" />
            </LinearLayout>
        </TabHost>

Here is my selector xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  Active tab -->
    <item android:state_selected="true" android:state_focused="false"
        android:state_pressed="false" android:drawable="@drawable/tab_selected" />
    <!--  Inactive tab -->
    <item android:state_selected="false" android:state_focused="false"
        android:state_pressed="false" android:drawable="@drawable/tab_deselected" />
    <!--  Pressed tab -->
    <item android:state_pressed="true" android:drawable="@android:color/transparent" />
    <!--  Selected tab (using d-pad) -->
    <item android:state_focused="true" android:state_selected="true"
        android:state_pressed="false" android:drawable="@android:color/transparent" />
</selector>

Here is the selected state:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#97150c" android:centerColor="#7F7F7F"
        android:endColor="#b4190d" android:angle="-90" />
</shape>

Here is the unselected state:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#acacac" android:centerColor="#7F7F7F"
        android:endColor="#d7d7d7" android:angle="-90" />
</shape>

Answer 1

The following code will do it, where tw is the TabWidget
‘

    for (int i = 0; i < tw.getChildCount(); i++)
    {
        View v = tw.getChildAt(i);
        v.setBackgroundDrawable(null);
        v.setOnTouchListener(new OnTouchListener()
        {

            @Override
            public boolean onTouch(View v, MotionEvent event)
            {

                // Change the icon and background colors
                TabWidget tw = getTabWidget();
                for (int i = 0; i < tw.getChildCount(); i++)
                {
                    View vv = tw.getChildAt(i);
                    vv.setBackgroundDrawable(null);
                    vv.setId(0);
                }

                NonScalingBackgroundDrawable nsbd = new NonScalingBackgroundDrawable(getApplicationContext(), v, R.drawable.nav_highlight);

                v.setBackgroundDrawable(nsbd);

                v.setId(1);
                return false;

            }

        });
    }
}

‘