Remove the bottom line border in tab bar? (And change selected color)

Question

Is it possible to remove the bottom line showed in the tab bar? It is grey when not selected.

And is it possible to change the yellowish color to something else?

alt text

layout xml: http://pastebin.com/M2KqtH1r

score 39 · Answer 1 · edited Jan 19 '12 at 11:24

39

just do this in your tabWidget in your xml file.

android:tabStripEnabled="false"

hope you get it. ;)

edited Jan 19 '12 at 11:24

DaveShaw

52,123
16
112
141

answered Jan 19 '12 at 11:23

Jashan PJ

4,177
4
27
41

that should be accepted as the right answer as it is the easy way to do so. While doing like Good Guy Greg's answer remove my tab icon also. – Shreyash Mahajan Dec 07 '12 at 09:44
2

It is perfect. To enable in java, tabHost.getTabWidget().setStripEnabled(false); – Vinoj John Hosan Nov 03 '14 at 11:35

score 20 · Accepted Answer · answered Jul 25 '11 at 07:24

20

In AndroidManifest.xml:

 <activity android:name=".ActivityName" android:theme="@style/tabTheme"/>

In values/styles.xml:

 <style name="tabTheme" parent="android:style/Theme"> 
      <item name="android:tabWidgetStyle">@style/Widget.TabWidget</item>
 </style> 

 <style name="Widget.TabWidget" parent="android:Theme"> 
      <item name="android:tabStripEnabled">false</item>
 </style>

answered Jul 25 '11 at 07:24

Siklab.ph

991
11
17

5

Thanks for your addition, Could be good to know that the option "tabStripEnabled" was introduced in Android 2.2 i.e API Level 8. And for older API there is a workaround here :http://stackoverflow.com/questions/3164325/tabstripenabled-for-tabwidget-in-older-apis – droidgren Jul 25 '11 at 16:33

score 16 · Answer 3 · answered Mar 07 '16 at 06:23

android:tabStripEnabled="false" didnt work for me
By doing the following i was able to get it working

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabIndicatorHeight="0dp" />

These 2 are the main things

 app:tabIndicatorColor="@android:color/transparent"
            app:tabIndicatorHeight="0dp"

this is correct for TabLayout. Accepted answer works for TabWidget — Akhilendra Singh, Jul 30 '19 at 14:18

score 2 · Answer 4 · answered Nov 26 '12 at 15:39

Finally I solved it by:

android:alpha="0"

Here the full code:

<?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:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_horizontal">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:tabStripEnabled="false"
            android:alpha="0"
            style="@style/TabStyle" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</TabHost>

score 2 · Answer 5 · edited Jan 18 '23 at 20:13

2

You have customize your tab indicator. That is to overriding your tabwidget style. I had this problem already. Check these two posts: post 1 and post 2.

edited Jan 18 '23 at 20:13

halfer

19,824
17
99
186

answered Aug 23 '10 at 04:23

Praveen

90,477
74
177
219

So basically I have to copy these current tab images, add them with setIndicator and then the selector line will not appear? – droidgren Aug 23 '10 at 11:09
Hmm Is it possible to extract Android default tab images? – droidgren Aug 23 '10 at 11:10

score 1 · Answer 6 · edited May 23 '17 at 11:55

1

It seems that the way of doing that is to nest the tabwidget in a LinerLayout... Look here.

edited May 23 '17 at 11:55

Community

1
1

answered Aug 22 '10 at 23:32

Sephy

50,022
30
123
131

I was hoping that would work, but it didn't. The guy seem to be running 1.5 but I am running 2.2. However I have updated my post with my layout xml. – droidgren Aug 23 '10 at 04:37

score 0 · Answer 7 · edited Jul 30 '19 at 12:48

0

For disabling that line below use tab:

app:tabIndicator="@null"

edited Jul 30 '19 at 12:48

Timisorean

1,388
7
20
30

answered Jul 30 '19 at 12:23

subodh meshram

1
1

Remove the bottom line border in tab bar? (And change selected color)

7 Answers7

Linked