Search code examples
androidtabstabwidget

How to create a customize android tab widget, that the selected tab will change its default color background?


In my app, I have a tab widget which I want to change its selected tab to a different background color. I already set my tab widget's initial background to pink using android xml layout, then if I want to select a tab from the tab widget I would like to change the selected tab's background to gray.

Here is my code for my tab host activity :

public class TabHostActivity extends TabActivity {

    private TabHost tabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.activity_tabhost);
        UserAccount userAccount = new UserAccount();

        tabHost = (TabHost) findViewById(android.R.id.tabhost);
        tabTitle = (TextView) findViewById(R.id.tabTitle);


        TabSpec tab1 = tabHost.newTabSpec("First Tab");
        tab1.setContent(new Intent(this, HomeActivity.class));
        tab1.setIndicator("",getResources().getDrawable(R.drawable.home_icon));
        tabHost.addTab(tab1);

        TabSpec tab2 = tabHost.newTabSpec("Second Tab");
        tab2.setContent(new Intent(this, About.class));
        tab2.setIndicator("",getResources().getDrawable(R.drawable.about_icon));
        tabHost.addTab(tab2);


        TabSpec tab3 = tabHost.newTabSpec("Third Tab");
        tab3.setContent(new Intent(this, GridViewActivity.class));
        tab3.setIndicator("",getResources().getDrawable(R.drawable.gallery_icon));
        tabHost.addTab(tab3);
    }
}

Here is my xml file which I set the background of my tab widget to color pink:

<?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:id="@+id/LinearLayout01"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical">

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1" >
            </FrameLayout>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:background="#FCAFA6"
                android:tabStripEnabled="false">
            </TabWidget>
        </LinearLayout>

    </TabHost>

Solution

  • u can change tabwidget colour

    public static void setTabColor(TabHost tabhost) {
    for(int i=0;i<tabhost.getTabWidget().getChildCount();i++) {
        tabhost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#FF0000")); //unselected
    }
    tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(Color.parseColor("#0000FF")); // selected
    

    }