android - MotionLayout and constraint Groups

Question

I am going to start using MotionLayout.
After replacing existing ConstraintLayout with the MotionLayout, which has a simple motion scene,
I noticed that androidx.constraintlayout.widget.Group is not working anymore.
Initially, I showed one of the two groups depending on a condition,
but now both of them are visible, even though I set visibility to GONE.
Could I somehow get MotionLayout to work with Groups, or I should use different MotionLayouts?

Answer 1

The most recent version of ConstraintLayout is 2.0.0-beta2 and verified that MotionScene does not care about androidx.constraintlayout.motion.widget.Group. So if you want to change visibility or elevation value you should handle it individually for each View instead of applying to the virtual Group.

Answer 2

The latest stable version of MotionLayout (2.0.4) allows you to change visibility via Groups. Unfortunately it requires setting visibilityMode="ignore" on the Group and all its referenced views. Here's a working example:

Layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/motion_scene"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.Group
        android:id="@+id/test_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="text_view"
        android:visibility="gone"
        />

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <View
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

MotionScene:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:lol="http://schemas.android.com/apk/res-auto">

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

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/text_view">
            <PropertySet lol:visibilityMode="ignore" />
        </Constraint>
        <Constraint android:id="@+id/test_group">
            <PropertySet lol:visibilityMode="ignore" />
        </Constraint>
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/text_view">
            <PropertySet lol:visibilityMode="ignore" />
        </Constraint>
        <Constraint android:id="@+id/test_group">
            <PropertySet lol:visibilityMode="ignore" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

MainActivity:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val button = findViewById<View>(R.id.button)
        button.setOnClickListener {
            val group = findViewById<Group>(R.id.test_group)
            group.isVisible = !group.isVisible
        }
    }
}