TransitionManager.beginDelayedTransition doesn't animate when activity first loads

Question

I am using the constraintLayout with animations using TransitionManager.

I have the following 2 layouts

This is my main_activity.xml

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

       <ImageView
            android:id="@+id/image"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:background="@color/colorPrimary"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

    <Button
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            android:text="Let's start animating"/>
</android.support.constraint.ConstraintLayout>

And this is my main_activity_alt.xml

<android.support.constraint.ConstraintLayout
        android:id="@+id/constraintLayout"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto">

      <ImageView
            android:id="@+id/image"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:background="@color/colorPrimary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

    <Button
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            android:text="Let's start animating"/>
</android.support.constraint.ConstraintLayout>

In my MainActivity I want to animate the image to slide upwards which would be the main_activity_alt.xml

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

        val constraintSet1 = ConstraintSet()
        constraintSet1.clone(constraintLayout)

        val constraintSet2 = ConstraintSet()
        constraintSet2.clone(this, R.layout.activity_main_alt)

        val transition = ChangeBounds()
        transition.duration = 5000

   val handler = Handler()
        handler.postDelayed({
            TransitionManager.beginDelayedTransition(constraintLayout, transition)
            constraintSet2.applyTo(constraintLayout)
        }, 10)
    }

When the above starts the image is already displayed. The main_activity.xml should hide and the main_activity_alt.xml will be its final resting place.

However, when the screens loads it just immediately displays the imageview without any animation

Anything I am doing wrong with the above?

Ambroid

I think first layout has to be rendered so you could animate transition to second one. Try to do animation after view is created not before – Honky

I have added the code to the onResume. However, the image always displays immediately. – Ambroid

Answer 1

From the documentation for beginDelayedTransition:

Calling this method causes TransitionManager to capture current values in the scene root and then post a request to run a transition on the next frame. At that time, the new values in the scene root will be captured and changes will be animated.

You will have to wait until the layout is laid out before attempting the transition. There are a number of ways to do this, but the easiest would be to post the transition code as follows:

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

    val constraintLayout = findViewById<ConstraintLayout>(R.id.constraintLayout)
    constraintLayout.post {
        val constraintSet1 = ConstraintSet()
        constraintSet1.clone(constraintLayout)
        val constraintSet2 = ConstraintSet()
        constraintSet2.clone(this, R.layout.activity_main2_alt)
        val transition = ChangeBounds()
        transition.duration = 5000
        TransitionManager.beginDelayedTransition(constraintLayout, transition)
        constraintSet2.applyTo(constraintLayout)
    }
}

Leisured

actually, the click handler is not part of the problem, I just added it as a test, and removed it from my question. Actually, the problem is I want to animate the image to slide up when the activity starts. – Ambroid

@Ambroid OK. I'll repost. – Leisured

Thanks, I have just posted an update to my question using a Handler().postDelayed. Not sure which would be better, but I like your idea of doing the constraintLayout.post I will make this as the correct answer. – Ambroid

@Ambroid postDelayed is a little overkill but should work. You just want to execute the transition code after the initial layout, so a simple post will do. – Leisured

keep doing the lords work, thank you. saved me after days of troubleshooting. – Taper

Answer 2

Try to make a delay to your transition so first layout would be inflated when transition starts

transition.delay = 300

if this wont work then try

Handler().postDelayed({do transition here}, 300)

Honky