ViewPager2 not able to dynamically add remove fragment

Question

Removing/Adding fragments at index results in unexpected behaviour in Viewpager2. This was not possible with ViewPager but expected to work with Viewpager2. It causes duplicate fragments and out of sync TabLayout. Here is a demo project which reproduces this issue. There is a toggle button which removes a fragment and reattaches it at a particular index. In this case attached fragment should be green but it's blue and there are 2 blue fragments somehow.

here is how my adapter looks

class ViewPager2Adapter(activity: FragmentActivity) : FragmentStateAdapter(activity) {
    val fragmentList: MutableList<FragmentName> = mutableListOf()

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

    override fun createFragment(position: Int): Fragment {
        return when (fragmentList[position]) {
            FragmentName.WHITE -> WhiteFragment()
            FragmentName.RED -> RedFragment()
            FragmentName.GREEN -> GreenFragment()
            FragmentName.BLUE -> BlueFragment()
        }
    }

    fun add(fragment: FragmentName) {
        fragmentList.add(fragment)
        notifyDataSetChanged()
    }

    fun add(index: Int, fragment: FragmentName) {
        fragmentList.add(index, fragment)
        notifyDataSetChanged()
    }

    fun remove(index: Int) {
        fragmentList.removeAt(index)
        notifyDataSetChanged()
    }

    fun remove(name: FragmentName) {
        fragmentList.remove(name)
        notifyDataSetChanged()
    }

    enum class FragmentName {
        WHITE,
        RED,
        GREEN,
        BLUE
    }
}

I have filed a bug with google as well

score 12 · Answer 1 · answered Apr 27 '20 at 06:12

12

Turns out that you need to override these two methods if you are working with mutable collections in ViewPager2

override fun getItemId(position: Int): Long {
        return fragmentList[position].ordinal.toLong()
    }

    override fun containsItem(itemId: Long): Boolean {
        val fragment = FragmentName.values()[itemId.toInt()]
        return fragmentList.contains(fragment)
    }

Adding these two in my current adapter fixes the problem

answered Apr 27 '20 at 06:12

Abhishek Bansal

5,197
4
40
69

Did you have issue with fragments not reattaching on orientation/configuration change with this change? – ScruffyFox Jun 28 '20 at 18:35
@ScruffyFox I don't remember testing the configuration change scenario but that shouldn't be a problem because adapter is recreated and all fragments are recreated along with it. Make sure to create new fragments in `createFragment` always. – Abhishek Bansal Jun 28 '20 at 19:38
When I remove the fragment from the ViewPager, the associated ViewModel is null (same lifecycle as the fragment) and it doesn't update properly. How do you handle this scenario? – Funnycuni Aug 03 '20 at 08:37
Maybe associate the ViewModel with the parent activity instead? Also: https://developer.android.com/topic/libraries/architecture/viewmodel#sharing – pallgeuer Oct 04 '20 at 16:58
@user2066728 its the same thing. Just convert it to corresponding Java syntax. – Abhishek Bansal Feb 01 '21 at 18:16
@user2066728 and for someone who need - I found a good Java example [here](https://github.com/1136346879/ViewPage2/blob/master/app/src/main/java/com/example/viewpager2demo/FragmentTabStateActivity.java). – Taha Mar 24 '21 at 04:00

score 1 · Answer 2 · answered Apr 03 '21 at 15:12

This is weird on my side overriding

getItemId()
containsItem()

will just give undesirable behavior when using 3 kinds of Fragments.

In the end all I need was a simple FragmentStateAdapter class like this

class AppFragmentAdapter(private val fragmentList: MutableList<Pair<String, Fragment>>, fragment: Fragment) : FragmentStateAdapter(fragment) {

//    private var pageIds = fragmentList.map { fragmentList.hashCode().toLong() }

    override fun getItemCount(): Int = fragmentList.size

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

//    override fun getItemId(position: Int): Long = pageIds[position] // Make sure notifyDataSetChanged() works

//    override fun containsItem(itemId: Long): Boolean = pageIds.contains(itemId)

    fun getFragmentName(position: Int) = fragmentList[position].first

    fun addFragment(fragment: Pair<String, Fragment>) {
        fragmentList.add(fragment)
        notifyDataSetChanged()
    }

    fun removeFragment(position: Int) {
        fragmentList.removeAt(position)
        notifyDataSetChanged()
    }

}

Too bad I search for an immediate answer on how to make ViewPager2 dynamic without giving a shot first on the simplest approach I could come up. Many answer here on SO pointing out that getItemId() and containsItem() needs to be override when adding or removing Fragment(s) on ViewPager2 which gives some headache for almost 2 days. Felt betrayed.

ViewPager2 not able to dynamically add remove fragment

2 Answers2

Linked