CHAINS AND GUIDELINES - Android Fundamentals

[Music] hey guys welcome back to a new video this is the second part of the constraint layer tutorial in this video I will show you more cool stuff you can do with constraint layout and at the end of this video you will be able to make this layout with a single constraint layout one cool feature of constraint layout that you will need very often our chains we need change whenever we want to distribute several reviews next to each other so that each view will have the same width or height and when I actually show you it will get more clear what I mean so let's drag three buttons into our layout here one two and three and what I want to do now is I want to align all those buttons in one row so that each button will have the same width first of all I want to Center them vertically up so I'll select all you can drag your mouse over them and then click on that bars on the top here and then click on vertically or vertically in parent this way all buttons are centered now vertically and what we can now do is we can right-click on those selected buttons so make sure you have each of those selected right-click and then hold on chains and click on create horizontal chain this way all those buttons are pulled together and now they are evenly distributed and if we now want those buttons to fill the whole width then we have to select each button and set the layout width to 0dp oops and as you can see if I just set the width to 0dp for this first button then only this button will expand and those other two buttons will still be evenly distributed but let's show you to also set the width to 0 DB further for the other two buttons and as you can see all those buttons are evenly distributed and you need that very often that you want to put several views into a row or into a column and then just distribute them evenly and of course we can also create a vertical chain to distribute them vertically so I'll remove all those buttons and drag three three new buttons into that select them all go through those two bars again and now Center them horizontally right click onto those buttons make sure they are selected hold down on two chains and now we want to create a vertical chain this way they are evenly distributed in vertical now and if you do this then make sure the layout height is not set to zero DP because that would look very ugly if we would just try it out here at 0 DP then as you can see no button will really look like that so just leave it at ref content or set them to a fixed amount of DP also if you would like to have those two outer buttons more in the top or in the bottom then you can select all those buttons and click onto that little icon up here and then click on distribute vertically this will move the outer buttons more to the outside and you can actually do this several times so if we click this again distribute vertically then it will move them even far away and this time they are out of our screen so I will revert that change another cool feature of constraint layout is baseline alignment and to show you that I will remove all those three buttons again and drag in two other buttons and I will make that right button a little bit higher than the left button so I will set the layout height to let's say 100 DB so that this button is higher than this button and constraint layout now allows us to constrain the baseline of that rights button text to the baseline of the left button text so if we right click onto one of those buttons then we can click on show baseline and then you can see that little constraint line under that button text and we can drag an error from that baseline like we can do it with constraints and drag that baseline to the baseline of the left button and that will mean that the baseline is actually constraint to the left space line so that the texts are actually at one level in vertical so this can be very helpful if you want to have several texts on the same height finally I want to show you guidelines which are also a feature of constraint layout a guide line is basically an invisible border you can constrain views to and you can offset the guideline to a specific DP amount or a specific percentage so if we right click into our layout then we can go to a helpers and add for example a vertical guideline here let's click onto that and you can see that line appeared here and we can click on that arrow in the top here and change the direction of that guideline so currently that guideline is always 375 DP away from the right and we can drag it to the right to decrease that amount and if we click another time on to that arrow then you can see that this guideline is actually currently at 49 percent of our screens with and we could drag it to 50 percent and what we can do now is we can take our views and constrain them to the guideline so in this case the right this right button will always be constrained to exactly 50% of our screen and we could also do this for the other button I will constrain this just to the parent so they don't overlap each other and when your app runs this line basically becomes invisible so you can only see it inside of this layout editor and if we drag it to the right then we can set in your percentage let's say 80% so this button will always be constraint to 80% of the screen width and of course we can also add horizontal guidelines just click on that layout help us at horizontal guideline and then you have another guideline here and we can click on that arrow two times change that to percentage mode and then we can drag it for example to 60% and constrain our button to that horizontal guideline but currently we can't do that because the baselines are already constrained to that baseline so I will go inside of that attributes tab here and remove the baseline of the right button the constraint for the baseline and now we can set the constraints again just drag this constraint to the guideline and that are now all the features I wanted to show you in this video what I want to do now is like I said in the beginning I want to create this layout with you together to show you how to actually make a real layout with constraint layout so let's remove all views inside of our constraint layout and first we want to drag in all those edit texts so for that we go in that text tab here and drag in a plain text that is just the same as an edit text drag this in and this is the text field for the first name so this will stick to the top left corner so I will drag the left constraint to the parent left and the top to the parent top then I will drag another plaintext into that and drag the top constraint to the parent top and the right through the parent right and now you can see that they overlap each other and in this case we need to create a horizontal chain here so let's select those to edit text right click chains and create horizontal chain and that doesn't look like we want to have it and because of that we need to set the layout width and only delivered with two 0dp for each of those edit text so click on one of them go to layout width and set it to zero DP and also do the same for the second one and that looks like we want to have it next comes that birthday text field so let's drag in another plain text constrain that chopped constraint here to the bottom of one of those two text fields and the left constraint to the parent and the right constraint to the parent and finally we have to set the layout width for that you either 0 DP or match parent I will set it to match parent here and finally we want to insert that last text field for the country and that apply button so let's drag in another plain text constrain the left to the parent left the top to the bottom of this text field then we go to common here drag in a button constrain this to the bottom of that large text field and the right to the parent right and now we need to create a horizontal chain again so let's select those two views here the edit text and the button right-click chains create horizontal chain and now we have to set that they are truth to 0dp again for both of these views and as you can see that is exactly the layout we created here well here we have also hints for those edit text if we want to do that then we can just click on those edit text and edit those hints we can click on that search icon up here and type in hint click into that text field for that hint and just type in first-name and now that isn't working because our real text of that edit text is currently set to name so the hint is not showing to change that you can see the text attribute here which is set to name so just remove that and then you are able to see that hint and you can just try to make that for the other text fields and also the button text and I just recommend you to just try around a little bit with constraint layout and create some layouts that you want to build and yeah that's basically it for this video I hope this was helpful for you if so please leave a like and comment below and also if you have any questions then don't mind asking me in the comments so I can answer your questions and I hope I see you on the next video have a good day bye bye

Channel: Philipp Lackner

Views: 11,915

Rating: 4.9920158 out of 5

Keywords: kotlin, constraint layout, android, android studio, layout, chains, guidelines, basics, beginner, fundamentals, coding, programming, tutorial, learning

Id: PqkWT92BT3U

Length: 12min 29sec (749 seconds)

Published: Wed Feb 05 2020