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>
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" />