How do I remove the selected tab indicator from the TabWidget?

Question

Here's what I'd like to remove :

enter image description here

How do I replace the indicator showing which tab is currently shown as well as the blue line that spans the entire tabwidget?

To Specify: All I want indicating which tab is selected is this :

tab_button_active.9.png should be shown as background if the tab is SELECTED
tab_button_inactive.9.png should be shown as the background if the tab is NOT SELECTED.

edit : Setting tabStripEnabled to false has no effect. Adding a style to it and having "@android:style/Widget.Holo.ActionBar" as its parent is also not possible since im targetting API level 7 and the ActionBar was implemented in API level 11.

Did you try this stackoverflow post: http://stackoverflow.com/questions/10240756/android-how-to-remove-selected-tab-highlight-color-on-press-highlight-on-tabw — f20k, Mar 07 '13 at 16:33
You can customize everything about the actionbar. There is a good tutorial [here.](http://android-developers.blogspot.it/2011/04/customizing-action-bar.html) And a similar question [here.](http://stackoverflow.com/a/14589743/2015318) — StarsSky, Feb 03 '13 at 12:14

score 45 · Answer 1 · answered Jan 28 '16 at 14:06

This line app:tabIndicatorHeight="0dp" solve the problem for me in xml

 <android.support.design.widget.TabLayout
        android:id="@+id/view_bottom_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorHeight="0dp"             //this line
        app:tabGravity="fill"
        app:tabMode="fixed" />

score 41 · Answer 2 · answered Nov 16 '15 at 16:04

41

I have yet another hack.

    TabLayout tabLayout = (TabLayout) fragmentView.findViewById(R.id.tabs);
    tabLayout.setSelectedTabIndicatorHeight(0);

It's basically the same idea as Eleojasmil's.

answered Nov 16 '15 at 16:04

Bart Burg

4,786
7
52
87

1

Now java says ```tabLayout.setSelectedTabIndicatorHeight(0)``` method deprecated. – Muhammadakbar Rafikov Jul 05 '18 at 06:46
deprecated now - use color changing. – danyapd Mar 26 '22 at 10:51

score 17 · Accepted Answer · answered Mar 07 '13 at 00:52

If android:tabStripEnabled="false" did not work then I also assume calling setStripEnabled(boolean stripEnabled) will have no effect as well. If all of this is true then your problem is probably not in TabWidget.

I would suggest looking at your tab indicator. Try these modifications. This code is taken from a fragment that has tabs.

Here is the code that creates the tab indicator view.

    View indicator = LayoutInflater.from(getActivity()).inflate(R.layout.tab,
(ViewGroup) mRoot.findViewById(android.R.id.tabs), false);

        TabSpec tabSpec = mTabHost.newTabSpec(tag);
        tabSpec.setIndicator(indicator);
        tabSpec.setContent(tabContentId);

Your tab indicator view would probably like similar to this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:background="@drawable/tabselector"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tab1icon"/>

</LinearLayout>

Now the important part here is the android:background="@drawable/tabselector" in the LinearLayout. Mine looks like this.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item
        android:state_focused="false"
        android:state_selected="false"
        android:state_pressed="false"
        android:drawable="@drawable/tab_unselected_light" />
    <item
        android:state_focused="false"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/tab_selected_light" />
    <!-- Focused states -->
    <item
        android:state_focused="true"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/tab_focused_light" />
    <!-- Pressed state -->
    <item
        android:state_pressed="true"
        android:drawable="@drawable/tab_pressed_light" />
</selector>

This tabselector.xml is where you will swap @drawable/tab_pressed_light with your @drawable/tab_button_active and @drawable/tab_unselected_light with @drawable/tab_button_inactive

Be sure to check that all of your drawables that go into your tabselector.xml do not have the blue strips along the bottom. As I look at your image I can see little 5px gaps along that strip this is what gave me the idea that the strip was not from your TabWidget. Hope this helps.

android:tabStripEnabled="false" was not available for me. I instead had to use app:tabIndicatorHeight="0dp" — pyRabbit, Mar 09 '17 at 14:46

score 17 · Answer 4 · answered Dec 10 '15 at 10:30

For TabLayout: Just Use app:tabIndicatorColor="@android:color/transparent"

<android.support.design.widget.TabLayout
        android:id="@+id/profile_album_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:tabBackground="@drawable/tab_background"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabPadding="@dimen/common_margin" />

score 9 · Answer 5 · edited Feb 12 '19 at 17:44

9

Add this to your TabLayout XML:

app:tabIndicator="@null"

edited Feb 12 '19 at 17:44

double-beep

5,031
17
33
41

answered Feb 12 '19 at 17:43

Catalin

109
1
2

Eleojasmil J Milagrosa · Answer 6 · 2015-11-12T03:18:54.240

7

there is one line answer to that you have only to change the color of the indicator into a transparent

color.xml

 <color name="transparent2">#00000000</color>

and put this line to your tabwidget

tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.transparent2));

or

app:tabIndicatorColor="@color/transparent2"

edited Nov 12 '15 at 03:18

answered Nov 12 '15 at 02:44

Eleojasmil J Milagrosa

1,944
1
13
15

for transparent color: android.R.color.transparent – kaya Feb 02 '17 at 14:27

score 6 · Answer 7 · edited Jan 18 '16 at 09:07

6

Try setting the Tab indicator height to zero:

tabLayout.setSelectedTabIndicatorHeight(0);

edited Jan 18 '16 at 09:07

Viral Patel

32,418
18
82
110

answered Jan 18 '16 at 08:31

Code mx

61
1
5

2

Good job repeating my answer :) – Bart Burg Feb 01 '17 at 09:13
1

It's now deprecated – yossharel Dec 20 '18 at 07:45
deprecated now - use color changing. – danyapd Mar 26 '22 at 10:51

score 4 · Answer 8 · answered Jun 14 '19 at 15:02

4

Use tabLayout.setSelectedTabIndicator(0).

tabLayout.setSelectedTabIndicatorHeight(0) is now deprecated and tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT) won't perform as well because it uses transparency.

answered Jun 14 '19 at 15:02

Dan Bray

7,242
3
52
70

score 4 · Answer 9 · answered Sep 28 '20 at 12:52

Use this app:tabIndicator="@null"

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="fill"
    app:tabIndicator="@null"
    app:tabMode="fixed" />

score 3 · Answer 10 · answered Oct 04 '19 at 06:14

3

Use

    tabLayout.setSelectedTabIndicator(null);

This will set the selected indicator drawable to null.

answered Oct 04 '19 at 06:14

Abhishek Panwar

31
3

score 2 · Answer 11 · answered Feb 03 '13 at 12:13

2

Set attribute android:tabStripEnabled="false" for your TabWidget.

answered Feb 03 '13 at 12:13

Swayam

16,294
14
64
102

3

setting android:tabStripEnabled="false" in the TabWidget has no effect. – CodePrimate Feb 03 '13 at 12:14
Oh..too bad.. try `android:tabStripEnabled="false" android:alpha="0" ` – Swayam Feb 03 '13 at 12:23
2

That would make the entire tabwidget transparent – CodePrimate Feb 03 '13 at 12:24
1

Then I would need to try it out myself and get back to you. Sorry for the disappointment. – Swayam Feb 03 '13 at 12:26

score 2 · Answer 12 · edited May 23 '17 at 12:10

I looked for a long time to remove the ugly holo menu bar tried everything. accidentally used this code for another reason and it thank god removed it.

    for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {          
        tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#FF0000")); // unselected
        TextView tv = (TextView)tabhost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); //Unselected Tabs
        tv.setTextColor(Color.parseColor("#ffffff"));
    }

Source: Android tabhost change text color style

score 2 · Answer 13 · answered May 31 '19 at 10:47

2

You can simply use this method on your tablayout to hide the tab indicator.

tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);

answered May 31 '19 at 10:47

Ayush Gupta

21
1

score 1 · Answer 14 · edited Feb 18 '20 at 07:49

1

here what I use, since the tabIndicator.setSelectedTabIndicatorHeight(0); is depcrecated

use tabIndicator.setSelectedTabIndicator(0);

edited Feb 18 '20 at 07:49

this.girish

1,296
14
17

answered Feb 18 '20 at 06:27

Albert Kristaen

11
1

score 1 · Answer 15 · answered Mar 17 '20 at 06:10

1

For the best setting app:tabIndicatorHeight="0dp" worked for me.

answered Mar 17 '20 at 06:10

Maulik Togadiya

594
5
10

score 0 · Answer 16 · answered Jul 12 '23 at 09:16

0

Use app:tabIndicatorColor="@color/transparent_color", it'll work 100%

answered Jul 12 '23 at 09:16

Ashish Choudhary

444
1
4
11

score -1 · Answer 17 · answered Mar 01 '13 at 09:06

-1

I assume you are using ActionBarSherlock. The problem with using a TabWdiget is, that it is not part of ABS, so it will look "native" for each Android Version. For me, the best approach for tab navigtion with ABS is to use a ViewPager and ViewPagerIndicator and style the indicator. Downside is, that your tabs must be fragments. If you need your tabs to be activities then you should take a look if the guys at HoloEveryhwhere have managed to add the TabWidget.

answered Mar 01 '13 at 09:06

stoilkov

1,686
1
11
18

I'm not using ABS. Simply the v4 support library. – CodePrimate Mar 01 '13 at 09:18
Either way, you don't need ABS for my approach. I mentioned it because it works with ABS. – stoilkov Mar 01 '13 at 11:33
I think you missed the part that you provide a solution for the OPs question. – ericosg Dec 05 '13 at 17:21

score -2 · Answer 18 · edited Sep 22 '16 at 08:41

-2

tabHost.getTabWidget().setStripEnabled(false);
tabHost.getTabWidget().getChildAt(1).setBackgroundColor(getResources().getColor(R.color.tabcolor));
tabHost.getTabWidget().getChildAt(2).setBackgroundColor(getResources().getColor(R.color.tabcolor));

More info here

edited Sep 22 '16 at 08:41

Diligent Key Presser

4,183
4
26
34

answered Sep 22 '16 at 08:00

M.HUSAIN NANDOLIYA

1
2

How do I remove the selected tab indicator from the TabWidget?

18 Answers18

Linked