Viewpager 2 conflict with SwipeRefreshLayout - android-recyclerview

Question

Im trying to use SwipeRefreshLayout to load data whenever user swipe down. It works correctly in Viewpager but when I user Viewpager2 it causes :
2022-03-08 09:12:39.733 6489-6489/com.example.myapplication E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.example.myapplication, PID: 6489
java.lang.IndexOutOfBoundsException: Index: 0, Size: 0
at java.util.ArrayList.get(ArrayList.java:437)
at androidx.recyclerview.widget.StaggeredGridLayoutManager$Span.calculateCachedStart(StaggeredGridLayoutManager.java:2531)
at androidx.recyclerview.widget.StaggeredGridLayoutManager$Span.getStartLine(StaggeredGridLayoutManager.java:2548)
at androidx.recyclerview.widget.StaggeredGridLayoutManager.checkSpanForGap(StaggeredGridLayoutManager.java:410)
at androidx.recyclerview.widget.StaggeredGridLayoutManager.hasGapsToFix(StaggeredGridLayoutManager.java:359)
at androidx.recyclerview.widget.StaggeredGridLayoutManager.checkForGaps(StaggeredGridLayoutManager.java:282)
at androidx.recyclerview.widget.StaggeredGridLayoutManager.onScrollStateChanged(StaggeredGridLayoutManager.java:317)
at androidx.recyclerview.widget.RecyclerView.dispatchOnScrollStateChanged(RecyclerView.java:5197)
at androidx.recyclerview.widget.RecyclerView.setScrollState(RecyclerView.java:1550)
at androidx.recyclerview.widget.RecyclerView$ViewFlinger.run(RecyclerView.java:5397)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:972)
at android.view.Choreographer.doCallbacks(Choreographer.java:796)
at android.view.Choreographer.doFrame(Choreographer.java:727)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:957)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:223)
at android.app.ActivityThread.main(ActivityThread.java:7656)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)>
It happen when I change to the second page and return to the first page and swipe down to refresh. Below is my layout of the first page.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="viewModel"
type="com.example.myapplication.viewmodel.FirstViewModel"/>
</data>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
app:onRefreshListener="#{() -> viewModel.onRefresh()}"
app:refreshing="#{viewModel.spinner}"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
>
<TextView
android:id="#+id/tvContent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="News"
android:textAllCaps="true"
android:textSize="30sp"
android:textStyle="bold"
android:gravity="center"
android:onClick="#{() -> viewModel.nextFragment()}"
android:textColor="#color/red"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/csArticles"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/tvContent"
>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvNews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="50dp"
app:layoutManager="androidx.recyclerview.widget.StaggeredGridLayoutManager"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
tools:listitem="#layout/item_news" />
<ProgressBar
android:id="#+id/spinner"
android:layout_width="0dp"
android:visibility="gone"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/csNoArticles"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/tvContent"
app:layout_constraintBottom_toBottomOf="parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No articles"
android:textSize="25sp"
android:textColor="#color/navy"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</layout>
And the last is the function which I use to init Viewpager2Adapter.
fun ViewPager2.initFragment(
fragment: Fragment,
fragments: MutableList<Fragment>
): ViewPager2 {
adapter = object : FragmentStateAdapter(fragment) {
override fun createFragment(position: Int) = fragments[position]
override fun getItemCount() = fragments.size
}
return this
}
Thank for reading.