Android CustomAttribute in MotionLayout to change Text in TextView

Question

Anyone can help me with the correct way to change TextView's text in MotionLayout... this is what I doing.

I'm testing the MotionLayout on a Simple App... I reach the part on the Motion tutorials about CustomAttributes

With them you can change the BackgroundColor of a View, also the textColor using customColorValue

In this case you can see it works very well changing this values in the start and end scene:

        <CustomAttribute
            motion:attributeName="backgroundColor"
            motion:customColorValue="#004A6D" />

        <CustomAttribute
            motion:attributeName="textColor"
            motion:customColorValue="#000000" />

Also I note that there is a customStringValue so I think I can change the TextView text to "BEFORE" -> "AFTER". But when I try to set this with CustomAttribute the app crash.

In the start scene:

<CustomAttribute
            motion:attributeName="Text"
            motion:customStringValue="BEFORE" />

And in the final scene:

        <CustomAttribute
            motion:attributeName="Text"
            motion:customStringValue="AFTER" />

Outside MotionScene the textView text is TEST:

• When I set the CustomAttribute only for the end scene... the text change from initial value TEST to the end AFTER value... so it partially works but never return to the initial state.
• This happend also when there is not initial text setted on the TextView. It works partially.

So... anyone can help me with the correct way to change TextView's text in MotionLayout.

Answer 1

you can do it programmatically using a TransitionListener like this:

motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
    override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {
        // ADD YOUR CODE HERE
    }

    override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
        // ADD YOUR CODE HERE
    }

    override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
        textView.text = if(p3==0f) "before" else "after"
    }

    override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) {

    }
})

Answer 2

Easy way of doing this is

 <ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      >

        <CustomAttribute
            app:attributeName="textColor"
            app:customColorValue="#1D1D1D" />
    </Constraint>
</ConstraintSet>

    <Constraint
        android:id="@id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <CustomAttribute
            app:attributeName="textColor"
            app:customColorValue="#FFFFFF" />
    </Constraint>
</ConstraintSet>

Change motion to app

Answer 3

I test and like this

//constraintSetStart
<ConstraintSet...>
<Constraint
  android:id="@+id/button">
    <CustomAttribute
       motion:attributeName="Text"
       motion:customStringValue="CLOSE"/>
</Constraint>
</ConstraintSet>

//constraintSetEnd
<ConstrainSet..>
<Constraint
   android:id="@+id/button">
     <CustomAttribute
       motion:attributeName="Text"
       motion:customStringValue="OPEN"/>
 </Constraint>
</ConstraintSet>