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 |         


        

Answer 1

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 2

Use:

tabHost.getTabWidget().setDividerDrawable(null);

to remove the divider lines.

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