View pager's tab layout text is not updating

Question

Screen shot of Tab where text color remains highlighted I am working with android view pager and tab layout. In xml of tab layout I set the tablayout with this code

        `<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabBackground="@color/LightGrey"
        app:tabIndicatorColor="@color/app_highlight_color"
        app:tabIndicatorHeight="3dp"
        app:tabTextAppearance="@style/MyCustomTextAppearance"
        app:tabSelectedTextColor="@color/app_highlight_color"
        app:tabGravity="fill"/>`

The issue is when I change the viewpager's page/fragment with swipe left/right it is working fine and change the text color of tabs from normal to highlighted and vice versa.

But when i click on any tab to change the fragment the fragment changes but the text of tabs still remains selected. It should be un selected when user touches the other tab.This is my set up tab layout java function

    private void setupTabLayout() {
tabLayout.setTabTextColors(R.color.LightGrey,R.color.app_highlight_color);
    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {


            //tab.setCustomView(R.drawable.tab_trending_selected);
            switch (tab.getPosition()) {
                case AppConstants.TRENDING_INDEX:
                    tab.setIcon(R.drawable.tab_trending_selected);
                    tab.select();

                    break;
                case AppConstants.DUB_INDEX:
                    tab.setIcon(R.drawable.tab_dub_selected);
                    tab.select();
                    break;
                case AppConstants.PROFILE_INDEX:
                    tab.setIcon(R.drawable.tab_profile_selected);
                    tab.select();
                    break;
                default:
                    break;
            }
        }

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

            switch (tab.getPosition()) {
                case AppConstants.TRENDING_INDEX:
                    tab.setIcon(R.drawable.tab_trending_unselected);
                    //tab.setText("Trending");

                    break;
                case AppConstants.DUB_INDEX:
                    tab.setIcon(R.drawable.tab_dub_unselected);
                   // tab.setText("Dub");
                    break;
                case AppConstants.PROFILE_INDEX:
                    tab.setIcon(R.drawable.tab_profile_unselected);
                   // tab.setText("Profile");
                    break;
                default:
                    break;
            }

        }

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

        }
    });
    tabLayout.setTabTextColors(getResources().getColor(R.color.Gray),     getResources().getColor(R.color.app_highlight_color));
    tabLayout.getTabAt(AppConstants.TRENDING_INDEX).setIcon(R.drawable.tab_trending_selected);
    tabLayout.getTabAt(AppConstants.DUB_INDEX).setIcon(R.drawable.tab_dub_unselected);
    tabLayout.getTabAt(AppConstants.PROFILE_INDEX).setIcon(R.drawable.tab_profile_unselected);

    tabLayout.getTabAt(AppConstants.TRENDING_INDEX).select();


}

Answer 1

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.

Add this code with your viewPage this is worked for me.

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

        @Override
        public void onPageSelected(int position) {

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

Answer 2

Try this:

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageSelected(int pos) {
// set the title
        ab.setSelectedNavigationItem(pos);
        ab.setTitle(titles[pos]);
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {

    }

    @Override
    public void onPageScrollStateChanged(int arg0) {

    }
});

Answer 3

Use some thing like this.

<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/colorAccent</item>
    <item name="tabSelectedTextColor">@color/colorAccent</item>
    <item name="tabTextAppearance">@style/CategoryTabTextAppearance</item>
    <item name="tabBackground">@color/colorPrimary</item>
</style>

<style name="CategoryTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textColor">@color/secondaryText</item>
</style>