Kivy Box Layout - Python Kivy GUI Tutorial #8

what's going on guys john elder here from codybee.com and in this video we're going to look at the box layout for kivy and python all right guys like i said in this video we're going to look at the box layout but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com where i've dozens of courses with hundreds of videos to teach to code use coupon code youtube wanted to get 30 off membership that's all my courses videos and books for one time fee it just 49 which is insanely cheap all right we are moving right along with our kivy playlist here in this video i want to look at the box layout and up until now we've been using the grid layout and there's several different layouts that come with kivy that you can use and the box layout is a pretty important one and you can see i've got some examples here box layout basically means stacked things either horizontally or vertically so left or right or up and down so here we have horizontally left to right just got you know three buttons here here we have those same three buttons up and down and i'll also show you how to change the button size and sort of move them around position them accordingly uh in the box layout so that's what we're gonna look at in this video so i've got a file called box.pi and a box.kv file this is the same exact code that we were working on in the last video so if you missed that video check the link in the comment section below for the playlist uh we're gonna have to make some changes to this though so right off the bat here our color.kb file should now be box.kv and let's see we don't really need this stuff but we'll just leave it all right my grid layout let's rename this to just my layout because we're not going to use the grid layout grid layout anymore you could name it box layout but you don't have to i'll just say my layout and then down here we'll have to change that as well so we want to return my layout instead of my grid layout and our class is still awesome app right and we're returning that inside of here we don't need any of this and get rid of that and we don't really need any of this we're not going to do any any stuff with pressing the button so i'm just going to put pass here so that there's something in here okay so this is our basic starter code and let's kind of clean this up a little okay and now our qv file here we don't need this and we called this my layout we didn't call it my grid layout and let's just get rid of all this stuff start over from scratch okay so we've got my layout inside of here we want a box layout right and the first thing you want to do is set the orientation now this could be vertical or horizontal it really doesn't matter so let's go horizontal first that's left to right like the horizon right okay now let's just put a button here real quick and let's say text equals hello world and let's make a couple of these i'll just kind of copy and paste these in so say hello world goodbye world and how about uh i'm hungry i'm a little hungry all right so this one will say i'm hungry okay so let's go ahead and save this and run it just to see what we've got here so python box dot pi and when we do we've got three horizontal buttons and they're shoved way down here in the corner bottom left hand corner and which is obviously not what we want we want to expand these to the entire size of the app and so we've already looked at this in past videos how to do that just come up here to the sort of top section of our box layout and set the size equal to root.width and root dot height so let's go ahead and save this and run it and we get now three horizontal buttons stretch the whole thing hello world goodbye world and i'm hungry sums up live pretty much right all right so we could change this from horizontal to vertical and when we do that save it and run it now we get the buttons going up and down vertically right so that's in a nutshell the box layout and this is kind of handy for mobile devices you know your phone is sort of in a box layout usually right things like that so very cool so what else can we do with this well we can set spacing and padding for all these buttons so let's go spacing and let's say just 20. now notice i'm in this sort of top level of our box layout i'm not putting this in the buttons themselves this will apply to all these buttons so spacing is the space between the buttons right in last time we ran this they were all right up against each other if we run this now you can see there's 20 pixels of space in between each one so that's nice and we can also put padding around them around the outside so let's try that so let's go padding and let's say 50 put a lot of padding around all of them save this and run it and now we've got padding all the way around them which is kind of cool if you want to look and see what that does if we change this from vertical to horizontal save this and run it i'm just having fun now all right we get this same thing padding all the way around them and that's pretty cool so let's change this back to vertical we can also change the buttons size and position so here in our last button let's play around with this let's give this a size underscore hint and this is a tuple and let's just say 0.5 and 0.5 or you could put 0.5 either way it doesn't really matter if we save this and run it you see that our box is now half the size and this is kind of cool because it'll keep that proportion as you resize your app right it'll still be 0.5 by 0.5 which maybe you want that maybe you don't when we get it down a lot you know it's kind of hard to even read this so that might not be what you want if you want to sort of hard code the height and the width we can do that too we can set a width and let's put this at like 100 and let's give it a height of like 50. now if you just leave it like this this won't work right we have to change the size hint to none for each of these x y coordinates and that's what that's what those point fives were x y coordinates so okay well coordinate sort of anyway so we set that to none hard code this to width and height to 50. let's give this a run see what it looks like now we get a button that's hard coded 100 by 50 and even if we change you know the size of our app it does not change the size of that button it will stay that size no matter what so you know there are certain circumstances where you may want that that's how you do that now this thing is all the way over here how do we sort of center this let's do that and first let's make this a little bigger 200 by 50. we can just like we gave it a size hint we can give it a position hit and this is a little bit different we're not doing a tuple here this is more like a dictionary and we can set this we can set the center of the x coordinate and what do we want to put that as let's put it as halfway across the screen so 0.5 all right so this is a value from 0 to 1 halfway across to that is 0.5 or i guess you could go 0.5 if you want to be fancy it doesn't matter either way works save this and run it and now we get our button centered right in the middle again it'll keep that centering but it won't change the size because we've hard coded the heart the height and the width of that button so that's kind of cool we could do the same thing without the height and the width here we could comment this out and change this back to 0.5 by 0.5 save this and run it and we get a slightly bigger button but now it's you know in proportion it will change as we resize it which is kind of cool too you might want that and i put 0.5 by 0.5 you can do anything you want here so you know we could play around with this and these are also numbers between zero and one so if we set one here and like point two here oops there we go like that save this and run it we're going to get the same one y coordinate here as the rest of these but the width is only 0.2 of you know this is 20 basically of the hole which is this big right this is one or one hundred percent point two is twenty percent of that so you could put five of these one two three four five five times point two is one right and so that's how that works uh likewise we could scrunch this sucker down a little bit we could say i don't know point one by one so if we want to make it all the way wide but skinny which i think looks pretty good but i have no graphic skills whatsoever oh that is too skinny right so maybe we want to try what point two or even point three play around with this this is just fun stuff right and so we get kind of a more normal sized button and again it will keep its proportion as we resize this thing so that's the box layout pretty simple uh you know it just depends on what you're building and what you want to do which kind of layout you want to use box layout grid layout there's a couple more we'll probably look at but kind of box layout and grid layout are the big ones that you can use a lot of the time but like i said we'll look at all of them in the next few videos but uh pretty cool really the only thing is to set your orientation remember padding and spacing you want to change the size of your button that's not really a so much of a box layout thing as a you know this is just how you resize things right and uh pretty cool so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codabee.com where you can use coupon code youtube1 to get 30 off membership so you pay just 49 taxes all my courses over 47 courses hundreds of videos and the pds of all my best-selling coding books join over 100 000 students learning to code just like you my name is john elder from kodamy.com and i'll see in the next video

Channel: Codemy.com

Views: 15,748

Keywords: kivy box layout, kivy boxlayout, kivy boxlayout tutorial, kivy boxlayout vs gridlayout, kivy box layout tutorial, how to use the box layout with kivy, kivy box, kivy box layout orientation, kivy vertical box layout, kivy horizontal box layout, john elder, john elder kivy, kivy tutorial #8, codemy.com, codemy.com kivy, kivy codemy.com, john elder codemy.com, kivy layouts, kivy layout tutorial, python kivy tutorial, kivy python tutorial, kivy python tutorial for beginners

Id: ZFGAz6vZx1E

Length: 10min 56sec (656 seconds)

Published: Wed Nov 11 2020