Cannot change the visibility of TextInputLayout in MotionLayout

Question

I am trying out MotionLayout for the first time and I am having issues in changing the visibility of the TextInputLayouts in my MotionScene.

motion_scene.xml

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

    <Transition
            motion:constraintSetStart="@id/afinstall"
            motion:constraintSetEnd="@id/signin"
            motion:duration="1000">

        <OnClick
                motion:targetId="@id/button_sign_in"
                motion:clickAction="transitionToEnd"/>

        <OnClick

        />

    </Transition>

    <Transition
            motion:constraintSetEnd="@id/afinstall"
            motion:constraintSetStart="@id/signin"
            motion:duration="1000">

        <OnClick
                motion:targetId="@id/button_back"
                motion:clickAction="transitionToEnd"/>

        <OnClick

        />

    </Transition>

    .............

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

        ....

        <Constraint
                android:layout_width="282dp"
                android:layout_height="wrap_content"
                android:hint="Username"
                android:layout_marginEnd="8dp"
                motion:layout_constraintEnd_toEndOf="parent" android:layout_marginStart="8dp"
                motion:layout_constraintStart_toStartOf="parent" android:id="@+id/sign_in_username_tf"
                android:layout_marginTop="1dp" motion:layout_constraintTop_toBottomOf="@+id/app_slogan"
                android:visibility="gone" />
        <Constraint
                android:layout_width="282dp"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:layout_marginStart="8dp"
                motion:layout_constraintStart_toStartOf="parent" android:layout_marginEnd="8dp"
                motion:layout_constraintEnd_toEndOf="parent" android:id="@+id/sign_in_password_tf"
                android:layout_marginTop="1dp" motion:layout_constraintTop_toBottomOf="@+id/sign_in_username_tf"
                android:visibility="gone"/>

         ....
    </ConstraintSet>

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

    ....

    <Constraint
                android:layout_width="282dp"
                android:layout_height="wrap_content"
                android:hint="Username"
                android:layout_marginEnd="8dp"
                motion:layout_constraintEnd_toEndOf="parent" android:layout_marginStart="8dp"
                motion:layout_constraintStart_toStartOf="parent" android:id="@+id/sign_in_username_tf"
                android:layout_marginTop="110dp" motion:layout_constraintTop_toBottomOf="@+id/app_slogan"
                android:visibility="visible"/>
        <Constraint
                android:layout_width="282dp"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:layout_marginTop="15dp"
                motion:layout_constraintTop_toBottomOf="@+id/sign_in_username_tf" android:layout_marginStart="8dp"
                motion:layout_constraintStart_toStartOf="parent" android:layout_marginEnd="8dp"
                motion:layout_constraintEnd_toEndOf="parent" android:id="@+id/sign_in_password_tf"
                android:visibility="visible"/>

    ....

    </ConstraintSet>

</MotionScene>

activity_main.xml

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

....

    <android.support.design.widget.TextInputLayout
            android:layout_width="282dp"
            android:layout_height="wrap_content"
            android:hint="Username"
            android:layout_marginEnd="8dp"
            app:layout_constraintEnd_toEndOf="parent" android:layout_marginStart="8dp"
            app:layout_constraintStart_toStartOf="parent" android:id="@+id/sign_in_username_tf"
            android:layout_marginTop="1dp" app:layout_constraintTop_toBottomOf="@+id/app_slogan"
            android:visibility="gone">

        <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/nunito_sans" android:textSize="20sp"
                android:textColor="@color/colorPrimaryLi"/>
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
            android:layout_width="282dp"
            android:layout_height="wrap_content"
            android:hint="Password" app:hintEnabled="true"
            app:hintAnimationEnabled="true"
            android:layout_marginStart="8dp"
            app:layout_constraintStart_toStartOf="parent" android:layout_marginEnd="8dp"
            app:layout_constraintEnd_toEndOf="parent" android:id="@+id/sign_in_password_tf"
            android:layout_marginTop="1dp" app:layout_constraintTop_toBottomOf="@+id/sign_in_username_tf"
            android:visibility="gone">

        <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/nunito_sans" android:textSize="20sp"
                android:textColor="@color/colorPrimaryLi"/>
    </android.support.design.widget.TextInputLayout>

    ....

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

I have tried fiddling around with things but I could not point out why it was actually happening.

Please do not mark this as a duplicate because this is a fairly new library that I am trying. I would happily elaborate further if required.

Answer 1

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

 <Constraint
            android:layout_width="282dp"
            android:layout_height="wrap_content"
            android:hint="Username"
            android:layout_marginEnd="8dp"
            motion:layout_constraintEnd_toEndOf="parent" 
            android:layout_marginStart="8dp"
            motion:layout_constraintStart_toStartOf="parent" 
            android:id="@+id/sign_in_username_tf"
            android:layout_marginTop="1dp"
            motion:layout_constraintTop_toBottomOf="@+id/app_slogan" >
    <CustomAttribute
        motion:attributeName="visibility"
        motion:customIntegerValue="8" />
</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

Answer 2

You must use <KeyFrameSet> inside <Trasition> and redefine <KeyAttribute>

Answer 3

I found that currently (alpha 5) visibility cange does not work (it work if you set it in constrainsets, but does not on event or keyframesets) As a workaround i am using alpha 0-1 to make view visible or not and add incode listeners to make it clickable