ViewPager2 with Tablayout inside a fragment shows no swipe effect in kotlin

Question

In my MainActivity I have a viewpager2 with Tablayout with 5 tabs. The swipe there is working fine. But in one of the 5 tabs I again have a viewpager2 with a tablayout of 3 tabs. In the inner viewpager2 (which is inside a fragment) the swipe isnt working at all and I don't understand why.

The outer viewpager2 is inside a activity while the inner viewpager2 is in the fragment

Viewpager2 inside fragment, swipe not working:

class FreelancerMyProjectsFragment : Fragment() {

    lateinit var binding : FragmentFreelancerMyProjectsBinding
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        binding = DataBindingUtil.inflate(inflater,R.layout.fragment_freelancer_my_projects, container, false)



        setUpViewPager()
        addTabs()

        return binding.root
    }

    private fun addTabs() {

        TabLayoutMediator(binding.projectsTabLayout, binding.projectsViewPager) { tab, position ->
        }.attach()


        binding.projectsTabLayout.getTabAt(0)?.text =resources.getText(R.string.active)
        binding.projectsTabLayout.getTabAt(1)?.text =resources.getText(R.string.bids)
        binding.projectsTabLayout.getTabAt(2)?.text =resources.getText(R.string.past)
    }

    private fun setUpViewPager() {

        val adapter = ScreenSlidePagerAdapterNewForFragment(this)

        adapter.addFragment(ActiveProjectsFragment())

        adapter.addFragment(BidsFragment())

        adapter.addFragment(PastProjectFragment())

        binding.projectsViewPager.offscreenPageLimit = 3

        binding.projectsViewPager.adapter = adapter

    }
}


class ScreenSlidePagerAdapterNewForFragment(fragment: Fragment) : FragmentStateAdapter(fragment) {

        var fragmentList: ArrayList<Fragment> = ArrayList()

        public fun addFragment(fragment: Fragment) {

            fragmentList.add(fragment)

        }


        override fun getItemCount(): Int{ return fragmentList.size}

        override fun createFragment(position: Int): Fragment {return fragmentList[position]}
    }

And here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/projectsViewPager"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@+id/projectsTabLayout"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent">

        </androidx.viewpager2.widget.ViewPager2>


        <com.google.android.material.tabs.TabLayout
            android:id="@+id/projectsTabLayout"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginHorizontal="40dp"
            app:tabTextAppearance="@style/ProjectTabLayoutFreelancer"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

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



    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

Please can someone tell me what I'm doing wrong?

Answer 1

The outer Viewpager is preventing the inner viewpager from receiving touch events. You need to intercept the event and stop the outer viewpager from swiping. See the link for implemented solution code