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; 

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

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.