hi everyone my name is nicolas and i'm going to talk to you about construction 2 with john hi my name is john i work on motion layout

all right so we're going to talk to you about construct layout 2.1 so you might be familiar with construct layout

sorry

oh no your next slide is not working yeah give me a second

all right okay so let's talk about constraint layouts um

a couple of features that you you should know if you have been using constraintly at 1.0 so basically it's a very flexible layout manager that allows you to position elements relatively controlled dimensions and we have those concepts about helpers objects so that you can create your layout

positioning them not only with those roles but using those additional helpers objects

so the other thing that we have as well is a very powerful design tools in android studio to to control and define your ui so here's a quick video so i know you can a little bit accelerated on how you can build a ui just using the design tools

the one thing i'd like to also mention as well that we often have this question is which layout are you supposed to be using you know on android like are you are you only using construct layouts or you know what are the other layout that you should be using and i would simplify things like that you know

if you have a very simple situation that frame layout can address or linear layout you probably are fine using those this is completely okay you don't automatically have to only use constraint layout

so let me talk a little bit about what we bring in constraint layout 2. first we added a lot of new uh properties and new new capabilities in terms of layout uh specifically we added the concept of virtual art that that brings um you know as helpers objects you know additional capabilities to to simplify your ui right uh we improved on the concept of helpers and the decorators we added new programming api so that you can also control stuff directly in code as you need and of course and we'll talk and john john is going to cover that quite a bit we brought motion layout which is subclass of construct layouts that adds a lot of cool stuff in terms of animation and similarly done with construct layout with alert editor we also wrote a new motion editor in studio

all right so let me talk very briefly about those virtual layout concepts so what is this well it essentially allows you to create like view groups but in construct layout and why do we want to do that the main advantage is that you keep things um with without adding a level high of your hierarchy in your view group and that way we we can we can just completely change the rules on the fly when we want and that's going to be very handy for animation

with uh without having to replace the entire hierarchy all right so how does it look like so essentially this is just like a view that you add into all your layouts and the key stuff here is that you reference other views the interesting thing with the concept of helpers or virtual layout here is that multiple helpers can reference the same view which is not something you do normally with a view group so that can be very convenient to essentially attach different behaviors to the same views the the other thing you notice here is that i can add constraints because flow is just another view so you can set a background you can position that view etc so fundamentally flow provides something akin to a linear layout right but it does that in a in a slightly different way using the concept of construct layout specifically if you know about chains you know under the hood this is this is more or less what flow does we apply all those different uh chains so that the elements are positioned like that so you could see it as a way of easily creating chains in your layout so rather than having to manually define the constraints put your elements into a flow reference them and you would have your chain but it does more it also have mode to wrap elements so if if your objects don't fit in the available space we can we can automatically wrap them

all right

so here's a quick example the first mode is you're using a chain so this once again

um so sorry about that so you can basically have chains so you have the normal chains where you know we can spread the elements around like that you can also have spread inside again those are the normal modes that you have been changed in contract layouts you can also pack the elements like like if they behave like a group

the other mode that we have is this wrap mode where you know you specify your chain and you know if you have the amount of space available for it that's okay but if you don't what happens and essentially what happens here is that we automatically wrap your views so so that they are not on the screen

and then we can specify the behavior of those elements that are wrapped

so you can choose between spread chain pack chains

you can also specify how many elements you have maximum when you want to wrap something and finally like you could look at it as oh it doesn't look doesn't that look a lot like a table uh not quite right if you have an element that is bigger things are still going to behave like if they were multiple chains

so this is where we have wrapped a line that essentially make things like a table so this is all a little bit abstract so let me show you how it works in android studio i have this layout with a bunch of elements that are not organized one thing i want to show you as well that we added in 4.2 is this option to toggle the two attributes when you don't have constraints in studio we set up those um those attributes to those positions so that you you don't automatically have to uh to put a constraint that you can still use your legal layout and those tools attributes allows you to more easily see what happens when you run it on device you can toggle them toggling them back and forth so here you know i went ahead and created my layout by selecting them creating the helper and and as you saw setting the constraints i can then go into the panel and change some of the attributes so we added a specific panel for it in in 4.2 as well and you can see here i can simply reorganize the views so that they organize as i want so let's go back to the horizontal mode you see that the views are actually going out outside of the screen right and i can just go here and set the wrap mode to change and you'll see that the elements are going to be a reflowed like that i can use the align mode as well to be organized a little bit more like a table and you have like different alignment capabilities as well and i can also set a maximum element to have the behavior that i want

all right and that's for motion layout john yes so one of the big things we in 2.0 is motion layout and we've been working on it for a long time and it's very good at doing lots of animations and interactions and you've probably heard about this by now um the but first let's talk a little bit about how it it's sort of organized at its core it's a view group and and in fact it is a subclass of constraint layout and because it's subclass you get all of the features and and attributes you see in constraint layout so what does it actually do

it positions the views it manages state it controls some animation and it does um some comprehensive touch handling let's let's kind of break down how it how it does that

we we start off by saying it will transition between states and what it does is you have a start state and an end state and you you define a transition between those two states

within the transition you can have key frames and they can adjust the the organization and in fact you can have many different states and you can do a sort of state management associated with connected or not connected or whatever your application needs and kind of how it's organized in your code is that you have your layout file like you've always had before and you also have a uh motion scene file and and motion scene file will contain constraint sets that represent the different states and it'll contain transitions

so you can say the the layout file contains the base state the motion layout the um the states will position the constraints it will affect the transforms on whether it's it's scaled or rotated you could add custom properties and there are some properties associated with motion you can add

now when you when you create a constraint set within the system what you're doing is you're writing the xml that contains the information that was normally in your layout file but it's actually now in your constraint set uh under constraint and the ids match up with the ids of your layout file

a transition will tell whether you want to automatically handle clicking or swiping it'll also tell give you your key frames and with keyframes you can have multiple different kinds of keyframes there's key positions there's key attributes triggers key cycles and in fact there's a little graphing package that graphs those the key cycles and the key attributes as they position but let's talk a little bit about key position because it's a it's a unique it's actually affecting the layout of the system and it has actually three coordinate systems that it can work in and you might wonder why would you need three different coordinate systems well since you're moving between two arbitrary configurations and those configurations can change based on phone or on any kind of the text to the language size might adjust the layouts you want to be able to define animations relative to the starting and ending position as it will occur on the device and the first one we have is parent relative it's a it's the simplest in some sense it's essentially mapping to the screen coordinates of the layout right so that zero zero is a top left-hand corner unlike this drawing um it's an old drawing um and uh the next the next one is is the actually the most useful and the default one which is delta relative a delta relative provides you with

a coordinate system where zero zero is the starting point of your layout of your view and one one is the ending point and x and y are kept separate and this is a very powerful approach and and you'll see lots of uses of it in most applications the the next one that we have is actually a parent path relative and and there we rotate the coordinate system such that the path is the x-axis and the the the y-axis is perpendicular to the path and and again the coordinate system is flipped in in this picture um now a a couple little examples that kind of show some of the others one of them is key cycle and this is a very powerful tool for building weird oscillations and and controlling lots of of strange uh behaviors and you'll see a little bit more of that in a uh a little video i'll show later another one that is quite unique is key time cycles which in fact it oscillates in time whereas the last one oscillates with the progress of your animation and that's a subtle difference but it's actually quite important and and you'll see more about it later now let's uh go through a little bit of how you would do make a motion layout you'll start off with a constraint layout you convert it to motion layout and and once you hit convert here it will actually do the conversion and produce a a user interface that is motion layout and now you're in the motion editor you have a start state you have an end state you have a transition so the same xml concepts were talked about are there and now you can go into start stage and modify its locations you can go to the end state and modify its location um and then once you go to transition at that point you'll be able to produce the animation your uh an animation and you can actually play it directly in the motion editor you can also scrub to any arbitrary position and press add a keyframe and it can distort the position of of an object

the the other thing you can do is add a the click or touch handlers in this case we'll add a click handler so now it will automat it it will automatically handle the clicks and now we run it and when you hit the click you see the animation will work so it's a fairly easy to sort of get going with with the motion editor and get you something up and running pretty quickly and very useful so

now nicholas all right so so that's a lot of information uh but that that gives you a little bit of an overview of where we uh you know where we are in terms of the system in terms of the capabilities we actually just released up if my

john can you actually go next slide i seem like i've lost the so we actually just released the 202 uh so if you want uh to use all of those capabilities in your project um you just need to add this dependency line uh either the android x one or the android support if you're still using that we would recommend to use the android x1 and would highly recommend to for you to switch to the 202 because we added a lot of you know improvements in performances notably as well as you know several bug fixes um so if you have not done so this this is a really good release uh the other thing that's important i wanted to cover a little bit uh it might be more important for us but i think it does impact the project and it's it's really the the stuff we are doing on the infrastructure so the first thing we are doing is we are actually moving the development on github fully in the open all the code source there so you can actually go right now sorry on this uh on this address and you'll find the current uh source code for uh for two zero two uh we are still in the process of moving all the development there but the next versions essentially are going to be developed all day the other thing is construct layout is actually separate between two libraries there is a solver library that is more like a platform independent engine to do the layout and you got the core library uh sorry you got the construct layout library which is the android library so we are actually using that solver library also in other places like compass so we are we are renaming that solver into the core library and a lot more of the capabilities will move toward there so that we have a we can actually use it as well in compose specifically that's that's related to motion layout uh going forward with 2.1 we'll also drop the android dot support packet name so we will only release under the android x package name which you know i think by this point it should not be too much of a surprise all right next slide

so i i i'd actually add one more thing about but that one of the cool things about being on github is you can watch every single check-in i make when i build something so you could actually see it being built live which is kind of cool for those people hardcore wanting to see what what we're actually building in the future now one of the things i wanted to talk about here is a little bit about how we would want to learn how would you go about learning some more about this stuff because we could never teach you all the different things that are in this in a small talk um so one of the things we have is there are code labs and and you can actually use you could you can just go through code lab and there are even people on online that have done it on on youtube we have also a lot of advanced samples which uh and here's an example of this this is the latest one and you can see it's very sophisticated and you could actually look at the code and see how it uh how they did it um which is it's kind of neat the other thing that we we have recently is the motion tag series which is a series and this is a sort of like a highlight reel from it um it has it's a series of three minute about short videos each for each tag within the motion layout system so you can actually see how a particular you know if you were interested in keyframes or key cycles you could actually see how the key cycles work or how does that on swipe work or um what you know how the control of a key cycle can achieve certain kinds of effects um it so it's very very useful actually and a lot of the all the animations you're seeing were being done with uh motion layout and it talks about how to do them

all right uh so let's talk a little bit about 2.1

next and exactly what we want to do in that 2.1 release right so um we we are we've been working on 2.0 for a long time and that you know we don't really want to repeat that that kind of timeline for 2.1 so the goal mostly for 2.1 it's uh it's to go with something a much shorter uh release schedule uh and we'd like to you know essentially be done by the end of this year and so we're going to focus more on immediate features immediate needs that we think are going to make still like a meaningful difference in your workflow

next so one one of them for example is scalability um so specifically with uh motion scenes be becoming larger you know it becomes interesting to be able to split them up in different files so that you can organize and reuse some of them in in you know across different motion scenes so we're going to support you know splitting them up like that we also have this concept that's called the constraint overlay that uh essentially will allow you to define the constraint set uh just as an overlay of an existing constraint set so do the path that we took so far for constraint set is that a constraint set is in isolation uh describing the entire set of constraints and we did that on purpose so that it's very clear as a developer what you get the downside of this approach is that it can be a little verbose because in some situations you end up having to re-declare things that you would have declared otherwise you know so so with the constraint of early idea is that it's a little more um okay you can actually shoot yourself in the foot with the constraint overlay because you can it's only going to declare rules that will add to the existing uh you know constraint that already exists so for example if i do a constraint on the left and in my base constraint set and in my overlay i do a construct on the right you are not going to be positioned on the right you are going to be positioned in center because left and right together means center so well with the current approach you won't get that like if you set a constraint on the right it will all be all your element would be only on the right but but we figured that you know this flexibility is worth is worth it uh so it's it might be you know slightly less beginner friendly um in in but will actually also make things a lot clearer when you get at a more advanced level so we'll anyway we will keep those two approaches but that that goes into the the the approach we have with the system where we want to build something that is uh you know great for beginners but we also want the system to scale uh with you know as as as well as your knowledge of the system increase you know so that you don't feel limited when you actually get a more advanced user another thing that um we we want to introduce in 2.1 uh is making layout width and layer tight optional because in some situations specifically with the helpers object like guidelines or barriers you know they don't have an intrinsic size that you really have to specify so you end up having to have the artwork light specified for no good reason so that's another example where we'll try to make the xml and the specification a little a little cleaner and there's a couple more stuff like that with that we are we're thinking of like for example with deriving the transition so that you can you know the same way that you can derive constraint set right now say that the constraint said is essentially uh you know another conference set with only a few modifications we would like to do that with transitions as well and possibly explore like more ways of you know organizing your work with includes and etc next so one of the the big new areas in 2.1 that we're introducing here is is much better support for rotation essentially uh and when you think of rotation think of watch faces things think of uh sort of calendar pickers that rotate um all that kind of stuff but for this this sequence we will show a set of examples associated with um just the sun and moon and earth uh to kind of give you an idea so from from um 1.1 um we we support constraints which are and polar coordinates you specify circle radius circle angle and you relate one object to the other so in this case you could say the earth is at 45 degrees from the sun and 80 dips away and the moon is is now now that's a really nice way of specifying certain kinds of behaviors and certain kinds of positions especially when you're thinking about like a watch um but but there's been a problem in that if you want to animate that stuff um the the animations would want to do a linear put positioning of everything so they'll interpolate them as straight lines because that's what the basic motion layouts approach is and what you want to be able to do is actually say no i want that to occur in polar coordinates so what you have to do is define a constraint where you say animate relative to and now the animations actually um mapped to a polar coordinate type system where it's actually rotating in a way that makes much more sense in this particular context um and in fact it's actually aware of your circle angle and so you could specify a circle angle of 360 which in the in the normal interpolation does nothing because it essentially doesn't move but in this case it realizes oh you want to uh orbit and you see it's actually producing a very clean orbit around a moving object

and that could be taken you know you can rotate around the you can have many many angles you can have angles large numbers and it all works now one of the things that's cool about that is you can actually define key positions and key positions in fact occur in polar coordinates so in this particular case i have shifted the the x to make it mean sorry the y which is the angular change to make most of the motion occur in the first half of the animation or you know most of the time spent in the first quarter of the animation sorry

the and in fact we can um we can move in in arbitrarily complex motion so in this particular case we see a rotation where the rocket is moving around in a circle and then it leaves all of it and it goes into the um goes to the moon and now this is an extremely complicated animation if someone said oh build this it would be like insanely complicated but actually with just a single key position placed in the right in the right location and you can sort of see it there as a little diamond we can [ __ ] the motions and actually produce quite a a simple animation this is all by the way in 2.1 other rotational support we're going to be generating is actually supporting uh touch handling in rotational coordinates and also being able to to say set the pivot point of your transform now which is sort of separate because pivot points affect your your transform layer which not your layout layer but it can be very useful for producing some quick and easy effects like this in this case here i say i want to make me swipe a dragging of clockwise direction and i want to have it rotate about the center of the earth in this case the idea was earth and i i say um

transform the pivot so this would normally be done with a pivot x and a pivot y and you'll have to calculate where it is that you want the pivot point to be and it's actually in the coordinate space of the the view itself so it's a lot of different things you'd have to figure out this it'll just say oh i want to pivot about this point and it handles it we also have a few other kind of miscellaneous things that are coming in um and and i'll just show you uh one of them here

this is where you can quantize the motion so think of again a watch where things are ticking and in fact you can actually use interpolators to interpolate the motion within that quantized section so in this case i'm using a bounce interpolator on the on the yellow plane and and it's a it's no interpolator on the um the red plane

so there's a couple of other things yes that that we are thinking of for 2.1 one is animated text you know when you try to animate text right now in motion layout with textview uh you you may have encountered like some issues and a lot of that is kind of you know due to the way textview works so we're thinking about introducing a much simpler animatable text with jets it's not going to be like a widget you would use you know to the extent you would use text view for long text and paragraph and stuff like that but if what you want to do is animating like a title or something like that which is like the majority of cases then we can provide like um you know a helper object that does that you know in a better way next so the other thing that uh we have in a 2.1 is another helper object called the carousel so if you don't know what the cursor is that's an example so it's a bit like it looks a bit like a recircular view essentially but the big difference is that because it's within uh confrontation motion layout you can easily transform and and do like interesting transitions with it very easily so next so the general approach is very simple imagine that you got like those three views you know in different colors next and you want to scroll this is essentially the motion that you see on screen and the wall trick next is yeah is that we we essentially move things around uh so that we still reuse those same views but by simply moving them around correctly and updating them with the right stuff then it will look like we have an infinite list it's actually exactly the same trick as recyclerview does but we do that here within within a constructor and motion layout and you can do that simply by specifying the different states and and just manipulating them so while you can do that manually today and a lot of people do we we simply will provide the helper object so in that once you set up your different object that you want to use in a carousel you just have to add the carousel helper specify the transition for forward and backward possibly an initial state or the main central view that you want you know to move to pivot around essentially uh as well as as well as the views that you are using in your carousel so why and essentially then that carousel objects will do the job to call you back so that you can feel the element a little bit like the recycle of your callback so why going through all the way instead of using recyclerview well the main advantage is as you are in motion layouts you can actually edit all of those things directly in studio so i'll show you here and play the i can select different states so here i have like a start state a previous and next state and you can see that if i go on the forward transition i can show you how it actually changes like that and i can just scrub it see how it behaves same thing for the backward transition you'll see that this is how it will work notice here that i don't actually specify anything uh in terms of the if there is no element uh at the beginning or whatever and that's the carousel object will actually automatically hide those elements for you and you can see here with just selecting the play button that gives you already an idea of what it looks like what's really nice though is because you have the motion editor or you can go and modify something like here just a rotation see it immediately live in studio and see what it looks like uh in uh you know without you know you know without having to even push it on device so you have a much faster iteration speed and also a much easier way to do really interesting carousel animation so the goal here is not to do to replace recyclerview um if you have a really long list of items with like thousands and thousands of items recyclable is optimized to do that so that's really what you should do but if you want to really fancy career side effect with you know things rotating scaling or whatever your designer wants to do then your carousel is going to be a nice pattern in your toolbox let's recap a little bit

on the oh and beyond 2.1 yes i need to cover that very quickly because we are running out of time next so obviously the big question is about compose what are we going to do for compose well you know one thing to keep in mind for both construct layout and motion layout is that what we are trying to provide here is a is a is a set of concepts that you can use in your uh you know you know in your day-to-day programming life right like the concept to lay out your elements concept to specify the motion declaratively and we are bringing all of that to compose as well so in fact you can already use constraint layout in compose and we are in the process of actually bringing motion layout in compose this this is what i hinted earlier about the core library and etc uh so you'll be able to use the same concept in compose in some situations uh you know you might also want to use what compose directly provides in the simpler cases but essentially for the more complex cases construct layout and motion layout and the tooling will be there to help you so here's a quick example on how it looks like right now in compose you can set up a constraint set with your list of constraints and pass it to a constraint layout so that's one way of specifying the constraints next and you can see you can also declare the constraint set inline as a parameter but the nice thing is that you can declare a constraint set as a separate variable so it's kind of up to you we have also a different way of writing those those constraint and that's completely in line so essentially here we synthesize the constraint set on the flight so it looks a little more like what you would have done in xml um the disadvantage that it's then you cannot swap constraint sets depending of what you want to do so we're still working on it still iterating on it and you know feedback very welcome on compose obviously so a quick recap on everything next

so basically construct layouts we're trying to build up some something from a simple model but with poor powerful behaviors that you can reuse

we have this design tools integration in android studio which is pretty important so that you have all those tools to help you create your layouts

you can use linear layout that's fine you know we are not going to shout at you um also if you want interesting group behaviors with uh wrap content and you know with automatic wrap for your elements flow is is really handy and for motion yet john motion layout it essentially is about making uh animations easy um it really actually is very very powerful at making build stuff that is quite simple and very easy to maintain and manage and support in the long term with good separation between the animation and the ui elements it's really good at making the um modifying the animations um and it's it's really about making animations sustainable you can actually see a lot of cases where animations have to get abandoned because it's it's too difficult to migrate the animation to the next version with lots of with a small change in the ui now someone has to recalculate a whole bunch of animation effects you'll find it actually very easy to do that here

all right finally here's a quick slide with some documents and some links so take a peek and um next thing i would say give us feedback we have the issue tracker uh we'll probably move to the github rc tracker uh in the course of 2.1 but for now don't hesitate to file bugs or feature requests on the google issue tracker and that concludes our talk um thank you very much you can find us on twitter and that's actually one of the best places to to reach out to us and we're always active on twitter in terms of yeah communicating okay yeah don't hesitate thanks