ViewPager2 with TabLayout not navigating correctly with large number of tabs

Question

I have tablayout and view pager2 as given below:

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="34dp"
        android:background="@color/bgd_color_light"
        android:clipChildren="false"
        android:clipToPadding="false"
        app:tabBackground="@color/bgd_color_light"
        app:tabGravity="fill"
        app:tabIndicator="@drawable/tab_indicator_round"
        app:tabIndicatorAnimationMode="elastic"
        app:tabIndicatorColor="@color/app_color"
        app:tabIndicatorGravity="stretch"
        app:tabMode="auto"
        app:tabRippleColor="@color/transparent"
        app:tabSelectedTextColor="@color/white"
        app:tabTextAppearance="@style/CustomTabText" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:orientation="horizontal" />
    
</LinearLayout>

I am using Tab layout mediator to move through tabs. I have 17 tabs, when I click on 5th or greater number tab, view pager scrolls to last position. Incorrect tab mapping. Here is the Fragment adapter code:

 package com.ai.wallpaper.adapters

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.lifecycle.Lifecycle
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.ai.wallpaper.fragments.WallpaperFragment
import com.ai.wallpaper.response.models.Category

 class WallpaperPagerAdapter(fragmentManager: FragmentManager, lifecycle: Lifecycle, private 
   val isPremium: Boolean, private val categoryList: MutableList<Category>) :
   FragmentStateAdapter(fragmentManager, lifecycle) {


 override fun createFragment(position: Int): Fragment {
     return WallpaperFragment.newInstance(categoryList[position].id, isPremium)
 }

  override fun getItemCount(): Int {
      return categoryList.size
   }
 }
  // adapter attach
 vp2.adapter = wallpaperPagerAdapter
        TabLayoutMediator(tabLayout, vp2) { tab, position ->
            //tab.text = catList[position].name
            tab.text = "Tab $position"
            //WallpaperHttpRequest.printMessage("VP2", position)
        }.attach()

Answer 1

I presume it is because you are instantiating these fragments without using your fragment manager. By default the adapter uses the fragment manager to create the first few pages but then you return anonymously created fragments. And because the fragment manager can only use the default factory you need to pass these parameters as arguments.

override fun createFragment(position: Int): Fragment
    {
        return fragmentManager.fragmentFactory.instantiate(
            classLoader,
            WallpaperFragment::class.java.name
        ).also {
            (it as WallpaperFragment).let { fr ->
                fr.arguments = Bundle().also { bundle -> bundle.putInt("ID_ARG", categoryList[position].id)
                bundle.putInt("PPREMIUM_ARG", isPremium) }
            }
        }
    }