What's new in ConstraintLayout (Google I/O'19)

[GOOGLE LOGO MUSIC] NICOLAS ROARD: I want to go back a little bit on why did we create ConstraintLayout So if you look at ConstraintLayout one, we wanted to have something that was a very flexible layout manager, something that would allow you to specify the way your UI should be laid out and behave in as much of a declarative as possible And in order to do that, we created a really rich model of constraints So you could position your widgets relatively to one another, you could central them in between each other With bias, you have central positioning, dimension constraint and ratio, and chains, which is a pretty interesting way of positioning a group of widgets together So all of that comes with a lot of power And to help you create those layouts, we also had this idea of having helper objects And the helper objects are objects that are not resulting automatically in a visual difference by themselves, but they will allow you to set up your UI in an easier way The typical example is Guideline, where you can create those guidelines that your designers are so fond of and just align the widgets to that, which is nice because, often, before that, you would have to translate what they meant by guidelines in your layout Well here, you can simply create the guideline as in the mock and add things to it In a similar way, we introduced the Barrier Helper in the ConstraintLayout 1.1 that gives you some interesting behavior, where you could decide of a set of widgets where to position yourself The other important aspect on ConstraintLayout, and you’ll see that’s going to come in very handy for the rest of this talk, it’s this notion of trying to keep the view hierarchy flat So there is some performance reason for that, but more interestingly, it’s really this idea of decoupling the layout information, the layout rules to the view with the view hierarchy itself And the nice thing with this is that we have an object called ConstraintSet that can encapsulate all those rules, and you can create multiple instances of the subject, swap them in or out your ConstraintLayout So that gives you a lot of flexibility not only to lay out and create your UI but also at the time when you want to change your UI And, finally, it’s an unbundled library We also from the get go created this layout to be supported in the design tools, so we have a pretty nice UI builder And that brings us to ConstraintLayout two Why did we create ConstraintLayout two? Well, the key element here is really to try to create a layout that is even more flexible We wanted to give you back even more power And we did that in a few ways One, we added the concept of Virtual Layouts, which are helpers that will do essentially a lot of the groundwork for you So you don’t have to manually set the constraint one by one, you could apply a set of constraints via this kind of virtual layouts We have helpers and decorators, and also we exposed a lot more of the internals of ConstraintLayout for you And that means that you can do runtime a lot more stuff in ConstraintLayout two We also did a lot of work in optimization, and of course a big highlight of ConstraintLayout two is MotionLayout It’s really the more flexible way you can think of for UI is introducing motion and animation We still continue to strongly support design tooling, and specifically we are in the process of building a motion editor in Android Studio, and we’ll talk a little bit about that And in order to use it, it’s very easy Just add this dependency to your [INAUDIBLE] file, and if you’re using AndroidX, similar things, just different naming Notice we just released 2.0 beta one [APPLAUSE] So check it out We are pretty happy where we are standing in terms of API, and yes, we are really looking forward to what kind of feedback you can give us So to kind of present things a little, here is the overall architecture of ConstraintLayout We are starting with this very generic solver that can do a lot of competition for us and express your layouts in a very complex way But we don’t expose that directly What we expose is this Constraint Model The nice thing with this is that we can in between add an optimizer that takes care of a lot of situations

that are very unambiguous and don’t need a linear solver So that gives us a lot more speed in ConstraintLayout two On top of that, we have the helpers objects and the virtual layout that are kind of using this construct model for you And above all of this, we have MotionLayout that takes advantage of this entire foundation Let me cover a little bit the ConstraintHelpers So as I explained, we did have helpers in ConstraintLayout one In ConstraintLayout two, we expose that class So not only we can continue to create helpers for you, but you can actually create your own helpers So the thing that’s important to notice with the helpers is that they are not of your group We are not adding an extra layer of hierarchy there All we do is we essentially tag the widgets with that helper And the nice property is that you can actually have multiple helpers tagging the same widgets So one widget can actually have its behavior changed by multiple helpers But the general idea is that, if you have a repeatable behavior, you can encapsulate it and just use it in a declarative way the next time and you don’t have to do code after that A basic example is a circular reveal Nothing too fancy here, I’m just having a reveal pointing to the different widget that appears What’s interesting is the actual code We are not reinventing the wheel It’s just a few animation [INAUDIBLE],, but we are encapsulate it into a helper, and therefore we can simply use it in your XML file without having to do any programming VirtualLayout is another type of helpers And as I mentioned before, the idea is to still keep the hierarchy flat It will position the widget for you What’s nice is, because we still are the same level of the hierarchy, you can reference widgets that are inside the VirtualLayout and vise versa So you can also do a lot more runtime changes on the fly And let me cover Flow, which is a virtual layout we introduced recently Flow supports multiple modes on helping you layout your objects The first mode is essentially creating a chain for you, either horizontal or vertical And we can also support different wrap modes The first one is essentially still using chains As we go along, user one is doing a little more interesting behavior So this is what it looks like It looks like a normal widget We reference other widgets It’s a helper As a normal widget, you can set its dimensions, wrap content, and et cetera And you can constrain it like any other widget in ConstraintLayout So it’s a very familiar pattern You can even set up the background, which is kind of handy in some situations And the default behavior, as I said, is to create a chain So we do support all the type of chain– spread chain, spread inside, backed, and that allows you very quickly to set up this behavior What’s new is the wrap behavior It’s akin to Flexbox layout, where if you don’t have the space, before you can offer another space or you can’t do anything else But, now, we will create automatically an extra chain for you By default, we are using the same type of chain for all the different chains, but you can actually specify a different chain between your first chain and the rest of the chains You can also set up a max element before you decide to wrap, which is kind of handy to create a table like behavior Or is it? Well, the problem here is, if the elements don’t have the same size, you’re not going to have a grid, because we’ll still have a chain And that’s where the last mode comes in, where we will align the elements in the rows and columns for you So here’s an actual example on how to use it I’m going to take a UI that definitely looks like something that could use flow, a basic calculator, and I want to create the body of that calculator like that And the first step is I’m going to set up the flow, make it wrap content, center it in the parent, reference the element, add a couple of attributes to define how it’s going to behave, and we end up with this result Very easy You don’t have to create all the changes by hand, all the constraints by hand You just reference them What’s nice is it’s a normal widget, as it’s a normal child of ConstraintLayout, so you can here constrain another widget to that flow element in exactly the same way as you would do normally But what’s even better is that you can do the same for the inside elements

So, here, you have this other text view that I actually constrained on those internal buttons The other step that we took to bring more flexibility in ConstraintLayout two is adding more APIs for you to use We have the constraint set API, which is this way of basically getting the state of the layout And you can change it and reapply it to ConstraintLayout We have a new API, that instead of you having to manually go and modify the params, we provide this fluent API that lets you change them and will do the right things in an efficient way And there is more And there is more stuff I’m not going to cover too much, but we the resize on the fly, resize handling, state management, we even added margins on barrier recently So there is a lot more stuff But really here what I’d like to talk about, and I’m going to hand over to John, is MotionLayout [APPLAUSE] JOHN HOFORD: So for those who don’t know, MotionLayout is a subclass of ConstraintLayout It has a separate XML file for the constraints and the motion elements called a MotionScene file And it allows you to directly animate between two complete constraint sets So the way it basically works is you have constraint sets, we call them states internally, and you can transition between them You can also manipulate the transition with a key frame, and those can be in a lot of different areas, and I’ll show more One of the unique things about the system is it has a few different coordinate systems Very important, because in this sort of situation, you’re moving between two undefined states The phone could be different It could be in landscape, whatever You need to have a coordinate system that can handle that So one of them is parent relative, another one of them is delta relative, which is actually the default. It allows you to move in x and y separately The other one is path relative, so if you’re deforming around the path, that allows you to do that The other thing that we build is a lot of clever on swipe and on click behaviors And, actually, in the beta, there’s some new stuff in there that’s quite exciting So how is it basically laid out? In your layout file, you’ll have your views, your helpers, your virtual layouts, and it’ll point to the transitions, the constraint sets, essentially the MotionScene file So let’s do an example NICOLAS ROARD: So the basic stuff on how you can use MotionLayout is you need two states So here, I’m having my little sun and moving from one state to the other It’s also not super realistic Typically your sun would go a little higher So that’s one of the nice things in ConstraintLayout 2 and MotionLayout is that you can tweak how you get from the state to the end It’s not just enough to define those two states, because, often, you want to do a transition that is not linear So here, I just want to add, for example, an arc motion And I can simply do that by adding a key position like a key frame that’s going to control the position at the middle of the animation In a similar way, often you want to do more than just positioning You want to change other types of attributes like here the color And we can do that as well So that’s where MotionLayout goes much beyond the pure layout capabilities We can charge and interpolate across a lot of attributes We have a couple of extra features that are interesting with cycles, that’s just by separate [INAUDIBLE] animation as well, you notice that here the animation is still playing even though we are in the middle of the transition And to cover all of that in more details, John? JOHN HOFORD: So we’ll just go through the main tags There’s KeyPosition position And, essentially, it just deforms your path using the coordinate system And in this case, I pin it to the complete delta x equal one Next one is KeyAttributes You can manipulate rotation, any of the post layout

transforms, you can do custom attributes with which will reflectively call all the different APIs So one of the more complex things we add is KeyCycles They allow interactive animations in space So, as that the object progresses, it will animate, and it will just simply provide a delta in the position Now, you can apply KeyCycles to any attributes, so it can be rotation, and you’ll see a whole bunch of them as we go along So in this case, as the animation progresses, it’s animating across the entire scene, which is very different from KeyTimeCycles, where the animation is independent of the position It’s sort of setting the frequency of the animation And of course, you can deform these things with lots of clever shapes and paths and produce lots of interesting effects So one of the other things that we don’t really talk about much and I want to mention is programmatic control here Essentially, as we animate, we can make a programmatic change in direction in real time So what will happen is you’re in an undefined state, because you’re halfway between two states that start in the end If you issue a command transition to a new state, it will sort of recreate a transition between where you were at that point in time and the new position that you’ve requested So it can be relatively interactive with your application We also have commands that allow you to get the constraints set involve, and then it’s a constraint set It’s an API we’ve had since 1.0 You can go and change values and apply it back into the system and rebuild the scene You can also actually point to a completely new scene, another XML layout file, a MotionScene file, and it will just naturally adapt to that new one So there are actually a lot of little APIs in it to allow you to control things dynamically based on your application So one of the other things I want to show is that we can integrate with helpers So this is FlowLayout, as we just talked about And in fact, all of these views are in it But within the constraints set, you can set the IDs of all the views that are inside the flow so that you can change on the fly, and it will animate between the two layouts dynamically So you can pop out views, things like that So one of the other things that is pretty important is Touch Handing It tracks your velocity of your finger and matches the velocity of the object you tagged to it If you leave out an object to anchor to it, it will just be a percentage of the screen size And you can change a lot of parameters on it about the velocity, how you want it to terminate, things like that There are actually quite a few parameters on the system there So let’s talk a little bit about the Motion Editor and why we needed to do marble If you look at what you see here, in the Motion Editor, you’re going to drive Android Studio crazy It beats up on in Android Studio like you wouldn’t believe And unlike, let’s say, a mouse interaction where you’re dragging, you drag and you stop Someone could leave this running and go to lunch, and they’re stuck The system has to be able to handle 60 frames per second continuous over and over again And this is something I just built to show off what it looks like, what you can do, and here is it in crazy, because I thought I’d throw it in because it’s cute So now let’s actually go through a little bit about the Editor We’re not going to release it yet We’re still working on it, but it’s my main job from now until it releases [APPLAUSE] So this is a copy of what’s right now in Master,

and we’re running it So what you’ll do is you’ll take a ConstraintLayout, and you’ll just right click and you say convert to MotionLayout, and then this is what you’ll see You can go ahead and select a set of constraints, create a collection of constraint sets for the starting and ending And then make some changes on the ending And, in this case, I just shorten one of the values, and it animates That’s pretty much it You can go ahead and change all the attributes [APPLAUSE] So it’s coming We are working on it And I’m hoping, within the next few months, you’ll start to see versions in alpha Don’t know when OK, so Nicholas? NICOLAS ROARD: Yeah, so let’s talk a little bit on how you can actually use MotionLayout in your applications First of all, all of these examples are on the GitHub repository we set up, so check it out It should be very straightforward, you have all the examples, all the XMLs, and all of the code So how to integrate MotionLayout with your application? The basic thing to think of is that you don’t have to start from the ground zero You can start to use MotionLayout today and integrate it in your current UI So here’s a couple of examples If you have a Coordinator Layout and you have a Collapsible Toolbar, and if you want to have this kind of animated toolbar, right now it’s pretty difficult You have to do a lot of code Or what you can do is simply take a MotionLayout and use it as a collapsible toolbar And you can see on the GitHub repository, it’s really straightforward You just one little bit of code to pass over the progress of the Coordinator Layout, and MotionLayout is going to do the rest So that’s really democratized this type of motion In a very similar way and very similar pattern, you can go crazy with a DrawerLayout, or you can make your view page a little more fancy Pardon my design skills And you can use MotionLayout in a lot of different ways JOHN HOFORD: So one of the ways I wanted to highlight today is building a custom components This actually came from someone asking about can I do this, and it’s like, yeah, of course you can So starting really simple Let’s say you just wanted to have a button that had a little flash to it You can build a button out of MotionLayout, do the animation, and decide how it reacts when you click on it and when you don’t click on it And all these examples are in just pure XML There is no code behind this one in terms of from a user perspective But you can get fancy in a bunch of different ways These are three different examples I just built up by a few of them The top one is interesting in that what’s happening there is there are five different states it can be in Five different constraint sets And we have ways to make it very easy to build a derived constraint set from another constraint set So you can derive and derive and derive And what you’re seeing here is that the swipe handling is going across all of the constraint sets, because there is a swipe that moves you from one to the next to the next And it all happens smoothly The second one is simply a swipe left right, but I added a key cycle to make it look like the object is rotating And the third one is adding some cycles to give you that bouncy effect I assume you’ve seen something like that if you have liked anything in the past So I showed you a little bit of the multi-state I wanted to highlight that notice there are five states here, the one in the center And I’m swiping across them or clicking on buttons which transfer them So you can actually transfer between all the states, and it all happens seamlessly, and you’ll see that to the extreme in a later example So it allows you to have many different states and do many things very flexibly with them It’s way too much to actually go into all the little details that are involved here, all the different possibilities,

but we’ll go into that NICOLAS ROARD: Yeah, so another way that you can use MotionLayout is by driving all the components Like what we’ve seen so far is essentially taking MotionLayout and animating stuff inside it, but kind of like terminal widgets, right? Well, you can also think about MotionLayout as something to do Coordinator Layout would do And here in that example, MotionLayout is actually handling the scrolling of the image but driving this custom view that’s going to get this line going into a circle like that So you can easily drive your own custom views that would have a specific type of animation and having MotionLayout act as a scene coordinator In a similar way, you can take MotionLayout and put it into another MotionLayout So we’ve seen this at the same example, essentially, with Coordinator Layout, but that example actually does the same behavior purely in MotionLayout And how it works is very basic You have one MotionLayout, the outer one, labeled one with start and end states simply containing a MotionLayout for the collapsible bar And we set the progress of that second MotionLayout from the first one And the key here is not so much like we are about to replicate Coordinate Layout The key is that we don’t know what your designers are going to come up as crazy ideas for UI next year or the year after that So by essentially having the power of expressing these type of things, we should be much more future proof The other thing is all of that has absolutely zero code It’s pure declarative in XML, which is very handy when you can do that, because it’s a lot easier to change There’s a lot less side effect to think about than code But sometimes, code and programming can be quite handy when you want to do some runtime behaviors So let’s see how we can integrate RecyclerView with MotionLayout or take advantage of MotionLayout in RecyclerView So I’ve got my screen with a basic RecyclerView And I’d like to be able to have this kind of motion I take my element and just make it full screen So we can define that absolutely trivially in MotionLayout, and I define the two states Very easy Of course, the issue is that the position of that element that I’m animating changes all the time I don’t know where it is on screen So you can basically in the transition listener, you can basically hook that, get the current constraint set, clear the item, calculate the new bounds, pass it back, and reapply it And that’s enough for you to then apply that, and we can use MotionLayout to animate that element There’s a little more magic around here, because remember it’s computer graphics We do tricks all the time What I’m doing here is I’m actually making the element of the RecyclerView being invisible, recreating the element, putting it in the MotionLayout, and animating that one That would ordinarily be not that simple to do other than the fact that RecyclerView does exactly that An adapter in RecyclerView does just that It knows how to create a new view, how to populate it, and it’s simply in that example what we are using Now, the thing that is really cool here is not so much that we can do that, because we could have done it in a different way Notice so that I’m driving that by my finger So it’s not a fire and forget I’m actually dragging that element But because now that animation is done in MotionLayout in a motion scene XML file, I can go and tweak it absolutely trivially So, instead of this basic animation, let’s say that I would like to delay a little bit the position of that element I’m just adding this element in the MotionScene file, and it will just do that So again, the advantage of being declarative like that, it gives you a lot more power and a lot more flexible way of tweaking your design And you don’t have to look at your code It’s completely isolated We can go even crazier Let’s say that I’m adding a rotation here, because why not And then you can get this kind of effect where it’s really– I’m not a good designer, bear with me

But you get the idea You have all the features and capabilities of MotionLayout at your fingertips, and just go with it So that example was interesting, but there is a pattern that is very common in UI with this kind of infinite list And for that pattern, we have an interesting solution So, when you have a carousel like that, you actually know exactly how many elements you have on screen Typically, you have one And you may have one element that comes in, one amount that comes out But, essentially, the number of elements that you’re playing with is limited, and more importantly, you know about them RecyclerView does that, of course, but it does a lot more RecyclerView is going to compute how many elements you need, it’s going to lay them out, et cetera, et cetera So I’m not saying don’t choose RecyclerView But if you have this type of pattern, we could do something a little more interesting purely in MotionLayout So let’s do that If that’s my starting position, I may want to go and swipe on the right or swipe on the left And essentially, I can translate that as different states in MotionLayout I have a start state, next state, previous states MotionLayout supports multi states, and we can take advantage of that So what do we do with this? The trick here is this little bit of code And specifically, that stuff When I reach the state next, what I’m doing, I reset the progress to zero to the start state, and I’m updating my images So visually, this is what it looks like We get that, we go to the next state, and then moving back the progress to zero and dating many images So that’s what happens internally What you see as the user is a little more seamless You have this, you swipe, and essentially, it looks like the element gets added back to the new cue So it’s a little bit of magic But it works really well And here’s a quick example I have something that looks very much like a RecyclerView You notice a couple of decorators playing in the background, and you notice that I can just scroll like that But you’ve got MotionLayout, so you can go crazy on the transformation You can go and add many more states to it Here’s a quick other example where it does the same type of idea but just in a different pattern So really, what I’m trying to say here is that you can go much beyond what we as the Android framework defined for you MotionLayout is really a tool box for you to experiment and come up with something new So to wrap up this presentation First, there is a lot of documentation we put out there There is the documentation on developer.android.com There’s various Medium articles, and we are going to continue to publish those articles as well I highly recommend you to check out the GitHub repository, because there’s tons of examples And I don’t know about you, but as a programmer, I love seeing examples and kind of riff off of that And essentially, the MotionLayout as part of ConstraintLayout two, we are pretty happy with where it stands in terms of the features, which is why we reached beta one So I encourage you to check out beta one, play with it, and give us feedback We really cannot wait to see what you are going to come up with that And again, important feedback We have a bug tracker, we look at all bugs, we try to go through them And the final stuff I wanted to say about the MotionLayout, as John said, we put the top priority to walk on Android’s Studio Module to ensure that actually we have the performances to do a good MotionEditor, but we are very much intent on shaping that editor in the next few months JOHN HOFORD: So if you guys build any cool examples, share them on Twitter so we all could see them and enjoy them I look on Twitter every day looking for them So I hope to see some pretty examples from you guys Thanks [APPLAUSE] [GOOGLE LOGO MUSIC]