Remove the selector line under current Tab for a TabLayout

Question

I am using a TabLayout with 3 tabs. I customized the view of my tabs and therefor, I need to remove the following line under my tabs ( the screenshot doesnt come from my app):

I am NOT using a TabHost or a TabWidget and therefor, I cannot use setStripEnabled(false). Setting the background to transparent doesnt change anything as well.

Here is my xml:

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:padding="4dip"
    android:layout_above="@+id/bottomcontent3"
    android:gravity="center_horizontal"
    android:background="@android:color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/comtabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp"
        app:tabMode="fixed"
        app:tabGravity="fill"
        android:background="@android:color/white" />

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/compager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

</android.support.design.widget.AppBarLayout>

All the answer I found were using TabHost, TabWidget. In my case, I'm using one TabLayout and three Tab. How can I remove this line in this case? Thanks a lot.

EDIT Some methods from TabLayout can't be resolved in my code for some reasons. There is the java code I use:

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.comtabs);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);


        // add tabs
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());

        RelativeLayout layout1 = (RelativeLayout) inflater.inflate(R.layout.communitytablayoutleft, container, false);
        RelativeLayout layout2 = (RelativeLayout) inflater.inflate(R.layout.communitytablayout, container, false);
        RelativeLayout layout3 = (RelativeLayout) inflater.inflate(R.layout.communitytablayoutright, container, false);
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);



        ViewPager pager = (ViewPager) view.findViewById(R.id.compager);
        CommunityPagerFragment adapter = new CommunityPagerFragment(getChildFragmentManager());

        pager.setAdapter(adapter);
        tabLayout.setupWithViewPager(pager);
        tabLayout.setOnTabSelectedListener(this);


        ((TextView)layout1.findViewById(R.id.tabtext)).setText(tabs[0]);
        ((TextView)layout2.findViewById(R.id.tabtext)).setText(tabs[1]);
        ((TextView)layout3.findViewById(R.id.tabtext)).setText(tabs[2]);



        tabLayout.getTabAt(0).setCustomView(layout1);
        tabLayout.getTabAt(1).setCustomView(layout2);
        tabLayout.getTabAt(2).setCustomView(layout3);
        //tabLayout.set

        return view;

and its import:

import android.support.design.widget.TabLayout;

score 66 · Accepted Answer · answered Dec 21 '15 at 04:54

As the two answers suggested, the key was the tabIndicatorHeight attribute.

However the method from the API was, for some reasons, unable to be solved. In this case you have to fix this directly from the xml, this way:

        app:tabIndicatorHeight="0dp"

In your <android.support.design.widget.TabLayout> Layout.

As an example:

<android.support.design.widget.TabLayout
    android:id="@+id/comtabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:tabIndicatorHeight="0dp"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"
    app:tabMode="fixed"
    app:tabGravity="fill"
    android:background="@android:color/white" />

score 19 · Answer 2 · answered Jul 14 '16 at 09:23

Even I faced the same problem recently. I came across the height xml attribute and changing it to 0dp did the trick for me.

app:tabIndicatorHeight="0dp"

OR

Similarly I feel that changing the color attribute of the indicator to the same as the background of the tabs should also do it. I have not tested this solution but i think it should also work.

app:tabIndicatorColor="#9cc8df"

The first option is better and it worked for me.

None of these are as good as actually disabling the indicator but solve the problem regardless.

app:tabIndicatorColor="@android:color/transparent" is a lot easier. — D. B., Nov 09 '18 at 10:51

score 9 · Answer 3 · answered Oct 16 '18 at 10:19

9

I think the best solution is setting the tab indicator to null.

app:tabIndicator="@null"

answered Oct 16 '18 at 10:19

Rohit P Soman

1,141
12
16

Sachin · Answer 4 · 2018-06-04T14:15:56.633

5

For TabLayout you have to use this - "tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);"

TabLayout tabLayout = (TabLayout) fragmentView.findViewById(R.id.tabs);
tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);

edited Jun 04 '18 at 14:15

answered Jun 10 '16 at 10:17

Sachin

1,307
13
23

score 4 · Answer 5 · answered Dec 21 '15 at 04:20

4

it seems there's API like;
void setSelectedTabIndicatorColor(int color)
void setSelectedTabIndicatorHeight(int height)

http://developer.android.com/reference/android/support/design/widget/TabLayout.html#setSelectedTabIndicatorColor(int)

answered Dec 21 '15 at 04:20

wyverny

472
5
9

I can't resolve those methods. let me edit my main post with the java code, maybe it will help. – Virthuss Dec 21 '15 at 04:42
I found a way to apply this through xml instead. I'll upvote you :) Thanks! – Virthuss Dec 21 '15 at 04:52

score 4 · Answer 6 · answered Dec 21 '15 at 04:22

4

You can set tab indicator height to 0 to "remove" it, for example use: tabLayout.setSelectedTabIndicatorHeight(0);

answered Dec 21 '15 at 04:22

jomartigcal

813
1
6
11

Are you using TabLayout from the Android Support Design Library? – jomartigcal Dec 21 '15 at 04:40
1

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); then tabLayout.setSelectedTabIndicatorHeight(0); – jomartigcal Dec 21 '15 at 04:40
Its exactly what I did. Still unable to resolve. Let me push my code in the main post. – Virthuss Dec 21 '15 at 04:41
I found a way to apply this through xml instead. I'll upvote you :) Thanks! – Virthuss Dec 21 '15 at 04:52
`setSelectedTabIndicatorHeight` was deprecated in support library 28.0.0 :( still works though – 0101100101 Sep 06 '18 at 04:23

Remove the selector line under current Tab for a TabLayout

6 Answers6

Linked