Constraint Layout Beginner Example

if you've been around Android development for any amount of time you have probably heard of this thing called a constraint layout and there's a number of different types of layouts in Android you got linear layouts relative layouts frame layouts can like I said constraint layouts coordinator layouts all kind of different all kinds of different layouts but this video in particular I'm going to be talking about constraint layout cuz it's one of the actually I think it is the newest one I can't remember exactly when it came out but pretty recently in the last couple of years and it's supposed to solve all kinds of problems which it does in fact solve a lot of problems and I'm going to be showing you kind of a beginner the most basic sort of beginner example showing you a way that you can use constraint layouts to build something called responsive layouts so if you have different screen sizes how can you use constraint layouts how can you leverage constraint layouts to account for the different screen sizes and also rotations you know like if you rotate your screen kind of messed-up stuff kind of happens sometimes so how can you use constraint layouts to improve that look so once again this the point of this video is to kind of get your feet wet get just get an introduction to constraint layouts and one common very common example of how to use them so on the screen here I have an example I got a phone and I have an app running on this phone this is for an app that I'm building this layout and there's some very basic components you got like a toolbar you have some basic textview with a label on top again label it's basic text view a link that takes you to another screen although we're not going to be talking about that just kind of pay attention to what the layout looks like and then a little logo button down here which will actually log me out of the app but it's just kind of for show for this for this video you don't need to know anything about this app just focus on what the layout looks like so a very common problem that people encounter when they build layouts is it looks good now looks fine you know everything's oriented correctly but what happens if this gets run on a smaller device or if I was to rotate the screen so let's take a look here if I rotate the screen you get all kinds of weird stuff happening you get kind of this little squishing you know that these are kind of too close together and this is uh this is a very simple use case like a lot worse things could happen like I'm sure you have apps where you've built layouts and rotated it and it looked destroyed it demolished so this is one very common thing and like I said if you were testing on a large device with a larger screen and then you ran it on a smaller device those kind of things can happen your kind of your layouts can squish or just get weird so how can we how can we use constraint layouts how can we use a constraint layout to improve this and that's what I'm going to be focusing on in this video so let's take a look at the code I'm going to show you what this looks like right away the code what it looks like without using a constraint layout or sorry without using a constraint layout properly and then we're going to take a look at how to use a constraint layout in a very basic way that's going to very easily improve the way that this layout looks so here's the layout in its current state it is a constraint layout but it's not used correctly so right now I have this kind of text input layout that's at the top here with the text view inside of it the constraints on it are all relative to the parent so it's constrained to the top of the parent to the right of the parent to left the parent into the bottom of the parent then it has a vertical bias which places it on the layout where it is so like I could change this to 0.1 zero and it would kind of move it up but point to zero is 20 percent of the width of the height of the layout which places it where it is and then if you scroll down the next one is the same way so it's all constrained to the parent with a vertical bias of 33 so it's just slightly lower down next one is a textview exactly the same all constrained to the parent with a with a slightly lower bias and then the last thing is the same with another lower bias with 95 so this is one way you could use a constraint layout but as you saw in the demo when I showed you you don't probably want to do that because if you rotate the screen or the screen size changes for some reason you can get this kind of weird squishing behavior and this is this is common with other layouts too with relative layouts with linear layouts it might not be the same but you still could get kind of some weird squishing behavior so the focus of this video is to show you how to avoid that weird squishing behavior using a constraint layout also just as kind of an FYI for you as as a resource the section of the Android documentation that talks about constraint layout in the training section so developer.android.com/design talking about constraint layouts in the different ways that you can use them I highly recommend checking this out after this video or before if you want to but I'm gonna be showing you everything you need in this video but definitely afterwards like this is going to be a simple example and if you want to know more this is a really great article they do a really great job of showing you the different things you can do with images it's just it's a really good article I definitely recommend checking that out so now let's let's take a look at how we can fix this layout okay so what is the first thing that we want to do well if we take a look at our layout here imagine this had more inputs in it like imagine there was 10 inputs instead of 2 this layout could be really really big and you might actually have to scroll if you don't have so if you don't have a scroll view as your parent view that would become a problem and especially if you had you know 10 inputs and then you rotated the screen obviously that would become a problem I wouldn't be able to see all the inputs that everything would be cut off so that's kind of the first thing I would say is if if in general you should almost always use a scroll view as your parent so that's I'm going to come up here and I'm going to change this to a scroll view that way if the for some reason it goes bigger than the screen size then you know you're covered and if we're gonna add a scroll view as a parent then we need to add a constraint layout so I'm going to say match parent and match parent for that and I don't know why this has changed recently but when you add a new layout it kind of does this weird spacing thing and if I go to the next line it takes me all the way over there but if I do it again then it lines up I don't know what's going on with that but anyway and actually this is gonna be wrapped content so now take everything that we had before that was inside the original constraint layout so now I have a scroll view which is the parent I have a constraint layout and inside of this I didn't close it off constraint layout and inside I'll actually I think what I did was I just I cut the other side of it so anyway paste that in no I didn't Oh No I need to oh I thought I did thought I did cut it out but I didn't so anyway take everything put it inside the constraint layout and there we go so it should look weird right now but so right now all you have is a scroll view and then inside there you have a constraint layout and you have all that stuff that we had for and if you want the code for this there'll be a link in the description so now what do we what do we want to do well inside of these layouts basically what we want to do is we want to orient them relative to one another with constraints in between so when you started the first one you want to first add the constraints for that so in this case you want to constrain it to the top of the parent yes you want to constrain it to the right of the parent to the left of the parent but then the bottom you want to actually constrain to whatever is going to be below it so in this case it's not going to be the parent it's going to be this layout that sits below it so I have to give this an ID because right now it doesn't have an ID I'm gonna give it a user name layout ID and I also have to give this one an ID so it'll be email layout and now I want to change this constraint so I'm gonna say constraint bottom to the top of the thing that's below it so that's going to be user name layout so the bottom constraint on this layout is constrained to the top of the one that's below it which is this one right here so you can see kind of the arrows here if you click here you can see that's constrained at the top and then it's constrained to the top of the thing that is below it so now let's go down to the next one so this next layout currently you can see from the picture over here it's constrained to the top of the parent and the bottom of the parent but what we want to do is constrain it to the top of the thing that's above it and the top of the thing that is below it so if I go right here it says constraint top so I'm gonna change this constraint top to the bottom of whatever is above it and that's going to be email layout so now the top constraint of this layout is constrained to the bottom of what's above it which is this layout up here and then we want to change the bottom constraints so constraint bottom and I want to constrain the bottom of this one to whatever is below it in that case that's going to be this textview right here so I want to change this to this ID to Change Password so there we go and I also want to actually delete these vertical biases we don't need these anymore so I'm pressing ctrl Y to get rid of those which just removes the line we have no need for any of these vertical biases anymore so I'm deleting those now let's move on to the next text view which is this one right here and I want to change these constraints so once again the same kind of thing I'm doing constraint top I'm constraining the top of it to the the the layout that's above it so the bottom of the layout that's above it and then I want to constrain the bottom to the thing that's below it so constrain bottom to the top of whatever is below it in this case that's going to be this logout button and the last one is the logout button so constraint top to the bottom of the thing above it so constraint top to change password and then I want to change the constraint bottom actually that's still going to be constrained to the parent so let's let's just kind of review what what's happened here so the top layout is constrained to the top of the parent but the bottom of it it's constrained to the top of the thing above it so it this this layer right here is constrained to the top of the layout below it which is this one right here and then you have the same kind of thing going down the line so now this layout the top of it is constrained to the bottom of the thing above it the bottom constraint is constrained to the top of the thing below it which is this password field and the same thing repeats until you get to the bottom where the only thing is different is the bottom constraint which is then going to be the parent so that is how you orient things relative to one another using a constraint layout now at this point you might be thinking wow that's really cool that's gonna help me a lot and in fact if we ran the app right now everything would definitely perform properly so maybe I'll just run that but some of you might be watching you might be thinking well Mitch I already knew how to do that that's kind of the most basic thing possible you could do with a constraint layout can you show me something better and my answer is yes I can show you something better I'm gonna show you a couple of things that you would you're most likely going to be encountering when you're building layouts and constraint louts have a very simple way of solving these problems my build is taking a long time I'm not sure why okay so here we have the app running I'm gonna go to that account screen notice everything is you know it's not it's not really better it at this point it looks the same but if I was to rotate it everything gets oriented correctly and if there was more fields I would also have a scrolling behavior in here so we could actually to imitate what that would look like I could put like a big margin margin here I do margin top like 50 or even 100 DP let's do more let's do 200 DP that's going to bring it down so now if I was to rotate it in that in that form it would definitely not all fit on the screen so you'd have to have a scroll view which is why I added the scroll view to the top so hopefully this build takes less time than the first one so there we have the app starting up it's struggling because I rotated it let's go to the screen so there we have that big margin there so it looks stupid but let's see if I rotate it then here you have now you have this scrolling behavior and this is what you want because if you had a whole bunch of fields that would be an issue if you you need it you would need a scroll view in here to be able to hold all of the fields or be able to user be able to look at all the fields so so now I want to move on and talk about something that I think is really cool about constraint layouts because at this point some of you might not be very impressed so let's delete this margin and let's move on so let's go to the documentation because I think it's always a good idea to take a look at the docs because that way you can find this as a reference on your own so here's the same link I referenced at the beginning of the video and I want to scroll down and look for this selection here it says control linear groups with a chain because a very common thing that people encounter when they're designing their layouts when they're building their layouts is sure constraint layout can orient things relative to one another and that looks fine it looks better but how do you you know if you had a grouping of text views and you want to you know this this grouping to be stacked close together but you wanted another one to be more separated how do you easily do that without just throwing margins everywhere and making things really confusing well with constraint layouts they have this thing called it called chains so you can control linear groups with something called a chain and there's different options here so you can spread say these were text views you could spread distribute the space evenly so a B and C if they were text views they would be spread evenly across the layout option two here would be the two edges so they they hug the edges and then they have they have like the most space possible I guess that would be the best way to put it the space in between them is the most space possible which is spread that makes sense way you can give different weights to different layouts so maybe you want this one to occupy 40% this one occupied 40% this one occupied the last 20% very easy to do and then the last one is packed so if you want to have you know a group packed together kind of separate from the others and the other is off doing whatever they want then you could do that so this is a this is a really kind of powerful property of constraint layouts so I really highly suggest checking this out and I'm going to experiment with this and show you how to use it so the first thing you need to know about these chains is this paragraph right here it outlines the most important thing the chains head view the leftmost view in the horizontal chain or the topmost view in the vertical chain defines kind of the the properties that's where you wanted to find the properties for the chain so if your as its said there if we're looking at our view in this particular view this would be the top of the chain this layout right here let's take a look at Android studio so if we scroll the top we have our constraint layout this would be the chain head the layout the first one that comes to the chain so this is where you want to specify your chain properties so I can just write chain and obviously I want to do a vertical chain because our layout is oriented vertically and I have a bunch of properties that I can choose so I have packed spread and spread inside so if I choose packed nothing changes everything is already packed together that's exactly how it is or I can choose spread and everything will spread out I thought that it would do that but probably because I have to do match parent and that's because I forgot something so I need to come to the scroll view and I need to right fill viewport and set that to true and that's gonna allow us to use the entire view with the constraint layout so now if I come down and change this chain style right now it's it's spread so it's evenly distributing a space amongst all of the views inside of the constraint layout I can change this to the other one so spread inside which maximizes the distance between each view and then of course packed which is kind of almost like the default behavior so you have everything kind of packed right into the center so obviously with this example it's pretty obviously you don't want to spread these out that would look pretty silly it would spread or spread inside but now spread doesn't look too bad but still you probably don't want to use that you're likely going to want to use packed or use nothing at all which is that's the default behavior is actually evenly distributed so what we're going to do is we are going to change it to pact and I'm going to kind of hug this parent view up to the top to get it closer to the top of the screen so I'm gonna come over to the head of the chain which is this text input layout and I'm gonna give it a vertical bias so a constraint vertical bias of 0.1 and you can see that brings the entire chain up I could do point to you know 0.5 it just brings it further and further down the screen so 0.1 that's going to bring it right up close to the top of the screen and then just to improve this a little bit we could add some margins in between if you wanted to so I could come kind of below this text input layout and I could add a little margin here maybe just like margin top of 5 DP or maybe 10 DP just to kind of spread it out just a little bit and copy that and maybe go down to the bottom the next one give it a little margin and then here for this one I actually want to give this a bigger margin so actually I'm going to give it a margin left of 15 DP I'm gonna give it a margin right of 15 DP just to bring it away from the edges the margin bottom is going to be 30 DP and margin top will be 50 DP to really pull that away and this is gonna have DP here because I want the Lago button to be a little further from everything else because if I'm pressing Change Password I don't want to accidentally hit log out you could even bring this farther away go like 70 DP or something like that to really pull it away so it's all I want to talk about for this kind of basic constraint layout video to give you an introduction but I encourage you to check out the documentation like I said there's some really great examples here we already went through the chain but you can check out the the weight stuff so how to give different weights to different views or different components in the view you know like if I wanted to give this a larger weight I could do constraint vertical or constraint vertical weight give us a weight of like 20 of course I already have all of this set up so it's not going to affect my view but if I didn't have any of the other properties set I could give this like a weight of 20 I could give this like a weight of 30 and it would all be relative to everything in the view so some pretty cool stuff you can do with constraint layout and just to finish off let's just run this to make sure that it doesn't screw things up and look funny and you know you take you could come to me and you leave a comment you say Mitch I did what you told me but it's screwed up my app so just to kind of make sure that everything's working correctly so here's the app running let's go to the account screen there you can see everything looks pretty good now let's rotate it and everything should adjust and we get that scrolling behavior so everything is spread out evenly and it can scroll and there's no big deal everything looks good so hopefully that was helpful for your introduction to constraint layouts if you liked this video on constraint layouts I don't usually do a lot of videos on layouts I'm not a big material design guide don't really like to do material design but if you like this video leave a like and a comment and let me know because that way I know that people want to see this stuff because if enough people want something I inevitably will make it so either right now it's kind of Colin co-routines and maybe some constraint layout stuff so leave a comment leave a like if it was helpful and I will see you in the next video actually before I go I forgot to mention I have a really cool app that's coming up I've been building it for you know the last couple months which is this one on my website if you're coding with Mitch comm it's called powerful Android apps with jetpack architecture so we're going to be using Colin mvvm architecture we actually might be using mvi architecture which is very similar to mvvm but a little bit might be a little bit better I'm still kind of exploring that live data and view models navigation components which is on the new way to navigate with fragments room persistence library co-routines bringing my other hand over here I'm running out of space retrofit to dagger to rest API integration on a real server that I built so this is kind of an all-encompassing course it's going to be a really good one if you're curious the server that I'm talking about is open API XYZ I built this just put in specifically for this app that I'm building it's a blogging website where you can log in create an account and create blog so like this would be a blog entry it has an image a title a description and basically the app that I'm building is going to interact with this website so you'll be able to register from the app change account properties post blogs all this is going to be interacting through the REST API if you're curious about how the REST API works go to the API section here and a tox ability URL endpoints and all that kind of stuff so just wanted to give you a heads up of what's coming and if you're more of a beginner because that is definitely not a beginner course I have a Android Learning Path on my website just for you for you guys big you are beginners checkout this course the rune persistence library SQLite for beginners that is going to show you how to get started with Android and start using the best practice methods to do things like using the room persistence library with SQLite so that is now it for this video I'll see you in the next one you

Channel: CodingWithMitch

Views: 47,293

Rating: 4.9097743 out of 5

Keywords: constraint layout, android constraintlayout tutorial, android constraint layout responsive, constraint layout responsive, constraint layout guideline, constraint layout example, android constraint layout example, constraintlayout android, constraintlayout, constraintlayout tutorial, constraintlayout tutorial android, android layout design tutorial, android layout explained, android layout for all screen sizes

Id: mtYBBInIIE8

Length: 21min 1sec (1261 seconds)

Published: Thu Aug 08 2019