Page(s) contain a ViewGroup with a LayoutTransition (or animateLayoutChanges="true"), which interferes with the scrolling animation

Question

I use fragments with ViewPager2, and I notice two relevant IllegalStateExceptions in production (I can't reproduce it myself) occurring in devices like Xiaomi, Yulong, asus, vivo running Android 8 or 9:

Fatal Exception: java.lang.IllegalStateException: Page can only be offset by a positive amount, not by -758
       at androidx.viewpager2.widget.ScrollEventAdapter.updateScrollEventValues(ScrollEventAdapter.java:280)
       at androidx.viewpager2.widget.ScrollEventAdapter.onScrolled(ScrollEventAdapter.java:178)
       at androidx.recyclerview.widget.RecyclerView.dispatchOnScrolled(RecyclerView.java:5173)
       at androidx.recyclerview.widget.RecyclerView$ViewFlinger.run(RecyclerView.java:5338)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1029)
       at android.view.Choreographer.doCallbacks(Choreographer.java:834)
       at android.view.Choreographer.doFrame(Choreographer.java:760)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1015)
       at android.os.Handler.handleCallback(Handler.java:873)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:224)
       at android.app.ActivityThread.main(ActivityThread.java:7083)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:537)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:928)

and

Fatal Exception: java.lang.IllegalStateException: Page(s) contain a ViewGroup with a LayoutTransition (or animateLayoutChanges="true"), which interferes with the scrolling animation. Make sure to call getLayoutTransition().setAnimateParentHierarchy(false) on all ViewGroups with a LayoutTransition before an animation is started.
       at androidx.viewpager2.widget.ScrollEventAdapter.updateScrollEventValues(ScrollEventAdapter.java:272)
       at androidx.viewpager2.widget.ScrollEventAdapter.onScrolled(ScrollEventAdapter.java:178)
       at androidx.recyclerview.widget.RecyclerView.dispatchOnScrolled(RecyclerView.java:5173)
       at androidx.recyclerview.widget.RecyclerView$ViewFlinger.run(RecyclerView.java:5338)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1029)
       at android.view.Choreographer.doCallbacks(Choreographer.java:841)
       at android.view.Choreographer.doFrame(Choreographer.java:769)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1015)
       at android.os.Handler.handleCallback(Handler.java:794)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:176)
       at android.app.ActivityThread.main(ActivityThread.java:6651)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:824)

While looking around, I passed by the following thread: https://issuetracker.google.com/issues/129530305, which as I understood correctly, seems to summarize to set animateLayoutChanges to false on any parent layout of viewPager2 and that's what I did. Unfortunately, that didn't solve my issue. Then I found another thread: java.lang.IllegalStateException: Page can only be offset by a positive amount, which seems to not help a lot. Any idea what else might cause the issue?

Answer 1

You need to perform this on each of your pages/Fragments

 View view = layoutInflater.inflate(R.layout.page, parent, false);
 ViewGroup viewGroup = view.findViewById(R.id.animated_viewgroup);
 viewGroup.getLayoutTransition().setAnimateParentHierarchy(false);

As looking at official documentation here

https://developer.android.com/reference/androidx/viewpager2/widget/ViewPager2

It states that

If your pages contain LayoutTransitions, then those LayoutTransitions must have animateParentHierarchy set to false. Note that if you have a ViewGroup with animateLayoutChanges="true" in your layout xml file, a LayoutTransition is added automatically to that ViewGroup. You will need to manually call getLayoutTransition().setAnimateParentHierarchy(false) on that ViewGroup after you inflated the xml layout.

same your error log talks about on very first line

Fatal Exception: java.lang.IllegalStateException: Page(s) contain a ViewGroup with a LayoutTransition (or animateLayoutChanges="true"), which interferes with the scrolling animation. Make sure to call getLayoutTransition().setAnimateParentHierarchy(false) on all ViewGroups with a LayoutTransition before an animation is started.

Answer 2

Another Problem I had was, that I did not got the above exception, but my viewpager2 started to flick / reload the page, when the transition started. I was a bit confused by these examples and how to add set setAnimateParentHiearchy to false, so I would like to add another example, how to fix this problem:

ViewPager Layout

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <!-- Toolbar -->
        <include
            android:id="@+id/headline"
            layout="@layout/registration_toolbar"
            app:isBold="@{false}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:outsideToolbarTitle="@{@string/fragment_user_data_toolbar_title}" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tl_user_data"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/headline" />

        <!-- This Viewpager contains a fragment, which has android:animateLayoutChanges="true" -->
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/vp_user_data"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginTop="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tl_user_data" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Fragment Layout (which will be inside the viewpager)

   <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/outerContraintLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true" > <-- THIS WILL CAUSE PROBLEMS

       <!-- Deleted unnecessary parts -->


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

If you want to keep android:animateLayoutChanges, you have to call this inside your fragments onViewCreated()

class MyFragmentInsideViewPagerThatHasProblems : Fragment(R.layout.above_layout) {

     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val viewGroup = requireView().findViewById<ConstraintLayout>(R.id.outerContraintLayout) as ViewGroup
        viewGroup.layoutTransition.setAnimateParentHierarchy(false)
     }
}