CODEWITHSUNDEEP
androidtabsandroid-tablayout
Virthuss
Virthuss

Reputation: 3223

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;

Upvotes: 32

Views: 30992

Answers (6)

Rohit P Soman
Rohit P Soman

Reputation: 1161

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

app:tabIndicator="@null"

Upvotes: 9

Sachin
Sachin

Reputation: 1448

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

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

Upvotes: 5

mysticfyst
mysticfyst

Reputation: 347

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.

Upvotes: 19

Virthuss
Virthuss

Reputation: 3223

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

Upvotes: 68

jomartigcal
jomartigcal

Reputation: 813

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

Upvotes: 4

wyverny
wyverny

Reputation: 482

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)

Upvotes: 4

Related Questions