TabLayout tab text not highlighted after viewPager.setCurrentItem()

Question

I'm having an issue with the TabLayout attached to my ViewPager. Repro steps:

1. Start on the first tab.
2. Select the 2nd tab.
3. Press the back button--my code sees that the user is on the second tab and calls viewPager.setCurrentItem(0) to return the user to the first tab.
4. However, as shown in the picture, the 2nd tab text is still selected while the 1st tab text is grayed out. (Although the pink bar goes back to the 1st tab like it should.)

What am I missing?

tabLayout = (TabLayout) rootView.findViewById(R.id.tab_layout_main);
tabLayout.addTab(tabLayout.newTab().setText(getActivity().getString(R.string.main_tab_grades)));
tabLayout.addTab(tabLayout.newTab().setText(getActivity().getString(R.string.main_tab_schedule)));

viewPager = (NonSwipeableViewPager) rootView.findViewById(R.id.pager_main);
pagerAdapter = new PagerAdapterMain(getActivity(), getChildFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(pagerAdapter);

viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

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


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

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

Frayda

Answer 1

you could try to select the tab through the tablayout instead of the viewPager.

tabLayout.getTabAt(0).select();

Odelia

Thank you! I had tried calling both viewPager.setCurrentItem(0) and tabLayout.getTabAt(0).select(), but it wasn't working. Now I'm only calling the latter is behavior is as expected. – Frayda

Which support lib version are you using. It's not working for me and I have the exact same problem. – Prase

It could really be about the version, I'm using com.android.support:design:23.2.1, in this link guides.codepath.com/android/… you could find some useful tips for working with Tabs @Prase – Odelia

Answer 2

Maybe it is a bug of Design Library. As the issue said: https://code.google.com/p/android/issues/detail?id=192834

And the codes worked for me :

// mViewPager.setCurrentItem(position);

mTabLayout.getTabAt(position).select();

Predestination

Answer 3

Faced unique problem. When we set setCurrentItem. It does not change tablayout's tab. Then you have to addOnPageChangeListener on viewpager in which you have to select the tablayout's tab manually for selected viewpager's position. Then setupWithViewPager.

Note : setupWithViewPager needs to be set only after addOnPageChangeListener added. God knows why. This is what worked. if I setupWithViewPager before, it does not work. Again, almighty only knows.

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                viewPager.setCurrentItem(position,false);
                tabLayout.getTabAt(position).select();
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        /*
          NOTE: This is setup after addOnPageChangeListener. Don't know why but this is what works. Otherwise tabLayout.does not select.
        */
        tabLayout.setupWithViewPager(this.viewPager);

Wendolyn

Answer 4

none of the above worked... finally fixed setting scroll position

tabLayout.setScrollPosition(position,0f,true);

Ceruse

This worked for me as I'm using a ViewPager & TabLayout. thanks. – Caroncarotene

Answer 5

tabLayout.getTabAt(0).getCustomView().setSelected(true); I don't think it's a bug for TabLayout,if you want to set the first view highlight,you should call the method like me,then the customView you set will be invalidated

Keyte

Answer 6

I add this can fix this bug: tabLayout.getTabAt(0).getCustomView().setSelected(true);

Nap

Answer 7

I fixed it upgrading to com.android.support:design:23.4.0 version 23.1.0 had an issue.

Espalier