Custom Tab Background Image

Hi!

          Just i am going to show a simple task how to change the background of Tab in android.


Create Your normal xml file for TabHost


<?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:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

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

• create different images / background for on mouse over, click & normal and save it on drawable folder.
• write selector for on click by using those images,

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

    <item android:drawable="@drawable/tab_bl_cent" android:state_pressed="true"></item>
    <item android:drawable="@drawable/tab_wt_cntr" android:state_focused="true"></item>
    <item android:drawable="@drawable/tab_wt_cntr"></item>

</selector>

• In your main activity class extend by using TabActivity, Then write your normal activity code 
• Call the child position and set the background for it by using your selector of xml

package dcs.raj.timesheet;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

@SuppressWarnings("deprecation")
public class Main_Tab extends TabActivity {

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main__tab);
// Show the Up button in the action bar.
TabHost thst = getTabHost();

TabSpec ts_project = thst.newTabSpec("Project");
ts_project.setIndicator("Project",getResources().getDrawable(R.drawable.ic_launcher));
Intent i_project = new Intent(this, Project.class);
ts_project.setContent(i_project);

TabSpec ts_Edit_ts = thst.newTabSpec("Edit Time Sheet");
ts_Edit_ts.setIndicator("Edit Time Sheet",getResources().getDrawable(R.drawable.ic_launcher));
Intent i_Time_sheet = new Intent(this, EditTimeSheet.class);
ts_Edit_ts.setContent(i_Time_sheet);

TabSpec ts_Time_sheet = thst.newTabSpec("View Time Sheet");
ts_Time_sheet.setIndicator("View Time Sheet", getResources().getDrawable(R.drawable.ic_launcher));
Intent i_Edit_ts = new Intent(this, ViewTimeSheet.class);
ts_Time_sheet.setContent(i_Edit_ts);

thst.addTab(ts_project);
thst.addTab(ts_Edit_ts);
thst.addTab(ts_Time_sheet);

thst.getTabWidget().getChildAt(0)
.setBackgroundResource(R.drawable.tab_center_selector);
thst.getTabWidget().getChildAt(1)
.setBackgroundResource(R.drawable.tab_center_selector);
thst.getTabWidget().getChildAt(2)
.setBackgroundResource(R.drawable.tab_center_selector);
}

}


Now you can check with your device..,


Thank You!