MotionLayout and ConstraintLayout not animating around children height

Question

While playing with MotionLayouts in a RecyclerView I noticed that the MotionLayouts would not animate the wrapping around their children if these happened to change in height.

A simple way to reproduce that behaviour would be with the following layout :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.motion.MotionLayout
        android:id="@+id/motion_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:layoutDescription="@xml/scene">

        <View
            android:id="@+id/child"
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:background="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </android.support.constraint.motion.MotionLayout>

</FrameLayout>

And the associated MotionScene with the OnClick trigger :

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

    <Transition
        motion:constraintSetEnd="@id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">

        <OnClick
            motion:target="@id/child"
            motion:mode="toggle"/>

    </Transition>

    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@id/child"
            android:layout_height="200dp"/>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@id/child"
            android:layout_height="400dp"/>

    </ConstraintSet>

</MotionScene>

Which would give the following result :

As you can see, the MotionLayout's height is set to the final expected height as soon as the transition begins, making its blue background visible until the child view finishes its own height transition and fully overlaps it.

The same thing happens in a RecyclerView if you try to implement an expending item animation.

Would there be a way to make the MotionLayout fit exactly the height of it's children during transitions or would that just be too much cost efficient?

Answer 1

Avoid resizing the boundaries of the MotionLayout. Instead, make it bigger and only animate the size of your child objects. You can make the empty area transparent and pass touch events to the underlying views.

Source and example: https://medium.com/vrt-digital-studio/picture-in-picture-video-overlay-with-motionlayout-a9404663b9e7