How to chain MotionLayout animation - android-constraintlayout

Question

My task is to animate the movement of a button from "off" the screen, first, to the center of the screen, then, up to the top (see the attached xml and screenshots). So basically, I have to "chain" 2 animations. My question is:
how can I do it using only 1 transition?
I implemented it using Transition.TransitionListener, using doOnEnd() ktx function. And it works fine, but the code can be complicated, since I am also planning to remove the listener in onDestroy() to prevent memory leaks.
Here is the layout by default:
<?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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<View
android:id="#+id/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/cardview_dark_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintStart_toEndOf="parent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
Here is the result of the 1st animation:
<?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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<View
android:id="#+id/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/cardview_dark_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
And here is the result of the 2nd animation:
<?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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<View
android:id="#+id/view"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#color/cardview_dark_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
The activity:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
Handler().postDelayed({
val transitionPhase1 = transitionPhase1()
transitionPhase1.doOnEnd {
TransitionManager.beginDelayedTransition(root, transitionPhase2())
}
TransitionManager.beginDelayedTransition(root, transitionPhase1)
}, 2000)
}
private fun transitionPhase1(): Transition {
val constraintSet = ConstraintSet()
constraintSet.clone(this, R.layout.activity_main_phase_1)
constraintSet.applyTo(root)
return AutoTransition()
}
private fun transitionPhase2(): Transition {
val constraintSet = ConstraintSet()
constraintSet.clone(this, R.layout.activity_main_phase_2)
constraintSet.applyTo(root)
return AutoTransition()
}
}
I expect to have only 1 TransitionManger.beginDelayedTransition() method call.

Answer 1

I would propose that you do not "chain two transitions" but use one transition with keyframes to solve the two motions. This is exactly what <KeyFrame> is made for.
For this I would recommend to create a scene.xml file to handle the constraintsets and the transition.
You would then only have start and end as constraintSet and the the inbetween state you set up as keyframe.
Let me know if you need examples on how to set this up.

Answer 2

You can chain the as I have done it below:
GitHub
<Transition
android:id="#+id/startToEnd_materialCardView_email"
app:constraintSetEnd="#+id/end_materialCardView_email"
app:constraintSetStart="#+id/start_materialCardView_email"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/start_materialCardView_email" />
</Transition>
<Transition
android:id="#+id/endToStart_materialCardView_email"
app:constraintSetEnd="#+id/start_materialCardView_email"
app:constraintSetStart="#+id/end_materialCardView_email"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/end_materialCardView_email" />
</Transition>
<Transition
android:id="#+id/startToEnd_materialCardView_password"
app:constraintSetEnd="#+id/end_materialCardView_password"
app:constraintSetStart="#+id/end_materialCardView_email"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/start_materialCardView_password" />
</Transition>
<Transition
android:id="#+id/endToStart_materialCardView_password"
app:constraintSetEnd="#+id/end_materialCardView_email"
app:constraintSetStart="#+id/end_materialCardView_password"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/end_materialCardView_password" />
</Transition>
<Transition
android:id="#+id/startToEnd_materialCardView_birthDate"
app:constraintSetEnd="#+id/end_materialCardView_birthDate"
app:constraintSetStart="#+id/end_materialCardView_password"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/start_materialCardView_birthDate" />
</Transition>
<Transition
android:id="#+id/endToStart_materialCardView_birthDate"
app:constraintSetEnd="#+id/end_materialCardView_password"
app:constraintSetStart="#+id/end_materialCardView_birthDate"
app:duration="500">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/end_materialCardView_birthDate" />
</Transition>
<Transition
android:id="#+id/startToEnd_materialCardView_phoneNumber"
app:constraintSetEnd="#+id/end_materialCardView_phoneNumber"
app:constraintSetStart="#+id/end_materialCardView_birthDate"
app:duration="1000">
<OnClick
app:clickAction="toggle"
app:targetId="#+id/materialCardView_phoneNumber" />
</Transition>
Inspire Coding