Tabhost image change on selection

Question

I tried to change tab image with background color as given in image here is the source what i have done... i have also reviewed this How to change the Tabs Images in the TabHost

where is the problem?

       mTabHst.addTab(mTabHst.newTabSpec("tab_test1").setIndicator(null,res.getDrawable(R.drawable.custom_widget_list))
                .setContent(i));   

     mTabHst.addTab(mTabHst.newTabSpec("tab_test2").setIndicator(null,res.getDrawable(R.drawable.custom_widget_trans))
                .setContent(j));


         int tabCount = mTabHst.getTabWidget().getTabCount();
         for (int r = 0; r < tabCount; r++) {
             final View view = mTabHst.getTabWidget().getChildTabViewAt(r);

             if ( view != null ) {
                 // reduce height of the tab
                 view.getLayoutParams().height *= 0.70;

             }
         }


         mTabHst.setCurrentTab(0); 

}

Here is my tab xml

 <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" 
        android:layout_gravity="center"
        android:background="#FFFFFF"
        android:tabStripEnabled="false" 
        android:gravity="center"  />

custom_widget_list.xml

<item android:drawable="@drawable/member_pink" android:state_pressed="true"   android:state_selected="false" android:color="#FFFFFF"></item>
<item android:drawable="@drawable/username" android:state_pressed="false" android:state_selected="false" android:color="#FFFFFF"></item>
<item android:drawable="@drawable/member_pink" android:state_pressed="false" android:state_selected="true" android:color="#FF00FF"></item>

custom_widget_trans.xml

    <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android" > 
<item android:drawable="@drawable/member_pink" android:state_pressed="true"      android:state_selected="false" android:color="#FFFFFF"></item>
   <item android:drawable="@drawable/member4" android:state_pressed="false"   android:state_selected="false" android:color="#FFFFFF"></item>
    <item android:drawable="@drawable/member_pink" android:state_pressed="false"  android:state_selected="true" android:color="#FF00FF"></item>

Here is Screenshot:

and here is the screen 2.

Answer 1

You just need to set selector for your Tabs. Create a view and use your selector.

Step1: Create method in your which will return view with your selector background.

private View getTabIndicator(){
    View view = new View(this);
    view.setBackgroundResource(R.drawable.tab_selector);
    return view;
}

Step2: Keep your tab_selector.xml in res/drawable folder.

<?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_bg_selected" />
<!--  Inactive tab -->
<item android:state_selected="false" android:state_focused="false"
android:state_pressed="false" android:drawable="@drawable/tab_bg_unselected" />
<!--  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>

Step3: Now setIndicator() will have custom view as indicator and selector will manage background images.

mTabHst.addTab(mTabHst.newTabSpec("tab_test2").setIndicator(getTabIndicator()).setContent(j));

Hope it will help you..

Answer 2

Step 1:

Add the code below to the oncreate method.

    TabSpec Summary = tabHost.newTabSpec("Study  Summary");
        Summary.setIndicator(NetworkStatus.createTabView(
                TabActivityPacs.activity, R.drawable.custom_widget_list));
        Intent studysummary = new Intent(this, Stusummaryactivity.class);
        Summary.setContent(studysummary);

        TabSpec trans= tabHost.newTabSpec("Transcription");
        trans.setIndicator(NetworkStatus.createTabView(
                TabActivityPacs.activity, R.drawable.custom_widget_trans));
        Intent trintent = new Intent(this, Testtranscription.class);
        trans.setContent(trintent);

             tabHost.addTab(StudySummary);
    tabHost.addTab(Transcription);

Step 2:

Use the drawable folder for the custom widgets below.

custom_widget_list.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

   <!-- Tab widget design -->
    <item android:drawable="@drawable/listpres" android:state_pressed="true"   android:state_selected="false"></item>
    <item android:drawable="@drawable/list" android:state_pressed="false" android:state_selected="false"></item>
    <item android:drawable="@drawable/listpres" android:state_selected="true"></item>

</selector>

custom_widget_trans.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" ><!-- Tab widget design -->
    <item android:drawable="@drawable/transcription1pres" android:state_pressed="true" android:state_selected="false"></item>
    <item android:drawable="@drawable/transcription" android:state_pressed="false" android:state_selected="false"></item>
    <item android:drawable="@drawable/transcription1pres" android:state_selected="true"></item>

</selector>