Nest Grid Layouts, Adjust Widget Width, and Update Label in Kivy- Python Cross-Platform App Builder!

hello welcome back to the channel uh this is gonna be part four in our kivi tutorial series and if you've skipped the first three as always um there is some code we'll be starting from we previously wrote the code to create this app which essentially takes your username as an entry and a password which it hides as an entry and then sticks what you just entered into an output field on the screen so it doesn't look the greatest but we are going to start from that code so if you've missed that i recommend going back and checking those out prior to this otherwise if you're just here for the concepts in this video let's go ahead and get right into it this video in particular is going to be covering a kind of a trick to adjust your ki layout so how that button didn't span the entire screen we're going to take a look at how to make widgets that do span the full width of the screen and we're also going to update such that instead of every time you hit confirm entry it overwrites and adds a new one to the screen we're going to look at just using one and constantly updating it so let's get right into it to begin with the actual concept behind um creating something that spans the full width it might not seem intuitive but it's actually not that bad is you create a grid layout inside of a master grid layout and so if you want something to span the whole screen it needs to exist in a grid layout that has a column width of only one so i'm going to go ahead and make our master grid layout just have one column and you'll see why this kind of works as we go through it but now it's taken all of our widgets and it's made all of them the full width of the screen obviously this isn't good because for these top four we'd much rather have them side by side so what we do is we create a new grid layout which i will call self dot inner grid and we're going to make that a grid layout and then we're going to make that self.inner grid we're going to make that have dot calls two columns okay and so now anywhere that you see dot add widget that needs to be one of those four that goes inside we're just going to say self.innergrid.add widget so our four widgets right we have the text input and the label for username and password those are all going to go on the inner grid but what you'll see if i run this is we're not currently drawing the inner grid onto the screen so grid layout is not defined because i never capitalize that properly but what you'll see is we're not drawing the inner grid into the master grid yet so none of that stuff appears it's just what still exists in the master grid so we also have to come down and do self.add widget actually we want this to appear before a button so let's go ahead and do it before the button and we're going to do self.add widget and then this is going to be self dot inner grid so what we've just done is we've said the first widget to draw into our master grid is actually an inner grid layout to go within that so now when we run it okay you have this which obviously looks a little better you have username and password right next to each other your big confirm entry button down below obviously if we do secret um obviously if we do this we still are getting uh additional widgets added every time we hit the button but this layout looks pretty good so um that's kind of how you create things that span your whole width of your app and now let's take a look at instead of having that uh as an ad widget every time we hit the button all we're going to do is update the text so let's go ahead and um create this label actually up here and and say self. and we'll call that the output label and we're going to set that equal to this rather than adding it down there so we'll say this is our output label and then we'll go ahead and do self dot add widget and we will add self.output label and actually we don't want it to populate right when we first create it so we'll just go ahead and leave the text blank in the beginning and actually the way that you update this is down here this text that we created we're actually going to do self dot output label i'll put label dot text and then we're going to set it equal to that string we just defined so actually um actually what we're doing now if you think about we're creating the label outside of pressing the button and we're saying that it's just gonna write in with no text initially and then we draw it on the screen and then every time you press the button it's not adding another another widget it's just updating the text so that's the self dot label dot text here that we did so hopefully if we run this and if i haven't created any mistakes if we say let's say peter for username and secret secret i think i spelled that wrong oh well um hello peter your password is now secret yeah wrong but let's say we're going to make this update updated all right all it did was update the text on the widget that's already there so obviously it's not necessarily ideal in all situations to just have um the the widgets continuously stacking on top of each other so by doing this and just updating the text rather than adding a widget every time that's how you control that and since we added it in the outside grid that is also full width rather than side by side so actually you can think of this as being a master grid uh layout that has one column and three widgets in it right now but one of the widgets is a grid layout which is two columns and has two widgets or uh four widgets in it total so that might be a little confusing but hopefully with some practice that starts to make a lot of sense if you have any questions on anything you saw in here let me know in the comments i'll get back to you as soon as i can and if you found this or anything else on the channel channel useful i always appreciate a like and a subscribe it helps channel out a lot and as always good luck with your code and thanks for watching thanks bye