How to make the selector under tabs to scroll to the selected tab?

Question

I want to scroll the selector(pink line) to the next tab(on-fillup). my fragments are scrolling but the selector is unable to scroll. can anyone help?

MainActivity.java

//Adding the tabs using addTab() method
    tabLayout.addTab(tabLayout.newTab().setText("On Reserved"));
    tabLayout.addTab(tabLayout.newTab().setText("On Fill-up"));
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

activity_main.java

<!-- our tablayout to display tabs  -->
<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<!-- View pager to swipe views -->
<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"></android.support.v4.view.ViewPager>

check this [answer](https://stackoverflow.com/questions/35815615/how-to-make-scrollable-tab-in-android) — JunJie Wang, Sep 20 '18 at 05:18
I tried it @JunJieWang but it doesn't work for me. thank you. more help appreciated. — Anil Kumar Kokkiligadda, Sep 20 '18 at 06:07
If your tabs are not being selected with the pager move, have you called this method tabLayout.setupWithViewPager(viewPager) ? — Akshay Paliwal, Sep 20 '18 at 07:14

score 5 · Answer 1 · answered Sep 20 '18 at 06:59

PagerAdapter pagerAdapter = new PagerAdapter(getChildFragmentManager());
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(mBinder.viewPager);//This line is important to make tab scrollable with viewpager and it should be after set adapter to viewpager

score 1 · Answer 2 · edited Nov 16 '18 at 06:30

Try this solution

TabTextColor sets the color for the title of the tabs, passing a ColorStateList here makes tab change colors in different situations such as selected, active, inactive etc. TabIndicatorColor sets the color for the indiactor below the tabs.

tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.drawable.tab_selector));
tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.indicator));

Hope this will work for you.

score 1 · Accepted Answer · answered Sep 20 '18 at 07:09

you have to assign tablayout in viewpager like below code

// listener for tablayout when you select tab for change view
tabLayout.setOnTabSelectedListener(this);
 // assign tablayout in viewpager
 viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

this is override method when you tap on tab then viewpager is change

@Override
public void onTabSelected(TabLayout.Tab tab) {
    viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}

score 0 · Answer 4 · edited Jan 05 '21 at 15:23

0

This problem occur when you dont set viewpager with tablayout and viceversa too. So, please add following lines to your code...

PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), nooftabs);
viewpager.setAdapter(pagerAdapter);

tabLayout.setupWithViewPager(viewpager, true);

Hope this may help you

edited Jan 05 '21 at 15:23

Biscuit

4,840
4
26
54

answered Sep 20 '18 at 07:11

Deeksha

536
5
14

How to make the selector under tabs to scroll to the selected tab?

4 Answers4