This document provides an introduction to MotionLayout on Android, including: - MotionLayout allows declarative animation of layout changes and property animations in ConstraintLayout. - It describes transitions between layouts through ConstraintSets in an XML motion scene file. - A sample animation demonstrates a multi-step transition between ConstraintSets, programmatically starting transitions and setting transition listeners. - The conclusion recommends additional references to learn more about MotionLayout capabilities like defining motion paths and building complex animations.

1. Introduction to MotionLayout
on Android
Denis Fodor
Android Engineer

2. Introduction
How to use MotionLayout
Motion Scene file elements03
02
01
C O N T E N T S
Sample Animation04
Conclusion05

3. Introduction01

4. “MotionLayout is a layout type that helps you manage motion
and widget animation in your app. It is a subclass of
ConstraintLayout and builds upon its rich layout capabilities.”
Introduction

5. • It only works with its direct children
• It does not support nested layout hierarchies
• It does not support activity transitions
Introduction

6. • Describe transitions between layouts
• Animate layout properties
• Supports seekable transitions and keyframes for
customized transitions
• It is fully declarative and any of its transitions can be
described in an XML file
• It is backwards-compatible to API level 14 (Ice Cream
Sandwich)
Introduction

7. How to use MotionLayout02

8. • Add the following dependency to your app’s build.gradle
implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta4’
• Or this if you are not using AndroidX:
implementation ‘com.android.support.constraint:constraint-layout:2.0.0-beta4’
How to use MotionLayout

9. • learning_motion_layout.xml
How to use MotionLayout

10. • learning_motion_layout.xml
How to use MotionLayout

11. • Generated learning_motion_layout_scene.xml
How to use MotionLayout

12. Motion Scene file elements03

13. • Root element of a motion scene XML file
• It is used to create animations in a declarative way
• The same MotionScene file can be reused and applied to
different layouts
MotionScene
MOTION SCENE FILE ELEMENTS

14. • It has definitions for each View you want to animate in a
motion sequence
ConstraintSet
MOTION SCENE FILE ELEMENTS

15. • Specifies the attributes and position of a single View in a
motion sequence
Constraint
MOTION SCENE FILE ELEMENTS

16. • It contains at least the start and end ConstraintSet
• It describes the changes from the start to the end state
• It can contain OnClick, OnSwipe and KeyFrameSet elements
• More information about Motion Scene file elements can be found in the official
documentation https://developer.android.com/training/constraint-layout/
motionlayout/ref
Transition
MOTION SCENE FILE ELEMENTS

17. Sample Animation04

18. Demo
SAMPLE ANIMATION
https://github.com/dfodor/MotionLayoutSample

19. • This is a multi-step animation
• MotionLayout currently does not have an API for controlled
multi-step transitions
• This animation has 4 ConstraintSets and it handles 3
transitions (some of them will be started programmatically)
• For more complex transitions, with more steps, you can
check an article called Suspending over Views — Example
written by Chris Banes
Sample Animation

20. • Our layout file activity_music_band_list.xml has the following hierarchy
Sample Animation

21. // MusicBandListActivity.kt
// ids of the ConstraintSets defined in animated_music_band_item_scene.xml
private val firstSet = R.id.first_set
private val secondSet = R.id.second_set
private val thirdSet = R.id.third_set
private fun animate(
vhValues: MusicBandAdapter.ViewHolderValues,
musicBandModel: MusicBandModel) {
val marginTop =
(vhValues.getThumbnailHeight() * SCALE).toInt() - (iconSize * SCALE / 2).toInt() - margin
animatedView.also {
var set = it.getConstraintSet(firstSet)
set.setMargin(R.id.thumbnail, ConstraintSet.TOP, vhValues.getY())
set.setVisibility(R.id.thumbnail, ConstraintSet.VISIBLE)
set.setMargin(R.id.more_info, ConstraintSet.TOP, marginTop)
set.applyTo(it)
set = it.getConstraintSet(secondSet)
set.setMargin(R.id.more_info, ConstraintSet.TOP, marginTop)
set.applyTo(it)
set = it.getConstraintSet(thirdSet)
set.setMargin(R.id.more_info, ConstraintSet.TOP, marginTop)
set.setMargin(R.id.about_container, ConstraintSet.TOP, marginTop)
set.applyTo(it)
// ...
}
}

22. // MusicBandListActivity.kt
private fun animate(
vhValues: MusicBandAdapter.ViewHolderValues,
musicBandModel: MusicBandModel) {
animatedView.also {
// ...
with(binding) {
thumbnail.background =
ContextCompat.getDrawable(this@MusicBandListActivity, musicBandModel.drawableId)
name.text = getString(musicBandModel.name)
tags.text = getString(musicBandModel.tags)
description.text = getString(musicBandModel.shortDescriptionStringRes)
aboutText.text = getString(musicBandModel.aboutStringRes)
it.setTransitionListener(transitionAdapter)
// transition is defined in activity_music_band_list_scene.xml
root.transitionToEnd()
it.setTransition(firstSet, secondSet)
it.setTransitionDuration(ANIMATION_DURATION)
it.transitionToState(secondSet)
activeSet = ConstraintSetState.FIRST_TO_SECOND
}
}
}

23. // MusicBandListActivity.kt
private val transitionAdapter = object : TransitionAdapter() {
@Suppress("NON_EXHAUSTIVE_WHEN")
override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
with(animatedView) {
when (activeSet) {
ConstraintSetState.FIRST_TO_SECOND -> {
setTransition(secondSet, thirdSet)
setTransitionDuration(ANIMATION_DURATION)
transitionToState(thirdSet)
activeSet = ConstraintSetState.SECOND_TO_THIRD
}
ConstraintSetState.SECOND_TO_FIRST -> {
binding.root.transitionToStart()
val constraintSet = getConstraintSet(firstSet)
constraintSet.setVisibility(R.id.thumbnail, ConstraintSet.GONE)
constraintSet.applyTo(this)
}
ConstraintSetState.THIRD_TO_SECOND -> {
setTransition(secondSet, firstSet)
setTransitionDuration(ANIMATION_DURATION)
transitionToState(firstSet)
activeSet = ConstraintSetState.SECOND_TO_FIRST
}
}
}
}
// ...
}

24. Sample Animation
• Result after first transition (firstSet → secondSet)

25. • All ConstraintSets and Transitions are defined in
animated_music_band_item_scene.xml file
• In the first_set, we are positioning the views, setting the
thumbnail dimension ratio and scale and we are hiding back
arrow.
• In the second_set we have to set the scale type again so it
would not be lost and we need to hide other views
• When the first transition is done, we are immediately ready
to start the second transition (secondSet → thirdSet) in
the onTransitionCompleted callback
Sample Animation

26. Sample Animation
• Result after second transition (secondSet → thirdSet)

27. • We are starting from the second_set
• In the third_set, we are making the views visible while
controlling the situation when the animation will be
executed from the end to start state.
• Inside the Transition block, the OnClick action is used to
toggle between second_set and third_set.
Sample Animation

28. Sample Animation
• Result after third transition (thirdSet →
R.id.fourth_set)

29. • The last step of the animation is completely defined in the
motion scene file and there is no need to start it
programmatically
• Inside the Transition block, we again have the OnClick
action which is used to toggle between third_set and
fourth_set
• We are using ImageFilterView class to animate image
transition with its crossfade attribute (“i” icon is now “x”
icon)
Sample Animation

30. Conclusion05

31. • This presentation provided some general information about
MotionLayout and sample animation with all the pieces put
together
• Even though it’s still in beta, that doesn’t prevent us from
creating beautiful animations
Conclusion

32. References
• Introduction to MotionLayout (part I) by Nicolas Roard
• Introduction to MotionLayout (part II) by Nicolas Roard
• Introduction to MotionLayout (part III) by Nicolas Roard
• Defining motion paths in MotionLayout by Nicolas Roard
• Complex UI/Animations on Android — featuring MotionLayout by Nikhil Panju
• Do the Loco-MotionLayout: Building Animations with MotionLayout by Michael
Scamell
• Advanced & Practical MotionLayout by Jason Pearson
• The official documentation

33. Thank you
for listening
😄
If you have any questions feel free to reach out to me at
denis@arsfutura.co