Is it possible to animate groups visibility with MotionLayout?

Question

I'm trying to make an animation with MotionLayout, and I need to hide some elements. I tested visibility attribute in an individual element and it works, but to make the XML shorter I would like to be able to specify just a group (from the ConstraintLayout helpers) containing all this elements

Something like this

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

    <Transition
        app:constraintSetStart="@id/start"
        app:constraintSetEnd="@id/end"

        app:duration="300">

        <OnSwipe
            app:touchAnchorId="@id/details_group"
            app:touchAnchorSide="bottom"
            app:dragDirection="dragDown"
            />

    </Transition>

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

        <Constraint
            android:id="@+id/details_group"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="gone"
            app:constraint_referenced_ids="detail_value_topl,detail_icon_topl,detail_value_topr" />

    </ConstraintSet>

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

        <Constraint
            android:id="@+id/details_group"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="visible"
            app:constraint_referenced_ids="detail_value_topl,detail_icon_topl,detail_value_topr" />

    </ConstraintSet>

</MotionScene>

But it doesn't work, any idea how to make it work ?

Also, I would prefer not to use alpha, since all constraints are set so that when they are gone the container resizes

Answer 1

Rather than declaring the visibility on the Constraint, you should declare the visibility as a custom attribute. So for your first constraint try this:

     <Constraint
        android:id="@+id/details_group"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:constraint_referenced_ids="detail_value_topl,detail_icon_topl,detail_value_topr">
        <CustomAttribute
            motion:attributeName="visibility"
            motion:customIntegerValue="8" />
    </Constraint>

and for your second constraint try this

    <Constraint
        android:id="@+id/details_group"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:constraint_referenced_ids="detail_value_topl,detail_icon_topl,detail_value_topr">
        <CustomAttribute
            motion:attributeName="visibility"
            motion:customIntegerValue="0" />
    </Constraint>

By declaring the visibility as a custom attribute, that should help the motion layout properly interpolate between visibility values. It's a little unintuitive which int value is which visibility but they are defined as follows

Visible = 0
Invisible = 4
Gone = 8