[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]