Tabs not customized as I want in Android

Question

I have the following activity code for a tabbed application.

public class TabbedActivity extends TabActivity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabbedactivity);        

        TabHost tabHost = getTabHost();         

        TabSpec photospec = tabHost.newTabSpec("RP");
        // setting Title and Icon for the Tab
        photospec.setIndicator("RP", getResources().getDrawable(R.drawable.tabrp));
        Intent photosIntent = new Intent(this, RP.class);
        photospec.setContent(photosIntent);

        // Tab for Songs
        TabSpec songspec = tabHost.newTabSpec("MP");
        songspec.setIndicator("MP", getResources().getDrawable(R.drawable.tabmp));
        Intent songsIntent = new Intent(this, MP.class);
        songspec.setContent(songsIntent);

        tabHost.addTab(photospec);
        tabHost.addTab(songspec);           
    }       
}

The tabbedactivity.xml is defined as below:

<?xml version="1.0" encoding="utf-8"?>
<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">
        <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"/>
    </LinearLayout>
</TabHost>

I have added tabmp.xml and tabrp.xml as follows:

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

The colors are defined in color.xml. The application runs, but the color on the tabs is still the default black when active, gray when not active and blue when pressed, which are the default android colors for tabs. The tabmp.xml and tabrp.xml does not seen to work. Am I doing something wrong here?

Answer 1

The drawing resource needs to be set as the background of the tab view. You can do one of two things:

1. Once you've created the tab:

    tabHost.getTabWidget().getChildAt(THE_CHILDS_POSITION_IN_THE_HOST).setBackgroundResource(R.drawable.tabmp.xml);
   

2. Or create a custom layout for your tab

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tabsLayout" android:layout_width="fill_parent"
   android:layout_height="fill_parent" android:background="@drawable/tab_bg_selector"
   android:padding="10dp" android:gravity="center" android:orientation="vertical">
   
       <TextView android:id="@+id/tabsText" android:layout_width="wrap_content"
           android:layout_height="wrap_content" android:text="Title"
           android:textSize="15dp" android:textColor="@drawable/tab_text_selector"
           android:textStyle="bold" />
   </LinearLayout>
   

   and then when creating your tab:

   View tabview = LayoutInflator.from(context).inflate(R.layout.tabs_bg, null);
   TextView tv = (TextView)view.findViewById(R.id.tabsText);
   tv.setText(TEXT);
   TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(i);
   tabHost.addTab(setContent);