Constraint Layout: Android Programming

hello I'm dr. Brian Frazer in this video I'll be showing how to use the constraint layout in Android in order to detonate reasonably complex UIs for example we'll build the one shown here on the right so to start with let's build any project so I'm gonna say new project and I'm going to start here with the basic activity just gives me a floating action bar if I wanted and I'm gonna call this one constraint demo on the strain demo okay so let's resize the window here and see what we've got so Gradle is currently building me my project and for this activity it's going to give me a couple different files that I want to show here so on the Left I've got two files one is the for the main activity I've got main activity or activity underscore main XML and if I look at the text of that it's just going to be giving me the action bar at the top here and at the bottom it gives me the floating action button and then it includes the content main so inside content main this is the one where I actually want to put most of my activity the things like the top and the bottom are defined inside of activity main so we'll stick with this as a good starting point and just to prove we're working let's run this so with any luck it'll launch in this editor emulator over here and yeah let's go to there we go up and running okay so let's start defining our UI I mean I started getting you the things I don't want so I'm going to delete this text box there let's do a couple little simple elements at the top so to start with I'm going to make this a little bit bigger so I'm going to go to distraction free mode and get rid of the left zoom in a bit so we want to put maybe a label in on the top left and imagine we want to put a button in on the top right yeah it looks pretty good so now if I run my program however it's not gonna look nearly as good because without any constraints the Android activity Android does not know where to put things and so everything ends up crushing into the top left because it turns out that the reason things are sitting over here is only during development so we need to tell Android when it's running so that it'll run on any size screen where should I start putting these things so let's start with this textview there's buttons around it that I can basically click on so I'm gonna click on this and I can drag and as I drag we can see I can sort set what it is I wish to make my constraint too so for example just to start where they're gonna put a constraint on here and we can see that now the height of this is now below that maybe that's not what I want I'm going to ctrl click it and hold down ctrl and click it gets rid of that constraint and I could maybe I could place it where I want to start with but then I need to set these constraints so I'm going to drag it to the top of my activity and I'm dragging the left one over to the left of my activity let's make this text much bigger so that we can actually see it and so I'm gonna go down here to text or is it now here you go up text size now let's make it 30 and we'll say something like good layout alright and let's do the same for the button so I'm gonna click on this I'm going to drag it up here and let's make the button on the right hand side so now I set those two you can tell what has been set based on the solid circles they will show you what constraints are actually set for the item you're looking at I'm gonna run this let's go to distraction for motor there again okay and now it actually gets laid out where I wanted it to go okay that's a good start next thing I want to show is maybe there's a little too tight to the edge if you're looking at your phone this feels like it's too tight to the left hand side likewise for the button so let's add some space in there it tended to be very easy to do with Android studio I'll click on the item I want to move around and here are the constraints that we've got we see that there's no constraints on the bottom of the right and my constraints to the top and the left I can go and I can set so you don't want to add a margin on the top and a margin on the left of 8 I think this is 8 DP perhaps and on the other side I want to set this to 8 as well and now when I run them I'll get some space I run that well that's launching I even switch over here to view the text reasonably often you're gonna end up needing to go into looking at the XML in order to change things around maybe you wanted to copy and paste a bunch of elements in which case Android studio gives them all the same names possibly and screws up the layout so you need to kind of jump into the XML to order to make it work so here we can see we've got a bit of layout let's check what that actually did overhear my XML so I got my textview and what i might be really interested in here are these layout constraints so we see here that for my app as a layout constraint the start to start of this goes to parent and top to top of the parent they talked about start and end versus left and right because some activities are laid out in some languages left to right versus right to left so that's making it generic for that case and likewise down here I've got the same sort of constraints set up the only thing either one I mentioned is you can tell it I'm in a constraint layout by up here this defines the layout that I'm working in so we can see it's a constraint layout now let's go back to the design view because that's what we want to do as much as possible whenever possible let's add in a maybe a another I don't know some text over here and we'll Center the text so I'm gonna dragging in the text here let's give it some text I'm gonna say this one centered of course I don't put anything on it I need to it'll just display the top left when I run my application so I'm gonna set the height first and the height I want to be maybe just below my button we'll give it some space there so I'll give it a bunch of space let's go with that 24 move it down and to Center something what I can do is thinking to provide it kind of conflicting constraints I can say I want it on the right hand side and I want on the left hand side and we can see it's got like a spring here the springs are fighting I can actually adjust that with this slider and I can horizontally bias it across as to where I want it how strong effectively I want the springs to be let's put it right in the middle as much as I can 50% and now it's gonna be centred nicely for me again I'll run that we can see it centers nicely let's add in a few other things let's add in a big element maybe that we want to move around so I'm going to put in a recycler view that's great for if you want to show a list of elements and as I drop it in it kind of expands to fill available space which is good and bad now if I just ran into get again slammed on the top left so let's make it go underneath my centered item here I can't quite click on it so I'm going to drag it out of the way yes a two here and if I just double click these ones here they'll go to the end of the app because that's where it's sitting so now it's all around that that's pretty good but there's one problem that it's done Android studio has given this element my recycler view a width and a height that are hard-coded in DP which are the display pixels I don't want to do that I don't want a hard-coded I want it to match my constraints because I provided all of the constraints necessary for Android studio to know where it should be laid out if I run this it's not going to show me anything because I don't have anything configured to go inside of my recycler view so in fact what I'm going to do is I'm just going to change the what's in here I figure back here you can see this is actually recycler view but there's nothing in it so let's change this to I'm gonna give it a foreground it's not gonna really work nicely with an actual application but it'll actually show it to us I'll set it to the screen okay or you're on that we should see the whole thing looking good now if I go back to the sample that I started with I said well maybe we don't want to do this down here this is a little complicated I want to move up my recyclerview a little bit from the bottom and I want to put in a couple text views and some edit text at the bottom so let's start doing that first thing I want to do is I want to break this bottom constraint so I'm gonna click on it control click it I'll break the constraint let's try that again control click and you know let's move this up control click that there we go I just resized it here it's not gonna have any real effect if I go onto this it's gonna give me a height mm let's see where oh it's actually flip these back over to hard-coded values so I'm gonna have to maybe flip this back to my constraints in a minute but let's start by putting in some of these widgets that I need I want to put in a couple text views on the left and then a couple editor texts on the right so text here so a plain text on the right and let's do an email here why not and let's start by getting rid of this floating action button to get that I need to go back into my resources here and under layouts mainactivity XML because it's the actual outside one I'm gonna delete it floating action bars got button it's gone and I also need to edit my Java code otherwise it's gonna try and access the floating action button which no longer exists so we'll get rid of those let's go back in here back to my content that's better okay so what I want to do well I want to start laying this out I could provide these fixed sizes but that gets a little questionable if I want to kind of lay things out in a column do I fix the width of these and how do I do that I don't really like fixing the width of things there's a neat thing I can do here with layouts we click on layouts I can get a guideline and this is not going to be actually a UI element but it's going to be something here that I can work with that I can lay out parts of my UI too I can specify how I want it so I can drag it across the screen as to its width for that setting it in DP here I can go for the right hand side or nicely if I click in a third time I get the percentage and let's say okay 35% sounds good so now I can start to lay this out I'm gonna attach it to the value there I'm gonna attach it to the right but we see here that it's wrap wrapping to the contents I don't want to wrap to contents layout width I want to wrap to the constraints I want it to fit my UI constraints so there's one and I need to map it to the bottom here we're going to give it an offset of eight just to kind of bring it off the bottom of the screen I'm gonna bring this one to the right and the left and because I want this one at the bottom I'm gonna map this one my bottom to this top that says lay it out touching the previous one I'm going to give it an offset I was gonna 16 just to give ourselves some room and I need to set the constraint match to constraints for the width and that lays it out nicely I might also want to give it some whip bring it off these lines so let's put an 8 left 8 right on both of them 8 DP 8tp left it you'd be right give us some room now I want to get this textview I want to have it lined up so I can drag the top of my textview to the top of this widget when that draws if I do it for both of them it's not gonna look very good because it's kind of right on the top what I really want to do is kind of Center it I found looks pretty good so if I click the both the top and the bottom and set my constraints accordingly it's gonna split the difference and so it gives me 50/50 and then the last thing I want to do is I want to set this constraint over to my line and then I want to have let's give it a 24 sure give me self give me some space I'll repeat that with this one so I want to give it to the line give me a 24 off the line 24 T P and lastly connect to the bottom and the final thing I want to do is I want to set this back onto here and I noted before that this had automatically defaulted to some fixed sizes because they resized it so let's go back to rematch constraints and it will now fill of a level space so that's what happens when I run this [Music] and then we have it as I put my cursor in we can see that it resizes this all the content this one's stuck to the bottom of the screen on the wrist content there resizes for me very nice one tip I'll give you as well is do not nest constraint layouts you can and it will function it just turns out to be much slower than you might expect I do that in one design on some tabs and then scrolling through the tabs was actually relatively slow so if you need to do that there are ways you can find online for having much more complicated layouts rather than actually nesting complex layouts with a constraint layout you can pretty much get away with one constraint layout and putting everything inside of it previously without constraint Liat you would have had to have laid out a bunch of linear layouts and so forth and combining that in very complex ways okay thank you for watching if you enjoyed this video click like and/or subscribe

Channel: Brian Fraser

Views: 2,704

Rating: 5 out of 5

Keywords:

Id: 4E6DnInJLhs

Length: 14min 17sec (857 seconds)

Published: Sun Jan 19 2020