Virthuss Virthuss - 5 months ago 60
Android Question

Remove the selector line under current Tab for a TabLayout

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):

enter image description here

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

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