TextView animated with Motion Layout not appearing at Start of animation

I’m new to Android Motion Layout API. I’m trying to run animation on a TextView programmatically but for some reason the TextView isn’t appearing on the screen when I run the program. It’s supposed to look like this:

enter image description here

But the Status text doesn’t appear on the screen.

The Transition code in DetailActivity.kt looks like:

`
        private fun runMotionLayoutTransition() {

            scene = MotionScene(binding.root).apply {

                val transition = TransitionBuilder.buildTransition(
                    this,
                    R.id.transition_id,
                    R.id.start_set_id,
                    binding.root.initStartSet(),
                    R.id.end_set_id,
                    binding.root.endStartSet()
                )

                setTransition(transition)
                binding.root.scene = this
            }

            binding.root.apply {
                setTransitionDuration(5000)
                startLayoutAnimation()
//                transitionToEnd()
            }

        }`

Please note, I don’t have the KeyFrameSet code completed yet as I’m not trying to run the whole animation. I’m just trying to run the code so that the Start ContraintSet runs successfully so all the views are in place before the Transition begins.

Note also that I had previously implemented all of the Motion Layout code for this animation in XML format. I’m needing to make a copy of that code in order to start the animation from a clickListener. So the following (in DetailActivity.kt) are the two methods I’m running which essentially copies the constraints for Start and End constraint sets and re-applies the same constraints with some other additional constraints and attributes.

DetailActivity.kt

        private fun ConstraintLayout.initStartSet() = ConstraintSet().apply {
            clone(this@initStartSet)
            setStartingConstraints(this)
            applyTo(this@initStartSet)
        }

//        private fun ConstraintLayout.initStartSet() = ConstraintSet().apply {
//            val constraintSetX = binding.motionLayout.getConstraintSet(id)
//
//
////            clone(this@initStartSet)
//            setStartingConstraints(constraintSetX)
//            constraintSetX.applyTo(this@initStartSet)
//        }

        private fun ConstraintLayout.endStartSet() = ConstraintSet().apply {
            clone(this@endStartSet)
            setEndingConstraints(this)
            applyTo(this@endStartSet)
        }

All of the other TextViews and guidelines are appearing on the screen as they should, so the clone() method is working as it is supposed to. It’s just the one TextView I’m actually animating (status_text.xml) that doesn’t appear.

And finally, here is the setStartingConstraints() method that is called from inside initStartSet() method above:

DetailActivity.kt



       private fun setStartingConstraints(constraintSet: ConstraintSet) {


            //set the attributes (textColor & textSize)
            binding.statusText.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f)
            binding.statusText.setTextColor(Color.BLACK)

            //set the layoutParameters (viewWidth, viewHeight, marginStart, marginEnd)
            val params = (binding.statusText.layoutParams as ViewGroup.MarginLayoutParams)
            params.height = LayoutParams.WRAP_CONTENT
            params.width = LayoutParams.MATCH_PARENT
            params.setMargins(8,0,16,0)
            binding.statusText.layoutParams = params



            //set the constraints
            constraintSet.connect(binding.statusText.id, ConstraintSet.BOTTOM, binding.guideline7.id, ConstraintSet.TOP)

            constraintSet.connect(binding.statusText.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)

            constraintSet.setHorizontalBias(binding.statusText.id, 1.0f)

            constraintSet.connect(binding.statusText.id, ConstraintSet.START, binding.guideline2.id, ConstraintSet.END)

            constraintSet.connect(binding.statusText.id, ConstraintSet.TOP, binding.guideline6.id, ConstraintSet.BOTTOM)

            constraintSet.setVerticalBias(binding.statusText.id, 1.0f)
        }

Finally, I note that I cal runMotionLayoutTransition() from inside onCreate() in DetailActivity.kt.

Finally, here is the motion layout file, activity_detail_scene.xml


    <MotionScene
        xmlns:motion="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        >
    
        <ConstraintSet android:id="@+id/start">
            <Constraint
    
                android:id="@+id/status_text"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="16dp"
                android:textColor="@color/design_default_color_on_secondary"
                android:textSize="14sp"
    
                app:layout_constraintBottom_toTopOf="@+id/guideline7"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="1.0"
                app:layout_constraintStart_toStartOf="@+id/guideline2"
                app:layout_constraintTop_toTopOf="@+id/guideline6"
                app:layout_constraintVertical_bias="1.0"/>
        </ConstraintSet>
    
        <ConstraintSet android:id="@+id/end">
            <Constraint
                android:id="@id/status_text"
                android:layout_width="24dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="16dp"
                android:textSize="18dp"
                android:textColor="@color/colorTextFinish"
    
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/guideline2"
                app:layout_constraintTop_toTopOf="@+id/guideline4"
                app:layout_constraintBottom_toTopOf="@+id/guideline6" />
        </ConstraintSet>
    
        <Transition
            app:constraintSetEnd="@id/end"
            app:constraintSetStart="@+id/start">
    
        </Transition>
    </MotionScene>

I have reviewed the constraints defined in this code and I believe it’s all correct. But I’m unable to determine why status_text.xml isn’t appearing when I run the Transition.

Leave a Comment