animateLayoutChanges does not work well with nested layout?

Question

I have a nested layout like the following:

Answer 1

The animateLayoutChanges property makes use of LayoutTransitions, which animate both the layout's children and, from Android 4.0 onward, ancestors in the layout hierarchy all the way to the top of the tree. In Honeycomb, only the layout's children will be animated. See this Android Developers Blog post for details.

Unfortunately, it seems that there's currently no simple way to have the siblings of a layout react to its LayoutTransitions. You could try using a TransitionListener to get notified when the layout's bounds are being changed, and move the sibling views accordingly using Animators. See Chet Haase's second answer in this Google+ post.

EDIT - Turns out there is a way. In Android 4.1+ (API level 16+) you can use a layout transition type CHANGING, which is disabled by default. To enable it in code:

ViewGroup layout = (ViewGroup) findViewById(R.id.yourLayout);
LayoutTransition layoutTransition = layout.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);

So, in your example, to have child 2 layout animated, you'd need to enable the CHANGING layout transformation for it. The transformation would then be applied when there is a change in the bounds of its parent.

See this DevBytes video for more details.

Answer 2

As a Kotlin Extension

fun ViewGroup.forceLayoutChanges() {
    layoutTransition.enableTransitionType(LayoutTransition.CHANGING)
}

Usage

someContainer.forceLayoutChanges()

---

Notes:

In my experience, this happens when the container is a deep nested layout. For some reason android:animateLayoutChanges="true" just doesn't work, but using this function will force it to work.

Answer 3

We had added the android:animateLayoutChanges attribute to our LinearLayout but the change didn’t trigger an animation. To fix that, use this code:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
((ViewGroup) findViewById(R.id.llRoot)).getLayoutTransition()
      .enableTransitionType(LayoutTransition.CHANGING);
}

More details.

Answer 4

Ok, after digesting the first answer, I make it simple here, for those who don't get proper animation result when using android:animateLayoutChanges="true" in NESTED layout:

1. Make sure you add android:animateLayoutChanges="true" to the will-be-resized ViewGroup (LinearLayout/RelativeLayout/FrameLayout/CoordinatorLayout).

2. Use setVisibility() to control the visibility of your target View.

3. Listen carefully from here, add android:animateLayoutChanges="true" to the outer ViewGroup of your will-be-resized ViewGroup, this outer ViewGroup must be the one who wraps all the position-changing View affected by the animation.

4. Add following code in your Activity before the setVisibility(), here the rootLinearLayout is the outer ViewGroup I mentioned above:

    LayoutTransition layoutTransition = rootLinearLayout.getLayoutTransition();
    layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
   

---

Before:

After:

---

Reminder: If you miss the 3rd step, you will get null pointer exception.

Good luck!

Answer 5

It seems that a delayed transition on the parent also works for animating. At least for me the following code gives a proper expand/collapse animation.

expandTrigger.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        TransitionManager.beginDelayedTransition(parentLayout);
        expanded = !expanded;

        child1.setVisibility(expanded ? View.VISIBLE : View.GONE);
    }
});

For deeply nested layouts you sometimes might need to use a parent higher up in the hierarchy in the call to the TransitionManager.