Skip to content Skip to sidebar Skip to footer

Change Tab Background Color And Remove Divider Line Between Tabs

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 ta

Solution 1:

Use:

tabHost.getTabWidget().setDividerDrawable(null);

to remove the divider lines.

Solution 2:

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

<TabWidgetandroid: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"

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

publicstatic View prepareTabView(Context context, String text, Drawable background) {
    Viewview= LayoutInflater.from(context).inflate(R.layout.fake_native_tab, null);
    TextViewtv= (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"?><LinearLayoutxmlns: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" />
--><TextViewandroid: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);

Post a Comment for "Change Tab Background Color And Remove Divider Line Between Tabs"