Tabs in TabLayout aren't available for click

Question

I've got simple tabLayout within Fragment file which is CoordinatorLayout. It works good, when user swipes, different Fragments are displayed.

The problem is, tabs aren't respond for clicking, user cannot select particular tab,it has oportunity to swipe only

Below I launch files containing XML, ViewPager2 adapter, and Fragment.java in which I've implemented mechanism for swiping.

For global, in MainActivity I've implemented toolbar, that's why in Fragment's TabLayout I'm using margin top 50dp. I also lunch its code.

 <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainFragment">

    <com.google.android.material.tabs.TabLayout

        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MyApp.TabLayout"
        android:layout_marginTop="56dp"
        android:layout_below="@+id/toolbar"
        app:tabMode="fixed" />
 
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
      app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end|right">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/minusFab"
            android:visibility="invisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_remove_circle_outline_24px"
            app:layout_constraintEnd_toEndOf="@id/plusFab"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/plusFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="24dp"
            android:src="@drawable/ic_add_circle_outline_24px"
            app:layout_constraintBottom_toTopOf="@+id/mainFab"
            app:layout_constraintEnd_toEndOf="@+id/mainFab"
            app:layout_constraintTop_toBottomOf="@+id/minusFab" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/mainFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"

            android:src="@drawable/ic_expand_less_24px"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

I've configured all mechanisms responsible for tabs logic:

    public class ViewPagerAdapter extends FragmentStateAdapter {


    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position)
        {
            case 0: return new FirstFragment();
            case 1: return new SecondFragment();
            case 2: return new ThirdFragment();
            default:
                return  null;
        }

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

And implementation in Fragment.Java

public class MainFragment extends Fragment {

public MainFragment() {
    // Required empty public constructor
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {


    View view = inflater.inflate(R.layout.fragment_main, container, false);


    ViewPager2 viewPager2 = view.findViewById(R.id.viewPager);
    viewPager2.setAdapter(new ViewPagerAdapter(getActivity()));
    TabLayout tabLayout = view.findViewById(R.id.tab_layout);
    TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(
            tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
        @Override
        public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                switch (position){
                    case 0: tab.setText("First");
                        break;
                    case 1: tab.setText("Second");
                        break;
                    case 2: tab.setText("Third");
                        break;
                }
        }
    }
    );
    tabLayoutMediator.attach();
    // Inflate the layout for this fragment
    return view;
}

}

MainActivity Layout:

   <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.FragmentsWithTabs.AppBarOverlay"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/Theme.FragmentsWithTabs.PopupOverlay">

            <com.google.android.material.switchmaterial.SwitchMaterial
                android:id="@+id/color_mode_switch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|end"
                android:text="Switch here"
                android:textAppearance="@style/TextAppearance.AppCompat.Small" />
        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        tools:layout_editor_absoluteX="127dp"
        tools:layout_editor_absoluteY="297dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

setOnTabSelectedListener is deprecated for the TabLayout, so you can use the following code

     tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
        override fun onTabSelected(tab: TabLayout.Tab?) {
           // add your code
        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
           // add your code
        }

        override fun onTabReselected(tab: TabLayout.Tab?) {
           // add your code
        }

    })

Answer 2

Finally I've came with an answer. In this situation, ViewPager2 was expanded on all screen hence overlapping clicks on TabLayout :)

So solution was simple, now MainFragment's ViewPager2 code looks like follows:

 <androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="629dp"
    android:layout_gravity="bottom"
    app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

Answer 3

You have to add listener on tablayout to listen tab select event. Like,

tabLayout.setupWithViewPager(viewPager);
tabLayout.setOnTabSelectedListener(
   new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
      //here you can write code to change page of viewpager based on tab id.
      // like, viewpager.setCurrentItem(0);
   }
});