MotionLayout's child ignores "setVisibility"

Question

Let's say I have simple UI with motion layout:

// activity_main.xml

<?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"
    android:id="@+id/motion"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@transition/motion_scene"
    app:showPaths="true">

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="250dp"
        android:background="#CCAA33"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:progressTint="#3366CC"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
</androidx.constraintlayout.motion.widget.MotionLayout>

with motion layout scene:

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

    <Transition
            app:constraintSetStart="@id/collapsed"
            app:constraintSetEnd="@id/expanded"
            app:duration="1000">
        <OnSwipe
                app:touchAnchorId="@id/view"
                app:touchAnchorSide="top"
                app:dragDirection="dragUp" />
    </Transition>
    <ConstraintSet android:id="@+id/collapsed">

    </ConstraintSet>

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

    </ConstraintSet>
</MotionScene>

(it doesn't do anything because I stripped everything for demo purpose).

Now, if I try to hide progress bar (let's say on view's click):

//MainActivity.kt

import android.content.res.ColorStateList
import android.graphics.Color
import android.os.Bundle
import android.view.View
import android.widget.ProgressBar
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val view = findViewById<View>(R.id.view)
        val progressBar = findViewById<ProgressBar>(R.id.progress_bar)

        view.setOnClickListener {
            view.setBackgroundColor(Color.parseColor("#006699"))
            progressBar.progressTintList = ColorStateList.valueOf(Color.parseColor("#FF3300"))
            progressBar.visibility = View.GONE
        }
    }
}

(colors are set just for demo purpose).

For some reason, progress bar is still shown on screen (background color is correctly set). If I click again, progress bar restarts progress.

To me it looks like layout is invalidate somehow.

I would expect progress bar is hidden after view click. Is there some wrong with motion layout or my understanding? How can I avoid this effect and hide progress bar?

Thanks!

Answer 1

Yes! I was very frustrated by this as well. I was able to solve it by putting the tag visibilityMode="ignore" inside of the constraint tag for the view I wanted (note: I added this tag for both the start and end constraint). For more info, you can check out this SO post. So inside of your ConstraintSet you would need to have a Constraint like this

<Constraint
        android:id="@id/progress_bar"
        motion:visibilityMode="ignore"/>

for each view and set the visibility mode.

Hope that works for you!