Kivy Tutorial #4 - The kv Design Language (.kv file tutorial)

Key Takeaways

hey guys welcome back to another Ki tutorial so in today's video I'm actually going to be going into something called the KV design language now I guess you could call it K as well but the file extension for it is KV and essentially you can kind of think of this almost as like a CSS um because it's a design language which is meant to kind of simplify your code so that you don't have to have like if you remember in the last video we had like do add widget and then we were defining the widget and we were giving it like a text color and a font color so this is just a much easier way to be able to Style Elements so essentially what I'm going to do is you can see here I've deleted all the code from the last video essentially other than the main stuff and I'm actually going to recreate exactly what we did in the last video using the Ki design language to show you the contrast between the two and you guys can pick whether or not you'd like to design things directly from python without using this KV language but it's super simple um and it's not like a whole new programming language to learn it's literally like you'll see when I start doing it how easy it really is but essentially the reason we use that is to separate our style from our code and it's typically a good idea the way I kind of like to think of it is separating your HTML from your Javas or from your JavaScript from your CSS um if you guys ever did any web development stuff you'll probably see why I'm using that as a like to relate to it all right so essentially what we need to do um is we need to create a a style file right and this file is going to have all of the well the styling code in it for us so what we need to do is we have to create a new file so if you're working in py charm you can just go new file otherwise just go new text file um I'm sure you guys can probably figure out how to do that if not let me know and what you're going to have to call this file if you're working with me and you named your main class that has the build method in it my app you're going to go lower cases my. KV now I'm going to explain why we do this in a second but if you're working with me and you're named it the same you can do my. KV okay and save that file now if you didn't what you have to do is you have to name the KV file the same as this class name except if it ends in app you have to remove the app so in this case we said my app so we just called it my and we removed the app now also notice everything is in lower cases so everything you type in this file um sorry not in this file like whatever you name this file is always going to be lower cases so even if my class name was my app like that with capital my you would just name it lowercase m. KV okay and you're removing the app so to just show you a contrast here in case anyone's confused if I do like hello. apppp I would name this file hello. KV and hello would be in all lower cases now if I were to name this file um let's just say like CLS then I would just name my file cs. KV again in all lower cases if I were to name it cs. apppp or CLS app then again it would still be CLS because if you end an app you don't use that in the name I know it's conf confusing why the heck would they do that don't ask me but that is how you do it if you're having any issues with that please let me know okay so now that we have that file I'm going to show you how we can actually add widgets to our screen without doing anything in this python class actually there's one thing we have to do so the first thing we're going to do sorry from python excuse me so do ki. u. widget so we're going to import that and then we're going to import widget now the reason we're doing this is cuz our class has to inherit from widget um just when we're going to be using it in inside this KV file so we just need to import this widget and then just make it inherent from widget as opposed to that grid layout that we had before so now we're going to go into this KV file now this KV file is really nice uh and essentially the way it works is you can just type out exactly what you want in here to show up on uh on the screen so what we have to first do is we have to reference the class that we're going to be using to well draw things to the screen so like if we had multiple windows we would reference different classes and you'll see the way that we do this so our class is called my grid right and this is what's going to be returned from my app and it's what's building so this what we need to reference first so what we'll do in here is we'll do a little tag and we'll say my grid now this defines that we're going to be working with the my grid class okay you put in this little tag and everything in here works by indentation not brackets okay so just like python everything needs to be indented properly so we're going to hit Tab and I'm just going to type something out and we'll talk about exactly what it's doing okay I'm going to type label colon tab again and then say text and we'll just say Tech with Tim okay now I'm going to save this file contrl s all right and let's actually let's talk about exactly what I did here so my class name was my grid inherits from widget in here so we're going to return my grid right so we have this KV file we haven't done anything in the python file to reference this okay we just named it appropriately we named it my again because that's the way the name and Convention works and we're going to say here we're going to put a label and it's going to have the text Tech with Tim so let's just run this first and see what's happening I'll explain why after so you can see that we actually get Tech with Tim showing up in the bottom left hand corner of the screen so you might have expected it to be in the middle I'll talk about why that doesn't happen in a second but essentially you can see that we've added a label to our Ki file and we didn't like type anything to load this file in what actually happens is when you run Ki it automatically looks for this class it looks for this style file and the way it does that is because it looks at this class name oh I don't okay I don't know what I just did there it looks at this class name right and then it tries to find a k file that is that goes with it so in this case my. KV it finds that and then it can parse through this and add those widgets for us so uh let's just see how exactly this works so I added a label and then it had a text property Tech with Tim now the reason that it's like in the bottom leftand corner is just CU we have to kind of move it around which I'm going to show you in the next video but let's actually start building what we had in the last video using this KV file so what we're going to do to do this and sorry I just got to look at my other screen here quickly is we're going to set up exactly what we did before um and I'll I'll just go through it and it's better as an example so I'm going to make a grid layout okay and the grid layout is going to have columns uh two right or actually we need to do columns one because we're going to have multiple grid layouts okay so we're going to have a grid layout and it's going to have uh one column okay inside of this grid layout we're going to have another grid layout so notice that because this other grid layout is going to be inside of this I have it indented and in line with this so that means that anything that kind of is like that's why the indentation Works anything inside so like indented p is going to be inside something so if I put this label here now it's going to be inside this second grid layout so I'll go through it'll make more sense once I kind of get typing but essentially what I'm going to do is I'm just going to rebuild what I had before so label we'll say his name and I'm actually I'm just going to do one L this time just to save us some time and what else we had in Grid layout we had a text input so let's put that and and then what was a property of text input multiline equals false right okay and then again inside a grid layout we had another label so let's do that and we'll say text equals I'm just going to do email instead of last name this time we'll just ignore that and then we'll do uh text input equals multi-line oh what am I saying okay so actually I already made a mistake here equal signs I'm used to python they need to be colons just like uh you might have in CSS right right so if you guys are putting equal signs it's not going to work you got to do colons okay okay so text input uh colon Tab and then we'll say multiline colon false like that I don't think it matters if you have a space or not afterwards um I mean you guys can play with that okay so we have that now so we added that uh grid layout inside of the other grid layout so if you remember what else we had we also added a button so let's add this and the Button had text colon uh and we said submit like that okay so this is what we've done we've added a grid layout inside of uh or we've created a grid layout one column we've added a grid layout that has a label text input label text input the same as we did before inside of the other grid layout we already talked about why that works and then we have a button that is inside of the main grid layout so let's run this and see what we get okay so we get this um and this is actually exactly what we had before it just it's in the bottom corner of the screen right so you can kind of you can see why this is how this is similar but why is in the bottom corner of the screen uh and how do we get it to like move up and be part of the full screen so I'll show you this quickly and then I'm actually going to probably end here and we'll go into more stuff in the next video but essentially the way that we get this to go into the like the ma the big part of the screen is we have to define a few more properties so inside of our my grid here okay uh actually let's do inside of this grid layout there's a few more properties that we can use we can use like position we can use size we can do all this now the reason that this is happening in the bottom l Le hand corner of the screen is because my grid currently is just a widget and a widget has a default size set by Ki so we need to override that size so that it goes to the whole size of the entire application so the way we do that we just say size colon and then we're going to say root Dot and we'll say width and then root do height now why does this work and how does this work well the root widget is going to be uh my grid okay uh and my grid right is going to be like the size of the entire uh application that's that's what it's going to have so it already has those default properties width height whatnot right so when we do root. width and root. height we're going to get that root widgets width and height which is going to be the entire window and we're going to fill our grid layout in that window so we'll you'll see that how this works in a second so I run this and now you can see that the entire window is filled because we used root. width and root. height and I could be saying this wrong but essentially root is just getting your main window okay so the root window it's getting the width and the height and that's what we're expanding to to fill that window so if I wanted to do I could do something like okay if I go here I could do root. width minus 100 I could do root. width minus 100 right and let's run this and see what we get and now you can see that we're going in the bottom because we've not expanded as much right so you can see kind of how uh that works and if I wanted to change the position I'll show you quickly and then I'm going to go to the next video probably after this position we can do 100 100 and now watch what's going to happen we're going to be padded 100 on each side there uh oh 100 100 with Okay so let's we got a minus 200 from this quick math here uh so let's do that and you can see now we're padded in the middle of the window so I'll let you guys kind of play around with this add some more widgets mess with this language I'm going to talk about it more in the next video just want to give a quick introduction and you can see that we're creating an entire application without having to type any code so we're going to have all the logic essentially in here and then all of our styling we're going to do in these KV files and it's just nice and you can see that it's pretty easy to go and fix things as opposed to looking in one straight line and seeing like self. add widget and whatnot okay so anyways if you guys enjoyed the video please make sure you leave a like And subscribe and I'll see you again in the next one [Music]