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?

score 1 · Answer 1 · answered Nov 23 '17 at 16:58

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.

score 0 · Answer 2 · edited May 23 '17 at 12:14

Just a thought... What if you remove the 'animateLayoutChanges' from the embedded layout, and add it to the parent layout (second XML)? I suspect that this would animate everything. You may have to set the property to true in code since you're programmatically embedding the layout.

Here's how to do it programmatically Stack-overflow

Another option would be to use the .animate property programmatically on the button that snaps back

myButton.animate().translationY(floatYposition).setDuration(300); //300 milliseconds

score 0 · Answer 3 · answered Jun 30 '18 at 15:49

0

for linear layout try to manually enable 'changing' transition too look at this for frame layout.. try that for your linear layout.. https://stackoverflow.com/a/51116293/2719243

answered Jun 30 '18 at 15:49

Vahab Ghadiri

2,016
20
26

Animating layouts using the "animateLayoutChanges" attribute in XML

3 Answers3