Duration 38:28
16+
Play
Video

What's new with ConstraintLayout and Android Studio design tools

Vadim Caen
Software Engineer at Google
+ 3 speakers
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 10, 2018, Mountain View, USA
2018 Google I/O
Video
What's new with ConstraintLayout and Android Studio design tools
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
58.4 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Vadim Caen
Software Engineer at Google
John Hoford
Android Developer at Google
Diego Perez
Software Engineer at Google
Nicolas Roard
Staff Software Engineer at Google

Vadim is a software engineer working on the Android Studio Design Tools in London. He previously was a daily user of Android Studio and was tired of having to rely on XML to edit his layouts. Since then, he thinks about the new features that will make developers super-productive when editing layouts.

View the profile

John is a developer on Android. He has worked on Android Studio, AndroidStudio, ConstraintLayout, RenderScript, Vector Drawables, computed shadows and photo editor filters. Prior to joining Google, John was a principal engineer at GE Healthcare working on image processing applications frameworks

View the profile

Diego is a software engineer on the Android Studio team at Google, based in London, working on design tools. He's passionate about Android and developer experience, with more than 10 years experience in mobile development.

View the profile

Nicolas is the technical lead for the Android Studio Design Tools and the ConstraintLayout library. Previously, he worked on Robots at Google, the Android photo editor, and the Android browser.

View the profile

About the talk

This session will cover the new features in ConstraintLayout 2.0, as well as the latest functionality added in Android Studio design tools, highlighting how to effectively take advantage of them for designing, prototyping, and building a graphical user interface application.

Share

It's all good afternoon, everyone and Nicholas and the secret for Android studio design tools and the conference the library and that's what we talked about today. So you might have noticed we released a really cool navigation 82. Are we are not going to talk about that today? It's on YouTube. It's really cool. So. We're going to talk about the work. We've been walking on the entire team dispatcher the improvements we made specifically will focus on Sample data, which is something really cool with shifting 3.2 and will also talk about controversial 2.2 and what's coming up with this libraries

for first for the sectional drain tube for them to thank you. So to stop Waze we going to talk about today to eat or must-haves you are probably quite so I took the tools that enable you to be more productive, so What is nice with Lego Digital is that it's also works with your custom wheels. So if your card you have a good time, it will run there in Vallejo. And the nice thing is that any Customs you from your project will appear in the toilet. So I'll go to is really to make you more productive.

So we've added some nice pictures and share to do so. The first one I want to talk about is the convention. So it's your right click on a view you will see the conversion option that will make this puppet appear and you will be able to select one of their prayers that components or you can use the yeti text just to pick any you from your project. This view is contextual. So it's your right click on The View which is not have your group. We will show some preset of laundry group use.

The next thing I want to talk about is an education between include layout and their parents. So is it coconut tree or in the preview? If you double-click it will jumper to magically to the children and you click on the Arrow at the top of the tree back to the apartment layouts. Realtor is really prefer. It was completely out and close is a great the great because it's very powerful but it's very very buzzed. Right? So you might not want to write all your eggs in it

by hand. Do what you should do instead is take advantage of all the menus we have in the Rio theater to generate XML for you. Door again, right click on if you and then you can align any of the top option to choose your channels and we have many of them self to check them after the station and release connection more productive. But most of you are probably as per plate in your aorta a trench and you have data from the internet and you want to replace them. So they took his health issue. They're going to come here and talk about

it to send later. So now you actually use to give additional information to the studio and you are probably familiar with many of them. We're not going to talk about all of them have to be clear on this. So you probably have seen this in your strings file. You get a lead warning saying that you haven't translated a particular strain. You tell me what you want to do is to fix this hour you translated that that where he's gone, but you don't want to translate actually be the strength you could be that

is the name of the application and you don't want to translate it in every single language only in certain languages. You can do here until under Studio. I don't want to I don't want you to tell me about it because it's fine. So that is one example. Start many hours. Do you want to talk about now is actually design timer is this is a subset of the tools that I talked about giving additional information on contacts to the layout editor example of what we have is we created our toolbar where to get the layout on its own. So we use control the yard we created it and

this is how it would look in the layout editor. So what you can say is the toolbar without any contacts so you can see that I am but you don't know how it's going to look at random your application. So there is something that we can do. You can again tell that a El Torito layout is going to be included in this other layer that I'm thinking. He also using this tool showing we are letting the layout editor know that we want to embed this Heather into the main layout and that way we can stay in contact. So now when we have everything we know if the colors match

mechanically tweak our design and see how ever change impact layout The best thing is I got you can do it. You can ride there. You don't have to save with a blank space or anything like that. So let's see another interesting use of the signs a message when you have a text with you. This is usually what you get so you have had a world and that's it. But you can tell to the layout editor that you know that this texting you is going to look at slightly different. Brandt I do that. But again using the tools namespace Sunday scaries, what

we are doing is we're replacing both the text and the text color and this is going to look different and we're about to see how this is very useful. Let's go with a slightly more complicated exam. When you have a recyclerview This Is What You Get by before you text us face, you can see how they'll recycle if he's going to be laid out, but he's not very useful. He doesn't help you to actually, would I go to sign for it? If you have a list of elements with a lot of empty space so we can use the tools attribute to basically let the

player character know this is going to you so you have probably seen already least I did many times very simple outside. How is this going to look with five elements? All he thinks you usually cannot do them in the way of The Detour because these are things that happen at the wrong time. So usually the source of information for a recyclerview is an adapter so that might depend on network on database on many things that we don't have available at the same time doing this you give us contact and then they are correctly

similar to what you have at one time. So let's not go into sample sample data is is a features of introducing 3.0 and what it does is it helps you to actually populate data that is not available at the same time. What we are doing is telling the layout editor that I want to use the tenth property and I want to get the data from this data source, which we call at sample is LACMA. Carlos is simply a file in file. So what happens in the at the same time

is a different color for every item. So, let's see how you prayed up. File you go to your project new sample data directory and that is how we create at the directory where we're going to put every day. In our case, we want to grab material. So new file and then we name it material Under start on the store colors. We just food that is of course. And that's it. It's that simple now you can use it in any property in this guy's tent. So this is one of the types of data sources that you can use in a sample data. So it's basically a list of colors. You can't have list of any kind that

you want like regular text and you just replaced even your text me more interesting now, you can have Dimensions. So if you have they mentioned using that to such. You can tell that I want to use this by mention and I want it to be different for every item and you can do that using sample data. We also have other types of data sources you can have images you creating a very similar way. What you do is you create instead of a file you create a directory and then you drop all your images in recyclerview will get a different image for every item. So it's very simple.

I'm jealous. I want to tell you about this Jason files. So Jason files is a similar way to the list that we had before but it allows you to do something that you can do with this. You can have all your data together in one place. You cannot maybe contacts about why a particular item is like that or you can even get a sample from your dad a GI and put it into the sample data we have is a list of notes. So why you can see if we have a title and we have an hour for the way that you use this in a sample data is you can

reference any of those lifts elements. Let's see. How did the dad die in this case when we are coming to the alternator is I want you to replace text at the same time and I want you to do it with example as last the name of the Jason Pfeil and then they know that we saw before. So in this game we are doing it with title. And also remember that this will change depending on the name of the Jason Fowler. It doesn't even need to be called. If you don't want to provide your own data sources Android Studio will also provide it already comes with a set of predefined ones. So you don't have to

create your own will give you a set of them. We give you names we give you laudanum some obviously and we also give you a set of images. For example, you can use avatars and you don't even need to create a message. You can just use the one that we give you a nickname how to use that is very similar. The only difference that you can see here is we had tools as the name is face of the data source instead of being at sunbow now, it's a two sample. So use in sentence completion you can say like all the different data sources that we have. Volume three to we are the

new features in order to help you to use this. So everything that we saw was already. I need three to we are adding a few things that are things going to tell you about to have you using sample data. Sample data is a great true. But we love truth. And so we decided to put you on top of it. So what does it look like? I'm sure most of you already did that. So you have a knee made you you're taking it from the pallet and the resource teacher with puppet. And since you just started your project you have only reason I'm sure I can available

so you're is it and it doesn't look really great. So what you can do it's time now. In the resource because you have the sample data category and you can pick any results data from your project or if you find one. Sono our image with better and we can see everything of it in our recyclerview. But what did you want to make some change to this simple data? What if I just want one single email from myself so we can choose a new designs on helper that you can excess by tricky the wrench icon right below the image of you. So here

I'm going to uncheck if you have a fit and this will give me the ability to select only one image from my set and I can try it out with any emails from this day. But no, let's say that you would you want to give it another look and we want to pick images from another day. That so we can just use the button and to let you know that I said, I wish I could you as a friend you look so it's very nice surprise you what it would look like with different kind of images. So you can always jump back to the resource teacher and as a full set of resources available by kicking the brass

button on the bottom of the pop-up are available. I don't want my son Auto design. We have the same design design for text you so here for example and just a different set for each of you for each text you and as you can see on the recycle of you each item is taking one instance of its own set for each each item, right. And finally, we've also added this picture for recyclerview provide for you and traded so you can just jump back to the credit file and freezer your changes and all the designs and attributes are automatically populated.

But the reality is even more powerful if you use it with constraintlayout, so We are we really so fat lyrics official last year. So if you don't know about it, it's a library that allows you to easily create user interfaces and we try to encourage you to use flat High a key switch is coming very handy for animations. It's a super compatible essentially everywhere it small Android phone control on when you swim with stitches vaginal not it comes with a great ride is there that we having a great Studio? And essentially you please try to use it. It's it's something

we're walking rehab hung to make your life easier. So we really call Santa. 1.2 last year with a bunch of cavities. We need you can set up your you I buy New York rating relations between there's a lot of communities here. Where did you finish your next answer excetera excetera and there is some help are object like guidelines to help you set up your screen of it. So it's already very full set of features but a month ago. Is she at one point one which I did a lot of bug fixes improvements

new ways of expressing your layout and I'm just beIN Twilight one that you actually see on the slide the barrier which allows you to position and elements related to a set of animals. So whatever the position and the dimension of the sediment that data limit on the right is going to positioned correctly. 1.1 we have A really flexible layout something that should essentially let you express any UI. And you can just add it to your project by using normal in a gradual dependency. We are now shipping on

mavensoft to be very easy for you to use it in. Your boots are very Tetra. But I think a lot of you here in this room to hear me talk about so wake up at 4 to print 011 is a great base. As I said, it gives a damn thing of flexibility that you need to create your UI and it comes with a uid. And one of the concepts that introduced in act one was the concept of helper or jet object that even though you can manipulate them into the you I'd be there in the yard Georgia. Did you not

appear on your screen when you run your application but it's actually they help you create your wife to one of them is the guideline object, you know, if a designer typically, you know, it was 50 fire you I leave Resort that lines a picture of where you can simply replicate doors in in your UI. So it's a lot easier for you to set up your screen Simi Valley 1.1. We have the buyer. I just talked about and what's nice Windows 10 Pro subject is that we do have some support for them in DUI Builder. So you can simply manipulate them and add elements to those

helper eject into component Tree by dragging in a mouse into them. Something you might not realize if that does help our subject. I'm not Jew groups. They only keep a reference to the Views. So we still keep the entire view tree very slots. But because I'm just restaurant says we can have one object being referenced in multiple helpers. And that's something to be very interesting for us and you can think about the helpers way of getting a fair reference to bunch of years. You can still get a flat tire.

And the way we think about you is that a helper gives you a way of amino. In 2.0. We're going to expose those helpers as the conference. I drop class. So you'll be able to create your own and pearls and if you have your own personal project seeming of what we have with Kristen Hughes, they will be present in Android Studio. So you'll be able to manipulate your own objectives. Weed without a fire lighted three broad categories for the helpers in 2.01 categories layout manipulation

that are going to help you create a layout one is in helpers that will apply if something after Lily has been done so Cal Spas layout and finally we have some help because they used or can be used as well that we can use to do some specific run during specific defect. This is one of the concepts that we are really keen on the idea is that the helper is going to set the constraints for you. The simplest example I can think of is a linear helper. You know, what you created a chain in conference. One. Well, let me know you to do exactly the same thing. But you manipulate is a little bit

like being a layout for instance. The only difference is that you have all the features that Shane provide you and the way you use them. It's very easy. It's a normal view you can call itself when the only thing you need to get here is that list of ideas that your referrals we have another job that will launch with a 2.0 gameplay Master Flex box layout in antiques. So the subject all pretty useful but the same time I think no protected. But when were they looking those heifers We cannot put

additional yusuke. So what example of a bus the object is a flying object letter that you want to see objects on Thursday at to fly in. Well, you could simply restaurants this subject with the flying Daiquiri and that's all so no code. It's purely declarative. You just add that to your item inside restaurants that object and it will animate on first launch. Revenues are objects. That's very powerful and layers. I lose you. It's actually a lot of things. It's it can be kind of you to

set up reviews and apply operation to them. So there's a bunch of operation that you can apply and we will do the math behind the scene to apply them correctly. You can also set it up so that the text by default the bounce of the views that restaurant is and you can use it to set up a background very easily and that way we were exposed is you could use the layer a little bit like you would use layers in graphical photo editors to 12 and when you are okay

with those elements core strength, you could look that layer and be sure to nuts inadvertently modified them to the very powerful helper. Here's a quick example on how it would look like by drawing a background around a bunch of buttons being restaurants, and we need to set up the contract manager if I can get it around the subject with wheel background and just to prove you that we have till we were flat do tree. We can apply this operation that I'm talking about and everything will just full of but the background which they were it is but it's just it's just

to show you the potential of the subjects. Amazon use of useful decorate or is this a few derivative and it actually does what it says and its effect that you've been with material design. How do you spell press the button that's better? The interesting thing here is that you notice that it only applies to DNA match with around so we have the role of buttons. That's why I'm not rich around and smooth. ER reviews did not apply to them and if you played with secretary Villa, you see that it's actually a bit tricky to do that.

Everything came here as well is that we are not scraping or Alonzo. Kanarraville. We are just using the normal cycle. Revere. But eventually we package it in a way that makes it a lot easier for you to play with and using your layers. So on that same idea we have decorate dolls that are helpers that are here to draw things and some things we return of juice and you can draw something with it. So that's what type of fish that you can get with that. So, let me show you.

So you may want an effect like that. Now what kind of lava lamp effect in adults blows moving around and what you see is that the results of that effect will depend on the position of those blobs. But the final run during after taking account all of them. And that would normally be a very difficult if it to achieve so the way to walk to drivers that you can think about it. That way you have it comes out right like what you think on. You don't actually see some images that are essentially sitting on top of that. And

so you think you can apply do usual change. Let me put down background to be tossed around and then we use a decorator to do the background and you can easily get an effect like that no friends. That's a little slower. There you go. So and just to show you the balance are correct. We still have our images. I know the type of the creator that you can use in your project is the I button panel decorator. So happy that you are a video that got that you you

may have created by using the chair very easy. What do you like to set a background on those subjects and maybe change that caused so you can simply apply this before I talk with her on Saturday and we'll do the rest of the world and because well we can do a little more interesting stuff here. You know, I can show you what you look like when you click on those buttons. So just to give you a an idea of the type of effects you can get with decorators. Some clicking on

this my menu comes in. I can press that some of them when you comes in a press it and there's a sucker. Review. It's a very silly you are but it just to give you an idea of what you can do. What is very interesting here is that if you look at it in studio and you know it by zoom on the complementary you notice that actress, you know, we must have just used and just a bunch of helpers here. So I think it's legal to set as a programmer to try to really separate,

you know, the field with you know, the actual data and write you out behavior on your application. How to summarize your helpers, you know, you can't actually use with those essentially you cannot capture the country is the behavior and it's all declarative. Listen to briefly about the of management. So you've been probably playing with conference set on on the contract. 1.1 which is way of anything and I have to take our new yacht and if you switch between two of the States

you can animate them. So that's very nice. But you know, those things is a little conductor. You have to create your own a yacht. I know not to stay off manually, excetra touring 2.0 will have a separate the canalside that let you specify State because it's actually that's what they are. Mrs. Toyota RAV4 presentation represent different state and you can also say that pleased with this track layouts. So the way you would use them is simply by putting set your description and we'll do the rest of the job you can dance which state

simply bike riding death date with the state ID and that's it. Thing is that you can specify a region on when a specific constraints a conference at is going to be applied and by plugging that into on configuration changed and I'm trying that on a crumb on the Chromebook you'll see that depending on the size of the window will switch layouts. That's a very it's a very easy way for you to have different Behavior Foley house. If you want to return more fancy fancy, you can on the Prairie or change plug a transition manager and then we will animate the layout

foundation. So I think we've devices are Chromebooks that type of Jesus case. That's all going to be more and more useful. and management so too quickly recap on kuhf NPR to so far. We have the help. We have those yesterday layouts and decorators. We have the resale ITI we are so I haven't talked about I could new fiance Pi for manipulating the constraints directly. And we have motion layouts and to talk about motion day out and really happy to report this run.

Thanks. Now, I'm really excited to show you guys emotionally out. It's a brand new layout. We're introducing with constraintlayout 2.2. So let's get into it. It starts off with a subclass of constraint layout called motion layout. It's Alia has all the properties of constraintlayout. But the whole trick with animating between two constraints sets that will be done for you by motion layout. So if you have two constraints that it will switch between them and animate between them. By itself,

but you notice because it's a constraint layout you can actually use the helpers that were showing there. But it also provides you with the ability to edit the custom attributes of the system. So, you know, what is the blue light there? It's changing because it's a custom attribute in the system. So constrained sets now can handle custom attributes allows you to eat anything. One of the other things that it does is it allows you to control on touch directly. So it'll

manage your touch events by tracking your velocity of your finger and matching it to the velocity of used in the system and naturally give you a smooth transition between them by a touch. We also support help us because it's just a constraint layout so they help us Nicholas just showed their they are too and they can they can work together and apart. Now, let's change the transition of little bit. We want to move the eye into the middle of the screen. But if we look closely there's a bit of a

problem here. You see the clashes with the eye. We love to fix that and the way we do that is a feature we call keyframes essentially if we have a beginning and an end of a path we can distort the past by adding a keyframe. And once we add the key frame. It'll avoid the path. pretty cool So now we have emotion seen it has constraints sets. It has on touch keyframes custom attributes. With a little flag on your device. You can see the path of all the objects of setting it so you can understand what all your views are

doing on device. So one of the nice things that we've supporting it is nesting of constraint sets of motion layouts. So in this particular example, we have 2 views being animated by a food view, they're both constraint motion layout and they are both being driven by a food motion layout. The top view is just doing a fade to black but you'll notice something else in that view. This is a animated view that was custom written by Nicholas that is being driven by motion layout because it's implements on on progress message.

So you can drive your own custom animations directly from motion layout. So what I think that's really good at is synchronizing motion. It's it's anything that's very complex sequences of many things moving on the screen. It'll handle it handle also like you to interact with it with attached. So we added one more thing to the system something we called cycle. This is the ability to build into the keyframes. Oscillatory behaviors. It can vibrate and Shake in various ways. And you might want to okay. So what do we do with these Keys Cycles? So

in this particular example first, let me just unfold them with a staggered effect, but now I can take one and have it rule because it's so late so I can do a different effect that I could have it. So the bounce along the edge I got bored and I just had that one flying around the typical example as you put it like doing it all shake at the end. So now what is it cool things is we build at us. So we're building an editor for that thing recorded the motion at it. It's part of the design surface. But now you'll be able to do those edits directly

in the design process. So can I take you through how you would do that in the design surface? Best based on constraintlayout you just create your constraints for your first country and set switch to this second edit the constraints for the second constraint set. I didn't want to do that. If you hit play it will show you the animation between those two constraints sets. This is Jack box to enable showing you the path. So now you can see the path. But how would you add a keyframe? Well you just position to Coosa where you wanted you add the type of

keyframe that you want to add. And you can just distort the key for the position by selecting the key frame and moving it around on the screen. And let's just do that one more time so you can see it. Just so I can put a position any position create a keyframe. And then we just move it. So here's much more complex emotions. They're all being animated. This one has quite a few keyframes in it just designed to allow you to set transparency on some things change the size of other things move them around, but it all works in the IDE.

Thank you. So we're not seeing you. You probably are eager to try and all those things. So a lot of that is actually three-point to all the sympathy that we showed you all the current integration with confetti of 1.1 go do not reprint. You try it out. Is the Cannery 14 Tuesday? So please give it a try to the library with Michonne. They are. We are thinking about trading it in a few days. I'll put it in motion editor. It's an ongoing work, but we are really excited about it. So I

think about it as well for the coronavirus eyes at Ikea we showed you. We also want to hear from you in general. We are easily in a Richard all the four of us. But what is pasteurization they're sick back. You can the field. We also going to have I know he thought were this afternoon after the session, so, please come see us and thank you very much.

Cackle comments for the website

Buy this talk

Access to the talk “What's new with ConstraintLayout and Android Studio design tools”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “Software development”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
159
app store, apps, development, google play, mobile, soft

Similar talks

Dave Burke
Software Engineer at Google
+ 6 speakers
Romain Guy
Senior Staff Software Engineer at Google
+ 6 speakers
Chet Haase
Leads the Android Toolkit team at Google
+ 6 speakers
Dianne Hackborn
Product Manager at Google
+ 6 speakers
Aurash Mahbod
Director of Engineering at Google
+ 6 speakers
Tor Norbye
Tech lead for Android Studio at Google
+ 6 speakers
Stephanie Saad
Software Engineer at Google
+ 6 speakers
Available
In cart
Free
Free
Free
Free
Free
Free
Reto Meier
Developer Advocate at Google
Available
In cart
Free
Free
Free
Free
Free
Free
Yigit Boyar
Software Engineer at Google
+ 1 speaker
Chris Craik
Software Engineer at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “What's new with ConstraintLayout and Android Studio design tools”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
558 conferences
22059 speakers
8190 hours of content