Android Customize TabHosts Using XML

Question

I want to change the background color of the tabs when they're selected and unselected. Also, I wish to add some features to the TabHost like borders. I already have the tabs created and with the currently content.

To be more specific, I will upload a picture of what I wish to have. It shows three tabs, where the second is selected.

Answer 1

call this method in oncreate() method

setupTabHost(); 

and than use this for setting tabs name as in my case it is A2Z characters

for (ch = 'A'; ch <= 'Z'; ch++) {
            charToString = String.valueOf(ch);
            setupTab(new TextView(this), charToString);
        }  

finally outside of oncreate use this;

// TODO Auto-generated method stub
 private void setupTabHost() {
        // TODO Auto-generated method stub
        mTabHost = (TabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup();
    }              



                private void setupTab(final View view, final String tag) {
// TODO Auto-generated method stub
View tabview = createTabView(mTabHost.getContext(), tag);

TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview)
        .setContent(new TabContentFactory() {
            public View createTabContent(String tag) {
                return view;
            }
        });
mTabHost.addTab(setContent);

}

private View createTabView(final Context context, final String text) {
        // TODO Auto-generated method stub
        View view = getLayoutInflater().inflate(R.layout.tabs_bg, null);
        tabTextView = (TextView) view.findViewById(R.id.tabsText);
        tabTextView.setText(text);
        return view;
    }

It may be helpful for you.

Answer 2

first of all create tabwidget using tabhost.

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

            <HorizontalScrollView
                android:id="@+id/tabsHorizontalScrollView"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:fillViewport="true"
                android:scrollbars="none" >

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="0dip"
                    android:layout_marginRight="0dip"
                    android:fadingEdge="none"
                    android:showDividers="none" />
            </HorizontalScrollView>

            <!-- <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="#EFEFEF" /> -->

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

                <android.support.v4.view.ViewPager
                    android:id="@+id/viewPager"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />
            </FrameLayout>
        </LinearLayout>
    </TabHost>

here n my case i put my tabwidget inside horizontalscroll.

Now create a layout for tab background(i have created as tab_bg.xml) and paste this xml file.

tab_bg.xml

<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:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="@dimen/horizontal_scroll_padding_topbottom"
    android:paddingLeft="@dimen/horizontal_scroll_padding_leftright"
    android:paddingRight="@dimen/horizontal_scroll_padding_leftright"
    android:paddingTop="@dimen/horizontal_scroll_padding_topbottom" >

    <TextView
        android:id="@+id/tabsText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/tab_text_selector"
        android:textSize="@dimen/tab_txt_view_txt_size" />

</LinearLayout>

you can change color as per yours.

Again you create 4 xml file and put it into drawable folder.

In my case i used <1> tab_bg_selecter.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_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="@color/transparent" />
        <!--  Selected tab (using d-pad) -->
        <item android:state_focused="true" android:state_selected="true"
            android:state_pressed="false" android:drawable="@color/transparent" />
    </selector>

<2> tab_bg_selected.xml

<?xml version="1.0" encoding="UTF-8"?>

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >

        <gradient
            android:angle="-90"
            android:centerColor="#6EBD52"
            android:endColor="#6EBD52"
            android:startColor="#6EBD52" />

    </shape>

<3> tab_bg_unselected.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="-90"
        android:centerColor="#ffffff"
        android:endColor="#ffffff"
        android:startColor="#ffffff" />

</shape>

<4> tab_text_selecter.xml

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

if you want to change your tab text change at the time of selection of tab.

This Answer is lengthy but is fully customized and hope it will useful for you.