Change tab background color and remove divider line between tabs

Question

I want to show tabs in my application but by default in android between tabs there is divider line like this

                            Tab1 | Tab2 | Tab3 |

But i want to show tabs like this

                            Tab1 Tab2 Tab3

So i want to remove the divider line in between two tabs and also by default the tabs background color is gray color. so i want to change this into black color.

Please tell how to remove divider line in between two tabs and change the background color of tabs.

Thanks in advance.

Best Regards.

Answer 1

Use:

tabHost.getTabWidget().setDividerDrawable(null);

to remove the divider lines.

Answer 2

I had the problem in ICS, where divider was visible. None of the solutions worked except for the following.

<TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="bottom"
            android:layout_alignParentBottom="true"
            android:fadingEdge="none"
            android:showDividers="none" >
        </TabWidget>

Key line was android:showDividers="none"

Answer 3

Use this method and Layout to use your own layout for the tab. To remove the divider simply replace the background 9patch graphic with your own.

public static View prepareTabView(Context context, String text, Drawable background) {
    View view = LayoutInflater.from(context).inflate(R.layout.fake_native_tab, null);
    TextView tv = (TextView) view.findViewById(R.id.fakeNativeTabTextView);
    tv.setText(text);
    view.setBackgroundDrawable(background);
    return view;
}

fake_native_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fakeNativeTabLayout" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="center"
android:orientation="vertical" android:background="@drawable/default_tab_background">
<!--
       You can even define an Icon here (dont forget to set a custom icon in your code for each Tab):
    <ImageView android:id="@+id/fakeNativeTabImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:src="@drawable/icon" />
-->
    <TextView android:id="@+id/fakeNativeTabTextView"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:textColor="@color/tab_text_color" android:textSize="@dimen/text_size_tiny"
    android:text="Tab" android:ellipsize="marquee" />

</LinearLayout>

Usage (inside your TabActivity):

/* Create Tabs */
// reusable Tab Spec
TabHost.TabSpec spec;
Intent tabIntent;
tabHost = getTabHost();
Resources res = getResources();

// Tab 1:
tabIntent = new Intent().setClass(this, Favorite.class);
    spec = tabHost.newTabSpec(TAB_SOMETAB).setIndicator(
            prepareTabView(this, (String) getText(R.string.tab_favorite), res
                    .getDrawable(R.drawable.tab_favorite_background), 0)).setContent(tabIntent);
tabHost.addTab(spec);



// Tab 2:
tabIntent = new Intent().setClass(this, History.class);
spec = tabHost.newTabSpec(TAB_SOMEOTHERTAB).setIndicator(
            prepareTabView(this, (String) getText(R.string.tab_history), res
                    .getDrawable(R.drawable.tab_favorite_background), 0)).setContent(tabIntent);
tabHost.addTab(spec);