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;

Lurcher

Answer 1

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" />

Lurcher

Answer 2

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.

Malissa

app:tabIndicatorColor="@android:color/transparent" is a lot easier. – Interfluent

Answer 3

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

app:tabIndicator="@null"

Abomb

Answer 4

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

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

Unctuous

Answer 5

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)

Easting

I can't resolve those methods. let me edit my main post with the java code, maybe it will help. – Lurcher

I found a way to apply this through xml instead. I'll upvote you :) Thanks! – Lurcher

Answer 6

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

Additive

Are you using TabLayout from the Android Support Design Library? – Additive

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); then tabLayout.setSelectedTabIndicatorHeight(0); – Additive

Its exactly what I did. Still unable to resolve. Let me push my code in the main post. – Lurcher

I found a way to apply this through xml instead. I'll upvote you :) Thanks! – Lurcher

setSelectedTabIndicatorHeight was deprecated in support library 28.0.0 :( still works though – Marasmus