Set Fixed Height and Width Dimensions Individually or Universally in Kivy- Python's App-Builder GUI!

what's going on you guys welcome back to the channel uh today's video will be episode five in our introduction to kibby with python tutorial series so if you missed the first four on setting up our app um you know make sure you go and check out those if you want to follow along line for line essentially we've created like the start of a login app uh with a button that confirms and then tells you um your username and password if you want to follow along line for line i recommend you check those out otherwise if you're just here for the concepts in this video let's get right into it today we'll be looking at actually defining some set sizes for different widgets in kibby so what you'll see when you run an app and you don't define anything is it's all just resizable but it also if you want something to be a minimum height or a specific width then you don't really get that freedom because kivy automatically resizes so we'll start by taking a look at how to apply a size to just one widget and then we'll also take a look at how to define a default size for all the widgets under a specific layout so to start with i'll take our confirm entry button uh right and i'll go ahead and it's a two-part process with kibby you need to give it a size hint and then you give it a actual height or width so you have to start if you want to find something in pixels and let's say we want to do a height of a hundred pixels you have to start with size hint y equals none so we don't want to hint what we want to do is say height is equal to 100 so if we just do that one and we run it what have i done here and it takes exactly one oh it's because it's it's size hint y i think i said hint uh but i type height so let's go ahead and run that okay so now you see not only is the button a different height but when i resize it the only thing that doesn't change with resizing is our button so 100 is a little big i'll go ahead and kick that down to 70. but real quick i'll do this and then change it back it's just the same if you want to do size hint x and it's getting a little long so i'll put on a new line but if you want to do a size hidden x and define a width it's it's the same deal you you would do none and then you do width of 300. i'll go ahead and run this you'll see it looks kind of ugly um because obviously your whole app is still the full default width so you can see there when we resize this thing uh our confirm entry button doesn't change size but everything else is still dynamic you probably most of the time you'll be messing with height or width you usually won't be defining both unless you make like one button a specific width and then the right side completely resizable that could be one application for it so i'll go ahead and get rid of the width stuff because it's kind of ugly but just know you can do the exact same size hint y and height you can also do size in x and width so for now i won't apply the size hint y and height to the rest of the stuff because i'll go ahead and define it at a much higher level so i'm going to go into the inner grid and i'm going to say that well now i want everything inside that grid to be a specific um a specific height so i'm going to say self dot inner grid i'm going to spell it right i've already shown i'm not the best at spelling things so dot inner grid and it's row uh actually this is gonna yeah it's gonna be row default height or force default um and we're gonna say row force default and we're going to set that equal to true and then we're going to say self dot inner grid dot row default height and we're going to set that equal to let's say 150 and true needs to be first layer capitalized there so what we should see now is everything inside that inner grid is going to be 150 pixels tall because we just applied a height setting to all of the widgets inside a grid layout so there you go you see if and if i start messing with the overall sizing you can see it looks a little funky because it's trying to change the additional widgets so let's go ahead and make that smaller 50 so it's a little bit easier to look at so now you can see those aren't resizing even though the outer grid hasn't had anything changed for it so that's kind of a useful way to quickly apply settings to everything um we could now to kind of show how that can be comboed with the x direction let's say we want to take just our labels and we want to give them size hint x none and we'll say the width of 150. i don't know exactly what this will look like but it should be close to what i'm picturing so then we'll do the same thing for our password label and now when we run this guy uh i spell something wrong oh yeah because that needs to be inside inside this guy put it one player too far there we go so now you can kind of see why you would use an x and a y if you have two widgets together obviously i think the login screen looks a lot better with the labels kind of a fixed size um and then the password being able to be you know secret secret your password is now secret secret i think this is a pretty sharp look this is sort of standard you would make the label not really resize you would more be interested in the the text entry resizing so with kind of you can apply row force default and row default height the the um counter to that if you wanted to set a default width would be column force default it's actually col call force default so you could say self.inner grid dot call force default you can set this equal to true i'll do it real quick it's going to look kind of ugly so i'll change it right back but then you would say self.inner grid dot column default width there it is and if we said that was gonna be 300 i'll run this real quick you'll see why i'm not in love with it um it's kind of janky right i mean it's not uh it's not a great look because that grid is nested inside of an outer grid so like it you're giving it very little freedom to adapt and resize and kivi is a really powerful tool when you allow it to kind of dynamically fill the space so most of the time i would advise just run it every time you make like a style change and make sure it's what you're picturing um but just know like you can mess with an individual widget's height and width in that way or you can mess with an entire grid's set of widgets either height or width using those master default commands so i think that's good for this video those are kind of two different ways to resize widgets and kibby if you have any questions on what you saw here feel free to let me know about in the comments and if you'd like to see anything in the future in particular make sure to let me know about that in the comments as well and if you found this or anything else on the channel useful i really appreciate a like and a subscribe it helps the channel out a ton and as always good luck with your code and thanks for watching thanks bye