Facing Issue with Android TabLayout Tabs Click

Question

I implemented a TabLayout having three Tabs. When I Swipe the Pages Everything Work Fine, it also works when I only use tab clicks to navigate. But the problem arise when I Swipe the page and click on any of the previously selected tab, only the tab indicator changes to the new tab but the text highlight and the pages are not changing.

I Checked the click listener of the TabLayout, it is not executing in the above situation.

More Info:

minSdk:16
targetSdk:24

I tried support libraries 24.0.0 and 24.1.1

TabSelectedListener.

        tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tabPages.setCurrentItem(tab.getPosition());
        }

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

        }

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

        }
    });

PagerAdapter

public class TabPageAdapter extends FragmentStatePagerAdapter {
public TabPageAdapter(FragmentManager fm) {
    super(fm);
}

@Override
public Fragment getItem(int position) {
    Fragment f1 = new Fragment1();
    Fragment f2 = new Fragment2();
    Fragment f3 = new Fragment3();

    switch (position) {
        case 0:
            return f1;
        case 1:
            return f2;
        case 2:
            return f3;
    }
    return null;
}


@Override
public int getCount() {
    return 3;
}

}

Answer 1

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.addTab(tabLayout.newTab().setText("Comparison"));
        tabLayout.addTab(tabLayout.newTab().setText("Details"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        final PagerAdapter adapter = new PagerAdapter
                (getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        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) {

            }

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

            }
        });

insert this code in activity. add below code in activity xml file

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorM3signin"
        app:tabSelectedTextColor="@color/com_facebook_button_background_color_pressed"
        app:tabTextColor="@color/com_facebook_button_background_color_pressed"
        android:elevation="6dp"
        android:inputType="textCapCharacters"
        app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:tabIndicatorColor="@color/com_facebook_button_background_color_pressed"
        app:tabIndicatorHeight="5dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_below="@+id/toolbar" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>

check this PagerAdapeter class.

public class PagerAdapter extends FragmentStatePagerAdapter {
    int mNumOfTabs;

    public PagerAdapter(FragmentManager fm, int NumOfTabs) {
        super(fm);
        this.mNumOfTabs = NumOfTabs;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                TabFragmentOne tab1 = new TabFragmentOne();
                return tab1;
            case 1:
                TabFragmentTwo tab2 = new TabFragmentTwo();
                return tab2;

            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return mNumOfTabs;
    }
}

Answer 2

You can avoid the OnTabSelectedListener entirely, TabLayout has a convenience method for this:

tabs.setupWithViewPager(tabPages);