Android Studio – Issue with Fragment Switching Using TabLayout in Android ViewPager2

I’m encountering an issue in my Android application where I’m using a TabLayout along with ViewPager2. While the scroll functionality within the ViewPager2 works seamlessly, I’m facing difficulty in switching between fragments by tapping on the tabs.

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/viewPager2" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.viewpager2.widget.ViewPager2
import com.alzibdehsoftware.viewpager.databinding.ActivityMainBinding
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayout.Tab
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding
    lateinit var pager: ViewPager2
    lateinit var adapter: MyPagerAdapter
    var tabTitles = arrayOf("First","Second","Third")
    var fragmentList = listOf(FirstFragment(),SecondFragment(),ThirdFragment())
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initViewPager()
        initTabLayout()
        }

    private fun initTabLayout() {
        TabLayoutMediator(binding.tabLayout, pager) { tab, position ->
            tab.text = tabTitles[position]
        }.attach()
    }

    private fun initViewPager() {
         pager = findViewById<ViewPager2>(R.id.viewPager2)
        adapter= MyPagerAdapter(this,fragmentList)
        pager.adapter=adapter


    }
}

package com.alzibdehsoftware.viewpager

import android.graphics.drawable.DrawableContainer
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class MyPagerAdapter(val container: FragmentActivity, val fragmentList: List<Fragment>): FragmentStateAdapter(container) {
    override fun getItemCount(): Int {
return fragmentList.size
    }

    override fun createFragment(position: Int): Fragment {


        return fragmentList[position]

    }
}

here’s a GIF showing the issue

I have integrated a ViewPager2 with a TabLayout in my application to facilitate navigation between different fragments.
Each tab corresponds to a different fragment.
The ViewPager2 is populated with fragments using a custom PagerAdapter.
However, despite setting up the TabLayout and ViewPager2 as recommended in the Android documentation, tapping on the tabs does not result in the expected behavior of switching to the corresponding fragment. Instead, the tabs respond to touch events for scrolling, but the fragment switching functionality does not occur.

I have ensured that:

The TabLayout and ViewPager2 are correctly initialized in the layout XML file.
The PagerAdapter is properly set up to populate the ViewPager2 with the desired fragments.
The TabLayoutMediator is used to connect the TabLayout with the ViewPager2.