Kivy Tutorial #2 - Labels, Input and GUI Layouts

Key Takeaways

hey guys and welcome to this second video in my kevie programming tutorial series whatever you want to call it so today we're gonna be working more with the UI so actually building I don't know like a few we're gonna have some labels you know some text boxes maybe a button or two I'm gonna show you how we can do that in the next videos we get into some more complex stuff but for now we're just gonna go through like the basics of how we set up a window how we can get a few different widgets and stuff in there and all that cool stuff so we've already imported label up here we need to import a few other things before we actually get started so I'm gonna say from Kibby dot UI X dot and we're actually the site grid layout we're gonna import grid layout again you should be noticing this trend here we have the capital right for the class name and we're also gonna import text input so from kibbe dot u IX dot text input import text input now what I want to build here as our first little application is just something to ask the user for their name their last name and their email in the next video we'll add a button to that and we'll let it we'll get that information and check if it's like valid or whatnot or do some stuff with that okay I'm sorry excuse me so essentially what we were doing here is when we wanted to draw something to the screen we were just returning what we wanted to draw which was just a label right now this is probably not very practical if we wanted to draw two labels well how would we do that right so we don't we don't know so what we have to do actually is we're going to create a new class and this class is gonna hold all of our kind of design elements all right so it's not gonna have the logic it's just gonna hold like buttons widgets text whatnot okay so I'm gonna say class I'll just say my my grid for right now okay we call whatever you want and we need to inherit from something so in Kivi we actually have these things called layouts now there's different kind of layouts there's like box layout grid layout there's a bunch of other ones but right now we're gonna use a grid layout and a grid layout it essentially has well grids that we can place items into so we have like a certain amount of columns a certain amount of rows and then based on that when we start adding items to the grid they're gonna go in accordingly so they're gonna start at the top left and they're gonna go if we only had two columns if we added three items that we'd have like one here one here and one down here and you'll see what I mean as we kind of get going through this okay so that's the first layer we're gonna use this grid layout we'll talk about a few other layouts later on okay so grid layout now inside of here what we need to do is need to create an initialization so that when we create an instance of this we set it up somehow so what we actually have to do to do this is define underscore underscore omit underscore underscore I mean of self we actually have to have a parameter which stands for key words okay so these two stars just stand for we can take an infinite amount of key words so we don't know how many we're expecting we could get seven we could get twelve we could get done right so this just says we're gonna handle as many as as come in and they'll come in as a list and we can parse through them all right okay so that's how we do that now what we actually need to do is need to call this grid layouts constructor so when we if we're inheriting from it we need to first call that instructor and this is again goes with object-oriented programming if you don't understand this please go watch my videos on object-oriented programming again there'll be a link in the description so super dot underscore underscore and Nitz underscore underscore and then here we're gonna do star star Korg's but inside of the super we need to type something else we're gonna type my grid okay and then we're gonna type self and I'm not gonna talk exactly about what this is kind of doing but essentially we're just calling the the grid layouts constructor giving it a few parameters and just setting it up so we're ready to go so now in here we're also gonna change a property that is that belongs to grid layout so we're gonna say self-thought calls equals two now what this stands for is the amount of columns equal to two now obviously play with this if you want to have one column one have four columns I think you guys know how to change that number accordingly so now instead of actually returning this label here we're gonna return my grid now the reason we can do this and if wow I really butchered that typing is because when we inherit from grid layout we get the properties of a grid we get the fact that it has like a width a height as columns as widgets attached to it so when we return this so my grid from the like this build method here we can actually draw all the widgets and everything that belonged to my grid which is inherited from grid layout okay and that's the beauty of kind of inheritance and object-oriented programming when we're doing something like creating a GUI or graphical user interface okay so next thing we need to do is we need to add a few widgets so to do this we're gonna start by just adding a label widget then we'll add a text input widget and we'll go through what all these do okay so we gonna say self-thought add widget again the reason we can call this add widget is because that is a part of grid layout class and somewhere in there there's a method that's called add widget that's why we can do that so in here we'll do label and then for the text of our label we'll just say name so I'm gonna do like name last name and email and those are gonna be the kind of things that I have in my window and you guys will see what I mean in a second okay the next thing we're gonna do is gonna say self dot name is equal to and this is a bit different than the other one we're going to say text input okay and we're gonna say multi-line equals false now the reason we're doing this obviously is because it'll default to have multiple lines in our text input box but we only want one and that's obviously because we're just getting a name and we don't want to select Cascade down right so we'll do that okay next we need to add this text input widget to our widgets so we'll say self-thought add widget and here we'll just do self dot name and that's all we need to do right now to see a name a text input box and then just like add these widgets the screen so actually let's just run this right now and see what's happening if I made any mistakes or not okay so awesome so right now I know this doesn't look really like a text box but you can see that if I click on it I can actually start typing whatever I want in here so this is our label this is our text input box so I can resize this and you can see that it'll automatically and dynamically change if I go to something like this you can see name and then we have that so we can type it like that and this is working great okay so we've done that so let's add a few more widgets into our box and see how that works so we'll just actually copy these because we're gonna do the same kind of thing so we'll just copy these here and let's just change a few names so instead of name we'll say last name so maybe it will change this to first name first name last name we'll make our variable last and then obviously when we're adding it we're gonna have to do last name here as well okay so this one let's grab an email so let's say this is kind of like a forum like they're gonna type in their name their last name and the email and maybe they'll be a part of like an email list or something I don't know we can you guys can imagine whatever you want for this and email and now let's run this and see what it is looking like okay so awesome first name last name email and we can see that we have resize ability and we can type into all these text boxes if you hit enter it actually escapes them because it's only one line and you can't go down to another line right so that's awesome okay so that is great that's how we build kind of this so now let's go to actually add like a button down here or let's see what happens when we mess around with the amount of columns and let's see what we can kind of do to play with this so if we want to change the amount of columns so let's say six columns here okay and let's run this and see what we get now well would you look at this now everything is showing up in the same column so this might not be exactly the way we wanted it to look but this is what happens when you add six columns right it automatically makes it one row and it just adds everything in there what happens if we do three columns now it's gonna be a bit messed up and you can see we're getting like a checkerboard pattern because we this is the way that it works so instead of us in other language you have to specify like what column and what row you want everything to being Kibby just automatically does it for us and it'll just figure out those things so if we do four let's try this now you can see that we get first name last name email and then it's leaving kind of a blank space to add something else so this is all I'm gonna show you guys for right now in the next video actually we're gonna add a button to this we're gonna make the button kind of have an event and then we're gonna go into the kibbeh language which is a design language kind of similar to CSS which is going to allow us to add some more properties to all of these things make things look a bit nicer and then we'll get into some more logic stuff and we're gonna keep going on this and hopefully be building an app near the end of this tutorial series if there's anything that I missed or anything you guys want to see in future videos that maybe I didn't talk about please let me know in the comments down below as always this tutorial will be up on tech with Tim net you guys can go look at and feel free to contact me on discord in Twitter [Music]