[MUSIC PLAYING]
SEAN MCQUIILLAN: Hi.
In this video, I'm going to show you
how to use ConstraintSets and transitions to define
animations from multiple views in Motion Layout.
A ConstraintSet is just a set of constraints.
Or how about a definition that doesn't use the word
it's defining?
A ConstraintSet specifies the constraints
for every view in a ConstraintLayout.
In ConstraintLayout, you usually define this in line
with the views using attributes like alignBottomTo.
In Motion Layout, you extract ConstraintSets
to a separate file called a MotionScene.
By doing this, you can define multiple ConstraintSets
and build animations between them in this video,
you'll learn how to convert a constraint
layout to MotionLayout and define multiple ConstraintSets.
You'll see how to define a transition between them.
As we go, we'll explore Motion Editor, a new tool built
into Android Studio to make it easy to build, modify,
and preview animations built using MotionLayout.
To get started, I've created a ConstraintLayout file
that contains a few views that we want to animate.
We can convert it to MotionLayout
by right-clicking on the design surface,
then selecting Convert to MotionLayout.
Now that you have MotionLayout, the Motion Editor will open.
The Motion Editor is an animation tool
for building and previewing complex animations built
with MotionLayout.
Before we look at the Motion Editor,
let's switch over to the XML and see
what Android Studio did when we converted to MotionLayout.
At the root, our ConstraintLayout tag
was swapped for a MotionLayout tag.
And it also created a MotionScene file
and added a tag here.
This is a description of the animation
that MotionLayout uses.
If we click into the MotionScene,
we can see that Android Studio created two ConstraintSets
for us, one labeled Start and one labeled End.
A ConstraintSet describes the constraints, sizes,
and other attributes for all views in your layout.
Here, both the Start and End ConstraintSets
are empty, so it will use the constraints from the layout.
A ConstraintSet represents a static positioning
of all the views in a MotionLayout.
This file also defined a transition.
A transition is how you define an animation in MotionLayout.
Here, we're transitioning from start to end.
And it will take one second to play the animation.
MotionLayout will figure out a path for all views
from their start to end position and play it back
when you animate through this transition.
If we switch back to the Motion Editor,
you can see that it visually represents
the contents of the MotionScene file in the Overview panel.
You can click on any of these elements
to see and edit it below.
For example, when we click on the MotionLayout,
it gives us an overview of the views
and their constraints in the layout XML.
If you click on one of these views,
you can edit its attributes in the right Attributes panel.
For example, we could change the constraints
or any other attributes on Card3 in the MotionLayout itself.
The Attributes panel always shows the attributes
of the currently selected item in the Motion Editor.
So for example, if we click on the ConstraintSet
in the Overview panel, it will switch to the attributes
for that ConstraintSet.
There's not many attributes on a ConstraintSet itself,
but this shows you how the Motion Editor
is built to show a one-to-one mapping between XML
and the controls in the Motion Editor.
Let's switch back to the Start ConstraintSet.
And you can see in the Details pane
that it shows all of the views that can be constrained
in this ConstraintSet.
Right now, the ConstraintSet has no constraints on it.
So it shows the layout as the source for all the views.
You can also select the transition.
That's the arrow that's pointing from start
to end in the Overview panel.
When you do, it opens playback controls for the animation,
including a scrub bar that lets you manually seek
the animation to any position.
You could press Play now.
Though, as you can see, there's nothing happening
in this transition.
To make this a bit more exciting,
we'll have to tell MotionLayout what we want to animate.
We're going to build an entrance animation.
This is an animation that we want
to play when the screen first opens.
And this is a pretty typical way to use MotionLayout.
An animation in MotionLayout is made of two ConstraintSets that
have a transition between them.
Here, we're transitioning from start to end.
To keep things simple, we'll make
the end use the sizes and constraints
from the layout, which you can see represented here
in the Detail section.
Then, to make the animation, we'll
add constraints to the Start ConstraintSet.
Select the Start ConstraintSet and pick
the view you want to make a constraint for.
Here, we'll select Card1.
Then click the Modify ConstraintSet button.
It looks like a small pencil.
And in the popup menu, you can create a constraint.
And you can see that the details update
to show that this constraint comes from Start instead
of Layout, as well as showing a check to note it's constrained
in this ConstraintSet.
We'll add constraints to both Card2 and Card3 as well.
Then, because Motion Editor isn't
copying over my margins for these cards,
I'll add a start, end, and bottom margin of 16dp
to each of these.
Note this is slightly tighter than the margins in the End
ConstraintSet, which will make the views
appear to move up during the animation.
You can preview the current state of the animation
by clicking on the transition and pressing Play.
Let's also make the cards expand and fade in.
In the transformation's Attributes section,
you can specify the scale x, scale y, and alpha.
I'll apply a scale of 0.5 to both the x and the y,
and an alpha of 0.
Now the scale and alpha is set on all three cards.
And our animation looks more interesting if we preview it
in the transition.
To finish up this animation, we'll
add a subtle movement to fade in the subtitle as well.
Select spacemoji_subtext, Create a Constraint.
And then add a 10dp translationX,
and set the alpha to 0.
And if you preview it again, you can
see we've created a pretty rich animation
with just a few constraints.
Let's look at the options on the transition
quickly before moving on to the XML that was generated.
The transition is what actually defines the animation.
And it's where you can configure the properties of the animation
itself, such as the duration, interpolation,
and even make a track-and-drag event.
Since this is an entrance animation,
we want to play it automatically.
You can do that in Motion Editor by selecting the transition
and setting autoTransition to the value animateToEnd.
Now, this tells MotionLayout to automatically
animate from start to end.
A transition also has this interesting attribute
called Stagger that, well, staggers the animation.
It's used for making effects where items appear right
after one another.
It's kind of hard to describe, so let's just set it
and see what it does.
Now you can see our views animate in from the bottom.
And this completes our animation,
giving us a nice staggered entrance effect.
Let's switch over to the XML now and see what
the Motion Editor generated.
The design of the Motion Editor is
to provide a rich, interactive GUI editor
while maintaining a one-to-one mapping to the MotionLayout
XML.
This goes as far as the ordering of UI elements in the Motion
Editor.
They will always display in the order you define them in XML.
The Transition tag has the autoTransition
and staggered attributes that we set,
as well as a default duration of 1000, set by the Motion Editor
when we converted the layout from ConstraintLayout.
It also has a keyframe set, which
we'll skip over in this video.
Going down to the Start transition,
you can see that the constraints specified by the Motion Editor
are complete constraints.
They specify everything related to the size and positioning
and some other view attributes.
When you specify a constraint using
this style in a MotionScene file,
it overwrites whatever is in the layout.
So for example, if we didn't repeat the constraints
on one side of the view, it would not
carry over the constraints from the layout.
You have to specify the full constraint for each view.
And that's actually a bit of code.
Scrolling through here, you can see that the Motion Editor
did a lot of heavy lifting to create this MotionScene
file for us.
At the end of the MotionScene file,
the End ConstraintSet is empty.
This matches what we saw in the Motion Editor,
where all views were getting their constraints
from the layout.
Now, if we did edit this XML file here
and add a constraint into the End ConstraintSet,
the Motion Editor would show us the new constraint
as if it had been added by the Motion Editor
when we went back over to the design surface.
In this video, we built a simple entrance animation
using only ConstraintSets and transitions.
Along the way, you learned how to animate
between multiple ConstraintSets using MotionLayout.
You also learned how Motion Editor
works seamlessly to build, modify, and preview animations,
while allowing you to quickly switch between XML
and the Motion Editor.
In the next video, we'll explore MotionLayout further
by adding keyframes to define rich motion on the path
from start to end.
And be sure to like and subscribe
to the channel for notifications as soon
as new episodes are published.
To learn more about MotionLayout,
check out the Codelab and MotionLayout integration sample
this video is based on in the links below.
[MUSIC PLAYING]