[MUSIC PLAYING] SEAN MCQUILLAN: Hello. Good afternoon. I'm super excited to be here. And today, we're going to be
talking about ConstraintLayout with a focus heavily
on the Visual Editor-- how to use the Visual
Editor to effectively make constraints in Android Studio. So I'm going to start out
by talking about the basics, and then-- CHRIS SINCO: Oh, I'm Chris,
UX Designer on Android Studio, and I'll be talking about
some of the new features we've added to Android
Studio for ConstraintLayout. SEAN MCQUILLAN:
Awesome, awesome. And I am Sean McQuillan,
developer advocate for Android. After we talk about the
basics, the features that shift in ConstraintLayout
1.0, 1.1, we're going to talk about
some of the new features that are coming out in
ConstraintLayout 2.0. So let's dive in. What are constraints? So when I add a view to a
ConstraintLayout in the Visual Editor. I'm going to get these four
new handles, one on the left, top, right, and bottom. If I click one of
those, or if I go over to the View Inspector over
here, and I click that, I'm going to go ahead and add
a constraint to this view. So I want to pause for a
second here and mention that, in ConstraintLayout,
before I added this constraint, ConstraintLayout is going
to add that view to the view hierarchy, but it's
just going to lay it out somewhere on the screen. So I'm going to add
that constraint. It's 30 dp off the top. And if I had another
one to the left, I've now fully
constrained this view. Now ConstraintLayout knows how
to solve where this view goes. We're going to see, starting
with this very simple example, how to build up more complex
examples of constraints. Now, of course, I could change
this 30 dp margin to be 50 dp, or I could set both
of them to 0 dp, and then add a constraint
over on the right side. And if I do that, I'm actually
going to center this view. And if I add another
constraint to the bottom, I'm in the center of this
view on the entire constraint layout. And this trick of
constraining equally on the right and the left
is going to work everywhere in ConstraintLayout. This is how you center
a view inside or on top of another view. So let's take a look
at one more thing I can do with just a single
element using ConstraintLayout. So if I look at the slider
that's over on the left, it starts at 50 when
I've constrained the top and the bottom like this. And I can change that. I can change it up to 25. And when I do that, instead
of centering it exactly, it's going to introduce a bias. It's the bias slider. It's going to introduce
a bias to the layout. Now it's going to lay that
out 25% along the way, 75% along the way. And of course, there's, of
course, a horizontal slider as well. So let's dive in further
into this View Inspector and taking a look at what's
available in the Visual Editor. So there's this triple
shove going on here inside of this View Inspector. And I asked John
Hoford about this. And he said that's because
it's wrapped content, so it's trying to pull in as
hard as it can from both sides. So this is what it's going
to show for wrapped content. I can change that, of course,
to fixed width-- that's 100 dp. That's not too exciting. I can also change that
to match constraints. So match constraints is a new
feature for ConstraintLayout. It's a new way to layout views. And what it says is
take up all of the space available by the
constraints given. So in this case, I'm constrained
off the right and the left. So it's basically the
same thing as fill parent. And this is how
you would take up the full screen in
ConstraintLayout. You wouldn't want to use fill
parent in ConstraintLayout. And when I'm in
match constraints, I get this really
interesting icon here. And I originally thought this
was a heartbeat for the longest time. I thought this was
like a heartbeat icon. I asked John about this. It turns out that's
actually a spring. And on some versions of Android
Studio, you get two springs. On some versions, you get one. So I guess it's more springy
for some of us than others. So let's switch this back
over to wrap content, and let's add another
view so we can start building more complex layouts. So I'm just going
to add an ImageView, and I'm going to
constrain it so it's 20 dp off of this text view. Then I'm going to
constrain it on the right. And it does what
we'd expect, right? It's going to go ahead
and move that ImageView so it's 20 dp off the left
and the ends are aligned. Now I'm going to add another
constraint over on the right, and we'll see that
this ImageView is going to center itself. And so here, we can see
this centering trick that we did for
the whole screen. We can do this on
another view as well. Now, I want to change the width
of this view from wrap content to match constraints. And this time, instead
of match constraints, meaning, it's going to
take the whole screen, it's going to take the
width of this text view. Whatever size that text
view is, this ImageView is going to try to match
that constraint as well. And when I do that,
this new control shows up in the visual editor. So this little line, it
creates a little triangle. And when I click it, I
actually enable an aspect ratio on this ImageView. This is a really
nice feature if you want to display an image
with an aspect ratio. Images, you know,
when we get them from designers or
from the web, they come in whatever aspect ratio. And our designer always
wants them to be 1 by 1 or 2 by 1 or 16 by 9. You're laughing because
you're a designer, and-- CHRIS SINCO: It's
my fault. Sorry. SEAN MCQUILLAN: And so we
can set up exactly what our designers ask for. We'd have to write a lot
of code to do the resizing or to fix this aspect
ratio and also resize this view as that text view
changes at the same time while maintaining
this aspect ratio. Now, if I set this
aspect ratio to 3 to 1, I kind of introduce these
conflicting constraints here. I've set one aspect ratio that
says I'd like this to be-- one constraint, 3
to 1 aspect ratio, and then another
constraint saying this can be no wider
than this text box. ConstraintLayout has to solve
both of these at the same time. And it's going to choose to use
the constraints from the text box above the aspect ratio. I can free up another dimension
for ConstraintLayout to solve. So if I change the height
to be match constraints, it's capable of resizing
both dimensions. So now it can set the
3 to 1 aspect ratio by making this
ImageView less tall. So that's all we can do with
just a single element or two elements. Let's add a little bit
more of a complex view and talk about how
to lay things out with more features
from ConstraintLayout. So my designer just sent
me this lovely email form. Thank you. So I want to pause for a
second and mention this is a talk about ConstraintLayout. This is not to talk about
how to design login forms. I did one of those
earlier today. Please don't copy
this login form. There are many problems. But we can see here, there
are a couple things going on. The labels are right-aligned
to some sort of invisible line in the center of the screen. The edit text appear to be
left-aligned to that same line. And then the "login" and
"new account" are hanging off and they appear to be aligned
to the edit text right. And then, at the same time,
"email" and "password" appear to be vertically
centered on the screen. And we're going to try
to do all of those things in ConstraintLayout. So before we do that, how are
we going to layout those text views, right? We have the "email" text, and
we have "email" edit text. We could align the
top of the text view to the top of the text view
or the bottom the text view to the bottom of the edit text. That would actually
be incorrect. If we take a look at how
fonts work-- just dive into fonts for a second,
and look at font metrics. We have a bunch of them. We have this baseline
at the bottom, which, in English
and most languages, almost everything sits on. Then, at the very top, we
have the ascender line, which nothing goes above. And then out at the
bottom, that dashed line is the descender line. And it turns out that the
metric that really matters is this baseline. And if we line
out two texts that have completely different
fonts next to each other along the baseline, that
creates a single line of text for our eyes. And it allows us to read
it as a coherent unit. So we want to do that
in ConstraintLayout. So if I select
this "email" label, I'm going to get this
control and ConstraintLayout. It looks like this. So I've enlarged
it substantially so you can see it. And when I click it, I
get my favorite control in all of Android Studio. It actually blinks
in the Editor. And I call it the green
glowing orb of baseline. So we can go over to the edit
text and click that same thing. And now we can drag from
one baseline to the other and create a constraint
saying these text views should have the same baseline. And we'll do that for all of the
other text views on the screen here in order to set up all
the baseline alignments. And when you line up
text next to text, you almost always want
to use the baseline. That's the correct way
to do it all the time, especially in ConstraintLayout. So now let's go ahead and
put that "login" button on the screen as well. So the "login" button has to be
constrained off this edit text, and then it's also going to get
constrained on the right side. Now let's figure out how to
do this centering, right? The "email" and "password"
is vertically centered on the screen. How am I going to do that? So we've been doing
this thing where we put a constraint on
both sides of a view, and it centers. So let's try to do that. So I'm going to put a
constraint from "email" up to the top of the screen. It's going to pull stuff up
to the top from "password" down to the bottom
of the screen. And it's going to pull
stuff down to the bottom. And so far, this makes sense. Now I guess I'm
going to have to add a constraint from "password"
to "email," right? Because I want these
things to go back together. So I'm going to do that. And this is actually
going to center "password" between "email" and the
bottom of the screen, which is not quite what I wanted. Let's pull "email" back down
with another constraint. And when I do that,
I'm actually going to solve this
problem a little bit differently than
how I did before. This introduces what's called
a chain in ConstraintLayout. And it's going to solve
it with a chain solver. Now, of course, setting up
all of those constraints by hand in the Visual
Editor is kind of tedious. So there's a helper for this. You can go into
right-click on Center and choose Vertically
when I have "email" and "password" selected. And when I do that,
it's going to set up all of the constraints
that I just talked about. So inside of a chain there are
actually three different ways it can get laid out-- four, technically, but three
that I use all the time. So we have spread, which means
evenly distribute everything. So this looks similar to
what we do with LinearLayout. We have spread inside, which
is basically the same thing, except the first and
the last elements get pushed to the edges. And then the one I use
most of the time is packed. So this says push everything
towards the center of the screen and
center it as a group. And so that's what
we're going to use here. We're going to use a
packed chain in order to center both of
these views together. So there's one more thing
we need to do, right? We need to put
this invisible line in the middle of the screen,
that everything's based around. So to do that, I'm
going to go to Helpers. I'm going to Add a
Vertical Guideline. So vertical guideline
is, basically, you can think of it as a
new edge of the screen. So it's, like, I have one
on the left of the screen; I have one on the
right of the screen. And now I've put an
edge of the screen in the middle of the
screen that I can use as an anchor for constraints. I'm going to go ahead
and move that to where I'd like it in my design. And now I could just
take those text views and create constraints from
those to this guideline. And to kind of visualize what
this is doing underneath, if I move the
guideline, it's actually going to move the
entire layout now. So let's move that back. And then let's get
another design. Because it turned
out, that design was not performing very well. So after many user
studies, we've discovered the solution
to our login form is left-aligning the labels. So my job is now
to implement this. So let's try to do that. Well, I did it, and I
translated it to German, and this is what happened. This is not great. So what happened here? So it turns out,
if I lay this out similar to the way I
just did, right-- so "password" is the longest
field in these labels. So if I set up a constraint
from the edit text over to "password" and
then another constraint from the edit text down to
the "password" edit text, this is going to work
great in English. But then, when I translate it
to German, these constraints, this invariance I had that
"password" is the longest field is no longer correct. So what I'm going
to need is something that's dynamic that's based
on all of these things. It's kind of like a view group. Basically, I might want a linear
layout to hold these things. But actually, I'm
in ConstraintLayout. So how do I do that
in ConstraintLayout? Well, it turns out,
there's another helper, and we're going to use that now. So if we go into Helpers, and
we use Add Vertical Barrier. This allows you to add
a barrier to the screen. What a barrier is is it's
kind of like a view group. And in fact, it's actually
called a group in code. So we can open up
the component tree, select our "email"
and "password," and drag that down to be
inside of our barrier. Now, it's not
actually a view group. It's just a view that's
added to the screen. It's positioned on one side or
the other of all of the views that are inside of it. By default, it's on the left. But if I open up
the Attributes pane and scroll down
to the bottom, I'm going to find a barrier
direction, which I can set to the end. And now that I've done that, I'm
going to set up my constraints and then translate my
English over to German. And everything's going
to re-layout and do exactly what I expected. So that's really it. That's all of the features
and ConstraintLayout 1.0 and ConstraintLayout 1.1. So now I'm going to
pass it over to Chris who's going to talk more
about more tricks that can be used to use the Visual
Editor to build constraints. CHRIS SINCO: Cool. Thanks, Sean. So with ConstraintLayout,
we've, over time, introduced many concepts. And so we started
with the basics, which is just constraints,
margins, baselines, and chains. But over 1.1 and 2.0 alpha,
we've introduced things like guidelines and
barriers and groups, and then there are many
more helpers to come. And then, of course,
there's motion layout. But one thing that
we've heard consistently is that, as we've
added more concepts and the layouts have
become more complex, it's actually become
increasingly harder to manage all of these
with ConstraintLayout. And so what I'm here
to tell you today is that we've actually
been improving a lot of this in the Visual
Editor in Android Studio. And so the four areas I'll talk
about are creating constraints and how we improved that, also
some new view options we added to the design surface,
and then some tricks around zooming and panning,
which are super useful when you're dealing with
ConstraintLayout, and then, of course, using sample data,
which we introduced back in the 3.2. So creating constraints--
so in this case, we have two components. It's pretty simple. We have an ImageView
and a TextView. And so if we want to
center the ImageView, then we just put one
constraint on the top and one on the bottom. But let's take that lovely
login form from before. So from a UI perspective,
this is actually not too complicated. We just have some labels,
we have some inputs, and we have some buttons. But from the constraint
point of view, there's actually a lot going on. So we have this
guideline in the middle. We have the "login" button
constrained to the bottom and the right of the input. We have the inputs themselves
constrained to the guideline. And so because all
these components are pretty close to
each other, when you're dragging these constraints
around in the Layout Editor, it can actually be pretty
challenging to get it right. SEAN MCQUILLAN: Even
when I made that slide, I hid half the constraints
because it was too busy. CHRIS SINCO: Yeah. That was very
simplified, actually. So one thing we've
done is actually is we've added the ability
to add constraints directly with the context menu. So in this case, if
you have components that are really
close to each other, this makes it a lot more precise
and more direct to actually set those constraints. So in this case-- and this is
available in 3.3 beta as well so you can
try it out today. And so in this case, if we
select one component-- which, we have this lovely
cat picture-- you can just simply
constrain it to the parent. So what does it look like if
you have multiple components? So in this case, we have
these two text views that are really close to each other. And so not sure if
people have tried to create constraints
between two text views that almost overlap. It becomes a little
painful when you're going from the bottom of
one to the top of the other. And so with this
new context menu, you can actually just
keep the two selected. And then, when you open
up the context menu, there's now this constrain menu. And so you can actually just see
that the two elements that you want to use are
there, and then you can easily cascade to the
right constraint that you want. And in this case, we're only
showing the start and end. And that's because,
in this case, the top and bottom constraints
have already been set, so we don't show them. So we can look at
another example. So here we want to
constrain the location icon to this vertical guideline
that's all the way on the left. So if you use the
drag-and-drop method, what you'll notice is that,
as you drag from the right all the way to the left,
you get all these-- I guess Sean's favorite
little green flashing stuff-- a lot of these targets
that all show up when you try to
create the constraint. And so if you're trying to
target some of these smaller things like the following
text or the numbers, it actually gets
pretty hard when you're trying to do drag and
drop with ConstraintLayout. And so again, this makes
it a lot more direct. So you can select the
guideline and the icon and just use the context menu. And if you really don't
want to select these things on the design surface, you can
totally use the component tree. This becomes even more
useful depending on how deep or how complex your
hierarchies get and does the exact same thing. But if you do like drag and
drop, you can still do it. And one thing that we've
tried to make easier is actually when you drag it. And so in this case, we have
this new gesture, which pending is called drag to center. And so, I think as I
mentioned before, as you drag, you now see all
these little targets. And so instead of trying
to actually target those specific green
dots, you can just simply drag to the
middle of the thing that you want
actually constrain to. And so in this case-- this is just some screenshots--
if I drag from the mountain view text view, I can
just drag all the way to the middle of the cat
picture, release the mouse, and then I get this nice pop-up
menu that just shows me the two constraints that I can set. And so in this case,
because the mountain view, we're going from the left of
the mountain view text view to the cat picture, the
two constraints that make sense are actually the left
and the right or start and end. And we actually have this as
well, which comes in handy when you have overlapping views. And so this one's pretty simple. But sometimes you have
views that you want to hide and show at runtime. And so all you have to do
is drag to wherever you-- to the target. And what we'll do
is actually figure out which views are
under that pixel that you released the mouse
and then show you a context menu accordingly. So if we move on
to view options-- so the design surface has always
had a bunch of view options to take advantage of when you're
working with your layouts. So the two I'll talk about
specifically, which we added is show all constraints
and live rendering. So if we go back
to our login form. We're going to reuse this a lot. The constraints are set here. But the thing is, when
you're trying to-- let's say you're
new to this layout, and you're trying to
actually edit constraints on one of these controls. There's actually a lot going on. And actually, again,
this is pretty simplified compared to the
normal design surface. And so what we've done
in Android Studio 3.3 is we've added this option
to show all constraints, but it's actually
turned off by default. And so here's a quick video to
show you what that looks like. And so what we'll do
instead is we only show the constraints on the
actively selected component. So this makes it easier to
just work with the component that you're actually
working with and not be distracted by all
the arrows and margins that usually come with the layout. Of course, you can
easily turn this back on if you do want to
see all the constraints at the same time. And so this is kind of
showing you a side by side. And so on left, we
have it turned off. And on the right, we
have it turned on. And so, especially in the
design surface or design mode, it actually cleans it
up a lot because you don't have all these
little arrows and margins, especially for elements
that are really close to each other like the
322 in following and the 20 followers. And in blueprint mode,
it's the same thing. Even though blueprint
mode is heavily simplified because we don't
render the components, it still gets a little
hairy to look at. And so we think this is a
good option as well here. The other view option we
have this live rendering. So we've actually
done live rendering by default in ConstraintLayout
for quite some time. Oh, let me go back. Can I go back? No. And so it's on by
default. But depending on the specs of your
machine, [INAUDIBLE] it can actually
be a little slow. So as you drag around,
you might make a mistake. Or oftentimes, when
I've tried to use it, I'll try to create a
constraint, and then the button will move way after I drag it. And so that actually causes
me to make more mistakes. And so if you turn it off,
it's actually much faster as you drag and
move things around. You can still see
the bounding boxes when you're dragging around. And so you'll know
where things end up. The only downside
is that it just doesn't render as you drag. And alternatively, you
can use blueprint mode. So here we don't do
any live rendering. We usually recommend
this is the best way to work with
ConstraintLayout because you can just focus on
the constraints. And so as a refresher,
to set these options, they're in the top-left
corner under the eyeball. And if you want to switch
between design and blueprint mode, that's using the
blue layers icon as well. So the other thing I'll talk
about is zooming and panning. So you've actually been able
to zoom and pan in the Layout Editor for a while now. And it comes really
in handy when you're dealing with constraint
layouts especially when, again, when things are
really small or when they're really close to
each other or overlapping. But what we've done in
3.3 is we've actually changed the keyboard
shortcuts to match more of what we expect from
the design tools like Photoshop and Sketch. And so to zoom in, you can
use Command or Control, depending on what OS you're
on, and then the equal sign. So you don't have to
actually hit shift and then the equal sign to get the plus. Just hit equals. But if you really want to use
shift, it actually still works. And then with the mouse wheel,
you can hold Command or Control and scroll up. And then if you have a trackpad,
you can just pinch in to zoom. And the opposite
is for zoom out. So it's Command and
Control minus, and then Command and Control
with the mouse wheel, scroll down, and then pinch
in the opposite direction. And then zoom to fit--
so if you're zoomed in, and you want to get
back to that layout where you can see
the whole thing, you can just use Command
and Control plus 0. And so then, if
you're zoomed in, and you don't actually
want to zoom out, but you want to pan
around, you can actually do so by holding Space
and then using the mouse to click and drag. This is a familiar gesture
if you've used Photoshop or other design tools. And so the last tip I'll talk
about is using sample data. And so with sample data
in ConstraintLayout, it's actually easier
to preview how your layouts will respond
to different content types at runtime. And so we introduced sample data
helpers in Android Studio 3.2 make it easier to work
with in the design surface, specifically for
ImageViews, TextViews, and RecyclerViews. But before that, you
could use tools attributes in XML, which are still useful. But we just didn't find were
as discoverable on the design surface. And so with the ImageView,
we have two sample sets. We have avatars, and we
have scenic backgrounds. And if you want to add your
own images to the sample data, you can do so. You just create a
sample data directory at the root of your project. And so a sample data, and with
your ImageViews constrained, you can actually
just quickly switch between different
types of images and then also set different
aspect ratios and constraints. So you can quickly
see how your layout responds without actually
having to run your app. And the same goes with TextView. So with TextView, we have
a bunch of sample data. So we have cities,
we have lorem ipsum, we have dates, full name. And again, if you want
your own sample data, you can create it at the
sample data directory at the root of your project. And I think we support
flat text files and JSON. And actually, with
TextViews, I think this is even more important
because oftentimes, you'll have TextViews that are meant
for more open-ended content such as profile descriptions. So in this case, we have
no domestic short hair is a very short description. But then on the
right, this one's just a bunch of text
plopped in there. And so without having
to run your app, you can see, just with sample
data, how your layout responds. SEAN MCQUILLAN: So I don't
need a copy lorem ipsum off the internet every time now? CHRIS SINCO: No. It's just there. And I think, as you mentioned
in the previous example, this is great for testing out
across different languages. And so with that, I'll
hand it back to Sean to talk about some new features. SEAN MCQUILLAN: Thanks, Chris. All right. So that covers everything in
ConstraintLayout 1.1, 1.0-- some of the new
features in the design surface coming out in 3.3 that
should hopefully help you use that to build ConstraintLayout. And now I want to move on
to new features coming out in ConstraintLayout 2.0. And by that, I
mean Motion Editor, the thing we're all
very, very excited about. So I want a show of hands. Who has tried playing with
Motion Editor already? So I see five people. So hopefully we can give
a nice introduction here to the basic concepts
of Motion Editor. And then Chris is going
to be back on stage to talk again about
the design surface. So MotionLayout allows you to
build dynamic layouts using all of the features
of ConstraintLayout we talked about
earlier, but then just changing the
constraints over time. So here we can see an example
of building a collapsible header that Chris Banes put
together that does a pretty dramatic
animation that would be pretty hard to build with
a collapsible header itself. So you see that
title image actually hides itself behind the
view as it scrolls up. It's a pretty
dramatic animation. So before we get to
something like that, let's talk a little
bit about what we can build with MotionLayout. MotionLayout can be used to
build collapsible headers. You can build state feedback
or transitions, maybe the open and close
state of a drawer. And you could also make most
of the animations that are in this presentation as well. To understand motion,
to understand animation in general, it's
really important to take a step back
and think about what actually defines an animation,
not just on Android. But even a Disney movie, how
do they make an animation? All animations are defined
by a start and an end. So I start over here. I'm here, and then
I'm ending over here. And in-between, over time,
I created an animation by doing that walking. So that's a very complex motion. Let's talk about
a very simple one and talk about the same concept. I'm going to put a
blue dot on the screen, and I'd like to
build an animation. In order to do that, I
have to define a start. I'm going to put it
in the top-left corner with constraints. I have to define an end. I'm going to put that in
the bottom-right corner with constraints. And now, in order to
build an animation, all I do is transition from
one, from the start, to the end over time. And that's what MotionLayout
will do for you. It'll figure out how to
transition that blue dot from the start down to the end. To build a
MotionLayout, you have to start with a
MotionLayout in your XML. So MotionLayout is a
subclass of ConstraintLayout. So we did that so
that it would have all of the features
of ConstraintLayout while adding all of the
new features in order to support animations. A MotionLayout then
points to a MotionScene, which is a separate XML
file from your main layout. And the MotionScene is where
you encode that start and end information that
defines your animation. The start and end are defined
in terms of constraints sets. Now what are constraint sets? You may be familiar
with this already. But if not, what we've
been talking about so far looks like this. So this is what I would
call a constraint layout. It's the views,
the actual labels, plus all of the constraints and
all of the sizing information. A constraint set
is just this part. It's just the constraints and
just the sizing information. It points to IDs
of actual views, but it doesn't actually
contain the views themselves. Now if I animate a constraint
set, it would look like that. And if I apply
that to a real view and did that same animation,
it would look like that. So let's build a fairly
easy-to-follow-along animation in ConstraintLayout
with MotionLayout. So here we have a pretty
dramatic reveal animation where the title comes on
top, the subtitle expands down below, and then
the description comes in from the bottom. And at the same time, the
image in the background is also resizing itself. So there are a lot of
things going on here. This might be actually
hard to write in code. But it's fairly easy to
write using MotionLayout. So let's take a look at
how we're going to do that. So to make a
MotionLayout, I'm just going to define the
start and the end. So the start, I'm going to
move that title of the screen. And I'm going to do that
by making a constraint from the end of the title to the
start of the ConstraintLayout. And ConstraintLayout
is very happy to lay your views out off
the screen if you ask it to. So please intend to do
that if you ask it to. And we're also going to do
the same thing on the bottom where we're going to put a
constraint from the description text to the bottom of the
screen to push that description text off the screen. Then to actually
build that, we're going to go ahead and
make a MotionLayout. So again, this is a subclass
of ConstraintLayout, and it has one new tag. It has this layout
description tag, which is going to point over
to that MotionScene file. Here, I'm going to
call it space scene. Then I have to define my
layout, which is just the views. I don't give it
widths and heights. So I don't constrain anything. I'm literally just going
to make a list of three TextViews and an ImageView. Now I'm going to go over
to that space scene file I was talking about earlier. This is the MotionScene file. So it has a MotionScene tag. And inside that, it
defines a transition. And a transition has
a start and an end. And again, that's the thing
that defines an animation. An animation always
has a beginning, and it always has an end. To define start, I'm going
to make a constraint set. And a constraint
set is just a tag. It has an ID. And then it defines a
list of constraints. And it's going to have
to define a constraint for every single view
that it's constraining. Here I'm just going to
show one of the views and leave the others
off the slide deck because it got a little long. But we'll say which
ID I'm constraining. I'm going to
constrain the title. I'm going to set
its height, width, and I'm going to
set its padding. And then I'm also
going to constrain-- to push it off the
screen, I'm going to constrain the end
to the start of parent. I'm going to do the same thing
for the constraints at the end. I'm going to just
go ahead and make the title view constrain the
start to the start of parent. And this brings that
title onto the screen. I'm going to do the same thing
for all of the other views in this layout as well. And that's all I have to do. It's just a little bit
of declarative XML, and I've built this animation. So now I'm going
to pass that back to Chris who's going to talk
a little bit more about-- CHRIS SINCO: --the
Motion Editor. So at I/O this year, we
gave you a sneak preview of the Motion Editor when we
had announced MotionLayout. Since then, we've been
working pretty hard on it, but it's not quite
ready yet, sorry to say. But we're still very
excited about it. But we also wanted
to make sure that we focus on getting some
foundational pieces in place before we release it. We also don't want
to be too impatient and really make sure we get
it right, unlike some things we've released too early in
the past like Instant Run. [LAUGHTER] So the first foundational piece
is really the MotionLayout library itself. So we just talked about that. And it's been out for a while. And so before we got too
far in building the tool, we wanted to make sure
that we actually nailed the right animation
concepts and controls that are required to make
these simple and beautiful animations. On top of that, the
library also needs to be performant and integrate
well with your existing views. And so John Hoford and Nicholas
have been really working hard on the library. And so they love
all your feedback and all the really cool demos
that have been coming out. So please keep it coming in. Thank you. But the other thing is actually
the quality of Android Studio. And so this is the second
foundational piece. And it's been the
primary focus for us in 3.3 and the
upcoming 3.4 release. And so in this case,
we've made a lot of performance and
interaction improvements to the design surface
because it actually has to be able to
render animations at 60 frames per second
and also make it easier to work with constraints,
because one of the biggest prerequisites of MotionLayout
is you have to know how to use ConstraintLayout. And so we think that, if
we invest in the quality now in the tool,
it will actually make the Motion Editor
experience much better in the future. And so with that,
I'm here to show you some very early explorations
of the Motion Editor. These are just mock-ups. This is not the build. I'm the designer, remember? SEAN MCQUILLAN: This is
all made in Photoshop. CHRIS SINCO: Yeah. This is all Photoshop. Of course, we'd love
to hear your feedback. So feel free to find me or Sean. And I think John
is here as well. We'll be at the speaker
QA to talk more about it. So if we take the example from
before where we have the space picture, and we have some
TextViews animating in, let's just use that
as the context of what we'll see in the Motion Editor. So what does that
actually look like? So here we have a new
perspective on the component tree, which, for now, we're just
calling the transitions view. And so for the
purpose of the talk, I'm just going to talk
about this new view because we think this is the
most significant animation part of the new UI. Of course, later
on, you'll actually have the other views like the
property panel and the palette. But we haven't quite
figured out the details of how that integrates with
this timeline or this transition view. So stay tuned for that. So in this case, we have
the start of the transition. And so you can see that
the TextViews are actually off the viewport. But you can see that
there's a motion path that goes from outside and then in. We don't actually render the
TextViews outside the viewport today. But that's definitely
something that we will need to have for
animation because we know that's a very
typical animation example, to have things fly in. And so if we fast forward
halfway through the transition, so now you can see
that the TextViews have moved about halfway in. And in this case, we have the
space image zoomed back out. And that's what
we intended here. So if we rewind, let's go
deeper on what this transition view actually does. So we're only showing
one transition right now. And it's uniquely named by
its start and end constraint set, which simply is just
start and end in this case. You can have multiple
transitions per MotionLayout. And so with this
dropdown, you'll be able to switch between
the different transitions. And of course, we'll load the
corresponding constraints sets and change the
timeline so you can see how the components change. And so each transition has
its own properties, which is, of course, the start and
the end constraint set. It has the duration, which
is expressed in milliseconds, and the stagger property, which
allows you to actually stagger the animation itself. So if we move down,
we have the timeline. And so you have,
starting from the left, you have the playback bar. So you can loop the
animation as many times as you want just to get
the animation right. You can quickly jump to
the start or the end. And if you want to speed up
or slow down the animation, we also allow that
as well, again, just to tune the animation perfectly. And we have this time control
here so you can actually step through millisecond
by millisecond just to see the animation plays out. And then, for the timeline
itself, we show from 0 to 100-- 100 being the end. And so you can use
this slider here to actually make the
timeline bigger or smaller depending on which
part of the transition you want to focus on. And so if we move
down, we can actually see all the components
that you can animate in the MotionLayout. And so in this
case, each component will show that they have a
start and an end constraint set, which are required in order
to actually animate anything. And so we look specifically
at the space flash image, it has a key attribute in
the middle or a key frame, which we're actually going to
change the scale type halfway through the animation. And so if we zoom
out, those icons on the timeline
actually correspond to the same icons on
the design surface. That way you can
actually correlate-- OK, here's my components
that I'm animating, and where they're
starting and ending, and what are the
actual motion paths. And so that's where we are
with the Motion Editor. We hope to get it out soon,
but I can't promise anything. Sorry. SEAN MCQUILLAN: Later next year. CHRIS SINCO: Yeah. Sometime in 2019. And that's it. [APPLAUSE] [MUSIC PLAYING]
