Animating layouts using the "animateLayoutChanges" attribute in XML

Question

I have a LinearLayout, for which I apply android:animateLayoutChanges="true" in the parent LinearLayout. When the user clicks a toggle button, the LinearLayout "collapses" (I set the view's visibility as LinearLayout.GONE programmatically, and when they click it again, it expands by programmatically setting the visibility back to LinearLayout.VISIBLE.

The animation of it collapsing and expanding works correctly.

However, any items below the collapsable/expandable LinearLayout snap back to the top before the animation of the collapse is complete. The items that are snapping back are NOT inside the parent which has animateLayoutChanges set to true, and I don't think there is any way I can put them inside it.

Here is my layout hierarchy (I didn't mention the attributes to keep it short):

<!-- Top most LinearLayout-->
<LinearLayout>

    <!-- LinearLayout containing android:animateLayoutChanges="true"-->
    <LinearLayout>

        <!-- RelativeLayout containing button to toggle LinearLayout visibility below-->
        <RelativeLayout>
        </RelativeLayout>

        <!-- LinearLayout that has its visibility toggled -->
        <LinearLayout>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

This entire layout is inserted programmatically into another LinearLayout (see below):

<LinearLayout
    android:id="@+id/form_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <!-- This is where the previous XML layout containing the toggle-able LinearLayout
         is inserted programmatically. -->

    <!-- This button snaps back up to the top before the animation is complete. -->
    <Button />

</LinearLayout>

I realize the problem would be solved if I added the Button that snaps up to the LinearLayout that has animateLayoutChanges as true. However, this isn't an options for a few reasons.

So is there any other work around?

Answer 1

Instead of using animateLayoutChanges try adding TransitionManager.beginDelayedTransition(transitionsContainer); in your onClick method where transitionsContainer is parent of views that should be animated.

For example your parent layout is is

<LinearLayout android:id="@+id/transitions_container">

    <!--add your widgets here-->

</LinearLayout>

And in code

final ViewGroup transitionsContainer = (ViewGroup) view.findViewById(R.id.transitions_container);

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        TransitionManager.beginDelayedTransition(transitionsContainer);
        // do your staff with changing children of transitionsContainer           
    }
});

Check https://medium.com/@andkulikov/animate-all-the-things-transitions-in-android-914af5477d50 for details.