Kivy Float Layout - Python Kivy GUI Tutorial #13

what's going on guys john elder here from codingme.com and in this video i'm going to show you how to use the float layout with kibby and python all right guys like i said in this video we're going to look at the float 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 that channel give me a thumbs up for the youtube algorithm and check out codeme.com where i have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 to get 30 off membership that's all my courses videos and books for one time fee is just 49 which is insanely cheap all right it is monday morning here in vegas and in this video we're gonna look at the float layout with kibi so you see i've got five buttons and i've got them floated top left top right center bottom left and bottom right and we're going to use the float layout to do this and that's what we're going to do in this video so i've got a couple of files here float underscore layout.kivy and float underscorelayout.py these are the same files we've been working on up until now the only difference is i changed this to reference float layout too obviously and i put the color as white we did that in the last video so i'm just going to leave that so we're not going to use the float layout in this file right but if we were we would have to import it so we would go from kivy dot uix dot float layout we want to import float layout and you'll notice the f and the l are capitalized here now if we were going to call a float layout down here like we did way back at the beginning of the course we would need to do this now we're not going to do that so we don't need to do that so i'll comment this out i just wanted to show you if you were going to use it in this file you would need to import it but like i said we're not going to do that instead we're going to use our kivy layout or our kivy design file here so this is the same kiwi design file we had in the last video when we looked at images so you can see we have images here so let me just take that off we don't need that we don't need a orientation vertical and instead of a box layout here obviously we're going to use a float layout right so before we get into this i'm going to create a but a bunch of buttons here so we can uncomment this and instead of doing this for each button let's just come up here like we learned earlier and create a button tag now inside of here we can say our font underscore size for every one of these let's put this at 32 and we also need to say the size hint for each of these and so i'm going to create a tuple here and i'm just going to make this 0.3 by 0.3 so this is width width of our buttons and height of our buttons relative to the layout itself to our app itself so we we're saying hey let's make these buttons 30 you know of the the width and the height of our app right so this will do this for every single one of our buttons down here that we designate and we've looked at this in past videos so now i'm going to take this and let's go top left and let me just paste in four more of these two three four and this one's going to be center this will be top right and we'll make this one bottom left and this one bottom right okay so we've got five buttons here this one this one will say top left this one will say top right so top left top right this one will be in the center this one will be bottom left and this one will be bottom right so if we go ahead and save this and run it just to see what this is going to be and then head back over here and run python float layout dot py we get an error we got to come back over here to our main file this is not this should not be float layout too this should be float layout so all right go ahead and save this head back over here let's run this guy again and when we do we see one button and it says bottom right now actually if we pull this up you see bottom right is just the last one listed these are all actually sitting there but they're just kind of piled on top of each other and then the last one standing is the one we see on top right so that's no good we need to change the position of each of these buttons and to do this we use position underscore hint and this is a dictionary now this can have like six different options here we can have let me just go x y top bottom and left and right right so these are the things we can choose from x y top bottom left right and x y are the x and y coordinates of the coordinate plane of our app right so x is left to right y is up and down so i don't know how to remember that except for just remember x is left and right and y is up and down uh top and bottom left and right are kind of self obvious now these are dictionaries and they can each take a value of between zero and one and think of that as a percentage so one is one hundred percent zero is zero percent and the decimal numbers between zero and one are the sort of value of x and y we wanna give so for instance here if we want top left we could give this and we could do this several different ways we can use any combination of these or you know just one of them we don't have to use them all so we could say hey let's let's put the x at zero and we can also say but from the top go up 100 so if we save this and run it we now have top left over zero you see it hasn't this right up here this top left corner of our button it hasn't gone left or it hasn't gone right any it's zero and the x y coordinate but it's a hundred percent up at the top now it puts the top of it at one not the bottom so it puts this at one and then the button flows down from there so okay we've got our top button now let's do this one over here so think about this what would we want here well we would want this to go again up all the way but they would we would want this to go over almost 100 but remember when we do x it's grabbing this point right here so we don't want this point of the button the top left point to go over a hundred because then the button would be off the screen so we want the button to only go over x percent so that the rest of the button will still be there well how big is our button remember when we defined these things up here we said the button is 30 so we need to go over 70 percent so the 30 of the button will be visible does that make sense so let's come down here this is the top right so let me just copy this whole thing [Music] paste this in we still want the top to be one because we want it to go all the way up we want this x to only be 0.7 right because if we go over 0.7 that means there's 0.3 left for the button itself to sit there so go ahead and save this and run it make sure that looked okay okay so we've got our top left and our top right and that's pretty good so now let's do the center well let's do the bottom we notice the bottom left is already in the bottom left position so if we wanted to we could sort of give this an explicit x of zero right and then just leave the rest of this off but we don't really need to because it's already there but i'll go ahead and put it there just for fun but for the bottom right what do we want to do here well we still want to go over 0.7 just like we did for the top right but we don't want it to go up to 100 and you know to the top of one instead we want to do the bottom of one and this is sort of just like the opposite of top right we're going to go all the way down to the bottom one so if we save this and run it we see now we've got bottom right and bottom left top right top left now the only thing left is our center button so we can come over to our center and what do we want to do here let's give this an x we want it to go over like i don't know 35 and let's give this one for just something different let's go y and we'll do the same thing 0.35 and we can do a zero there too so go ahead and save this and run it we see now we've got our center button in the center and what this is doing is it's going over 0.35 ish percent right and then it's going for y it's going up 0.35 percent and then there's our button and uh pretty simple now you know like i said you could play around with these things we don't necessarily always need to use the same things like for instance here we used y of 0.35 we could give this a top of like what point would this be we don't want to go up to 100 we want to go up like .66 or something because the button itself is point three or what point seven maybe something like that i don't know save this and run it see what this looks like uh almost the same it's up a little bit higher than we would want it to be so maybe point six six was right that try that's sort of more in the center so now we're doing like third third third basically so you know you can use different ones of these you can mix and match you can use x you can use y you can use top bottom left right whichever you want for your app to make sense to get things positioned wherever you want and the point of this is that we can position these things wherever we want and that's what the flow layout is good for you can move things around very specifically using your position hints and also your size hands these two both go together so for instance if we take this one off this whole thing is going to be messed up right so we can we can run this guy again and now it's just one big button right and you can see like things are something weird is going on here right so you have to always remember to use both your size hand and your position hint for this when you're using a float layout and when you do that boom boom you can move these things with pretty exacting measurements anywhere you want and of course the nice thing is as we resize this right they kind of keep their percentages of you know where they're at so pretty cool and pretty easy 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 codename.com where you can use coupon code youtube1 to get thirty dollars on membership 49 taxes all my courses over 47 courses hundreds of videos and the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is sean elder from codeme.com and i'll see in the next video

Channel: Codemy.com

Views: 10,768

Keywords: kivy floatlayout, kivy float layout, floatlayout kivy, kivy floating button, kivy float layout position, python kivy floatlayout, python kivy float layout, john elder, kivy design language, john elder kivy, kivy tutorials, kivy gui, kivy python tutorial for beginners, codemy, codemy.com, codemy kivy, kivy tutorial #13, kivy python app development, kivy python app

Id: 9DaVDNP-NOM

Length: 11min 26sec (686 seconds)

Published: Mon Nov 23 2020