[FIXED] Making viewpager2 respond to tab click events

Issue

I currently have my viewpager2 set up with tablayout using TabLayoutMediator. The tablayout works perfectly with swipe gesture, but I also want the tabs to respond to direct click events. This is mycode:

OnCreate of Activity:

        viewPager = accessBinding.pager;
        pagerAdapter = new ScreenSlidePagerAdapter(this);
        viewPager.setAdapter(pagerAdapter);
        accessBinding.setLifecycleOwner(this);

        TabLayout tabLayout = accessBinding.accessTabs;
        TabLayout dotTabs = accessBinding.tabsDots;

        new TabLayoutMediator(tabLayout, viewPager,
                (tab, position) -> tab.setText(TAB_TITLES[position])
        ).attach();

        new TabLayoutMediator(dotTabs, viewPager,
                (tab, position) -> {}
        ).attach();

ScreenSlidePagerAdapter.java:

private static class ScreenSlidePagerAdapter extends FragmentStateAdapter {
        // The number of tabs.
        private final int NUM_TABS = 2;
        public ScreenSlidePagerAdapter(FragmentActivity fa) {
            super(fa);
        }

        @Override
        public Fragment createFragment(int position) {
            Log.d("lifecycle","viewpager createFragment");
            if(position==0)
                return new LoginFragment();
            else
                return new RegisterFragment();
        }

        @Override
        public int getItemCount() {
            return NUM_TABS;
        }
    }

Layout file:

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/accesslayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintVertical_weight="0">

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/topguideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.25" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/access_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/topguideline"
            app:tabGravity="fill" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs_dots"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/pager"
            app:tabBackground="@drawable/tab_selector"
            app:tabPadding="0dp"
            app:tabGravity="center"
            app:tabIndicatorHeight="0dp"
            app:tabIndicatorFullWidth="false"/>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="50dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/topguideline" />
</androidx.constraintlayout.widget.ConstraintLayout>

I have tried using

tabLayout.addOnTabSelectedListener(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) {

            }
        });

but it doesn't work. Please help me to resolve this. I think viewPager implementation of tabselected is overriding my implementation but I need to figure out how to make viewpager respond to click events as well

Solution

What helped me was changing the parent layout from a ConstraintLayout to a LinearLayout. Here's the post that helped me fix this issue: Android : TabLayout not responding to clicks

Answered By - Marco Aguilar
Answer Checked By - Marilyn (JavaFixing Volunteer)