 have already been talking about views and layouts from long so on a similar ground I'll be talking about building interfaces with constraints layouts so earlier this year Google launched this new layout called constraints layout how many of you have already worked with constraints layout pretty less and have you heard about it okay so I think it's going to be helpful to see before we begin I will just give a brief introduction about myself my name is Neha I have five years of experience into Android application development my interest domains are payments ecom and travel and my core skill set is user interface development what are the pain points that we face while building user interfaces great design often leads to complex layouts the normal app development cycle is you build a initial user interface and then you it goes through iterations and then a final user interface is shipped but in this what happens is a lot of view groups and layout come up so the architecture becomes very complicated though the design design is achieved but it is at the cost of performance as nesting happens so we have a chat window on the screen which is the most common view we all see every day so how do we build up one way of doing that would be we create a vertical layout or with a recycle of you and each chat bubble is a horizontal layout which can again have a relative layout in order to place the views so in this particular case the blue double tick has a layout depth of three or it can be four depends on the use case or the approach we take how can we solve it we can reduce it by using constraints out what is constraints out but it is a new layout introduced earlier it works by a simple philosophy of assigning constraints with respect to views and parents so with respect to the sibling views and parents you can assign constraints and create views you can provide anchors to other views and this makes the designing really simple the core intention of having constraints layout is to flatten the view hierarchy and reduce the layout depth let's see the difference on the left is the view that we saw earlier it is the same it is a similar view with a vertical layout with a recycler view and the chat bubble again which was horizontal view has been converted to a constraint layout so the view in the left is the old approach which we can make using the relative and linear layout and the right one shows the constraint layout the red lines are the constraints that we apply to the view so in the one on the right we can easily see the blue tick as a layout depth of four so of two so from three or four layout depth by using constraints out we reduce the layout depth to two many of us might think it off as relative layout but it is very similar to relative layout we can call it relative layout with superpower as it has more powerful tools and it gives us more flexible control it is a new class also if how many of you have used percent relative layout earlier so like percent relative layout which was a subclass of relative layout it is not a subclass it is a brand new class but we won't even need to use percent relative layout if we are using if we are making views using the constraint layout it reduces nested base also if we want to have it in our application it is bundled with SDK we can use the compatibility library so there's no compatibility issues when we use constraint layout and most importantly it is 10% faster than the traditional layouts which we have been using mostly like relative and linear layout especially when we are building larger apps which have multiple screens and multiple view groups it becomes 2x faster it impacts the performance along with the constraints layout there was a new layout editor introduced which is shown here so it has three windows the left pane shows the preview pane which is how the view would exactly appear on the phone the center one is the editor pane where we can apply constraint and the right one is the property pane where we can change the properties of the selected view like sizing and other properties so all the work that we do with respect to constraint is done in the view window which is the editor pane so it gives making layout it makes making layout really simple and gives entirely new experience if you have already updated the Android Studio you must have seen the controls for constraint management we will get into it when we see the example so how do we get started with constraints layout the prerequisite for using constraints layout is we must have an Android Studio at least 2.2 and the support library 32 so 39 support library has been launched but still if we have version 32 constraints layout would work absolutely fine so you can add the dependency in build.gradle and create a new layout just instead of senior layout as the root tag you can put com.support.constraint.constraint layout and the root tag will change to constraints layout you can also convert the existing layout to constraints layout we can see that also an example let's go to studio to see how it works we can just right click on the layout click on new layout resource file and as the root element by default is senior layout if I change it to android.support.constraint.layout I can create a new layout called constraints this is the test layout that I've created and if I want to convert an existing layout to constraints layout even that can be done so this is the layout that I have which was not constrained it is a simple layout made using relative layout if I want to convert this to constraints layout I can right click on the relative layout in the component tree click on convert to constraints layout so this will convert my relative layout to constraints layout and infer constraints as per it it will ask me if I want to flatten the hierarchy you can obviously opt for yes and then change the views accordingly now for using constraints layout there are few things that we need to take care of constraints layout works by using handles so handles are the rules which define the positioning of the view and on the screen as we can see the first one is the resize handles if you want to change the size of the screen we do not need to go to the XML to change it we can just drag it and use the resize handles the second one is the site constraint handles it is helpful when we want to specify the location of the views adjacent to the other views the next one is the baseline constraint handles so the baseline constraint handles prove most helpful if we are we have text views of different sizes and we want to align the baselines together so when we follow any other layout like relative it becomes difficult but with constraints layout you can just link the baseline and align the text views with each other also in order to position the views onto the screen of which we constraint have already been set if we want to manage it along the axis say the x-axis and y-axis we can do that by using horizontal and vertical bias and position the view along the axis we see an example for it in the example there is also something called as view sizing so if in this given image we can see there is an image view so image view can be of any size big size wrap content or auto connect so if you want to if you want your view to work with respect to constraints without specifying the size and you want it to consume the full space as per the constraint we can keep it any size if we have to define a fixed width or fixed dimensions for the view we can go with fixed size as this one is an image view we can opt for a wrap content where we have a so set so we can go with wrap content and the last one is auto connect so for auto connect we have to make sure the auto connect is the controls that we saw in constraint management is turned on let's see an example this is the XML that we created it has the root tag as constraint layout so if I want to add anything to it for example an image view I can drag and paste an image view let's give an icon called icon launcher the blue pane is where we actually apply constraint if I want to resize my image view I can resize it here this is how the resize handle works if I want to apply constraints to this image view how do I do that just like clicking on left I can create a left constraint similarly a right constraint the image view here is wrap content and height is 53 dp so while I was resizing I altered the size of the image view so what if I want to change the sizing so this is the shortcut from where we can alter the sizing if I click on it it becomes a fixed size it is 40 to 48 dp right now I can change it and make hundred by hundred or anything that I need by clicking on it again I make it any size so it will adjust with respect to the constraint applied since it is a top constraint with a margin of 16 which also can be changed from here directly I can click on it and change the margin to say 24 when I click on it again or I can alter it from here so this is how it makes it really easy for us to manage the constraint also we spoke about bias from here you can manage the bias cell this is the vertical bias and from here we can manage horizontal bias so for example we discussed about percentage relative layout if you want to position it such that it is 20 percent from the left this is how we change the bias from here I have altered the horizontal bias and from here I can change the vertical bias so this makes us this makes designing of UI very easy also we discussed about performance so the old style layout which was based out of relative layout and the same design exactly seems looking design which is based in constraint layout so if we run a hierarchy viewer to see the layout depth of the two we can easily see the difference between both the one on the left is the old style layout which was based using relative and linear layout and the one on the right has constraint layout you can see more examples of it and try adapted there are some samples you can download to begin with that's all from my end you can ask if you have any question it is a you don't need to specify percentage or anything it it doesn't take pixel value it adjusts it accordingly and create integer value and apply it so it will take the pixel value no no it will take a integer value of the percentage but you don't need to specify percentage here I didn't quite get what is bias so can you tell me the difference between bias and the constraint so for example if I take example of a linear layout if you are to position a view such that it occupies only the one-third of the screen and the rest of the space remains as it is so first approach would be linear layout with weight but that is an expensive task you can either adapt up for a percentage relative layout where you specify this view component should take a 30% of the screen size but when we use bias we have already created a view and we have given it left and right constraint so it is attached to the left side of the view such that you are shifting it towards the left with a 20% of the screen gap so you are doing something what you can do with the weight or the percentage relative layout but this would cost less in terms of performance it won't impact the performance then we are using larger apps thanks very nice talk I just wanted to know your personal opinion if there are any things about constraint layout that you don't like I just wanted to ask if there are any things and aspects of constraint layout that you don't like I think it is developing really quick since Google I O there has been 10 plus releases so there are most of the features that has been added up earlier it was difficult to use constraints layout with scroll view but with the updated releases it works well so I haven't seen any problem in particular with constraints layout there are some use cases where the quadrature layout can't be like for example layout you can't have the constraint layout as a top-level view and whenever it isn't a top-level view it breaks the editor so have you come across this and you have any solution for it so if you have to ever nest the constraint layout in a card view or a coordinator you a layout sorry it breaks the editor if it's not the top level view in the layout so have you come across this and you have any solution for working with it in that scenario I haven't particularly seen any case where it creates problem with coordinator layout I am yet to explore on that front so here does that convert to constraint layout option in studio work convert to constraint layout option in studio does that work really it didn't work for me that's why I'm not getting your last sentence please you had shown me an option to convert your existing layout to constraint layout so for that the control constraint controls we saw there is an option to infer constraint so it might infer some constraint automatically but at certain place it will make the view look exactly the same but it won't completely remove say the linear layout that you have so that is a tweak that you will have to make and remove your views and adjust according to the constraint layout that you desire so the next thing reducing the nesting part while converting over here something we have to do studio can take care of it intelligently it is a limit rest we have to manage thank you one more question yeah is it ready to go in production right now yeah it is pretty much production ready that it has been why do you use these days so there is no any problem with constraint you can use it in your production yeah so there is one constraint of aspect ratio so this object would have a bit of a one so this so I am not sure about that no question okay thanks me thank you