Build Apps with Style / Design Separate from Function with the Kivy .kv Design Language with Python

what's going on you guys welcome back to the channel uh today's episode we'll be continuing our kivy uh tutorial in app building for python and uh if if this is the first video you're jumping in on that's definitely cool but i recommend if you want to follow along line for line with what we're doing you um kind of go back and get an idea for what we've learned already because i'm not really going to cover the basics of how we got to this sort of funky looking login screen where you can punch in a username and a password and then hit this confirm button and have an output um so that's where we're starting from and today's video is actually super important for kivy because we're going to take a look at how to get all this stuff we added inside of our app and actually move it to a separate design file so like if you're familiar with web-based development at all you write like the main code for your website in html but then you have a separate css file with all of the kind of style for the web page um that's very similar to what you do in kivi so we're going to move all of our widgets out of this actual um python class and we're just going to call the we're going to call the layout so let's get right into it to start whatever you name your actual app that you call you need to create a kivy design file that's that same name except minus app so if we call this login app then we want to come into our environment wherever you're creating your wherever you're creating your app and you want to create a uh file that is login.kv so whatever you've called this if you called it you know my app like we've said in past episodes this would be kv just make sure it's the exact same name as your app minus the word app and then kv um and then kivi just knows to look in the same directory for a file like that so uh then what we're gonna do is instead of calling a grid layout here we're actually gonna call um a widget now so this is kind of a new thing um so we are gonna need to import that and we'll just say from kibby dot uix dot widget import widget so nothing new there just following standard format um but now uh that's that's just a little different thing you do for for calling it in kv but then you're going to come over here and the first thing you're going to do is actually name your kivy design file whatever class you called it so we called it login screen over here so you go ahead and inside the kind of angled um alligator mouth so you're gonna just define it over here so um now we're gonna just start building out our grid layout and then at the end i'll go ahead and clear we're going to clear all of this out but i'm going to keep it present until we've built it in the kibi file so something super important with kivy design is um it it uses tabs to know where you are um so anything that's supposed to be inside your login screen needs to be tabbed in once and then we're going to create that outer grid layout just like we had previously and that needs to be one tab inside but then when we're creating things inside the grid layout that needs to be one tab inside of that and if you use spaces i don't recommend using spaces because if you're not exactly at the correct character for anything it's not going to build so just use tabs similarly to python and just make your life a little easier okay so now we're going to build our grid layout just like we have on the other screen and so we're going to we're making the outer grid layout right now and we'll say so columns one and then this is kind of important um you want it to fill the entire screen right we made it a widget rather than the the whole layout because that's how you call it but now you need to make your size the root.width and root.height and i can show you a little bit later in the video maybe why we do this or you can messing around at home you can see what it looks like it'll really populate in just one little corner because if you don't say that your layout needs to fill the whole screen it stuffs it into a one little widget space okay so we did that and then um the first widget we want inside of our main grid layout is that second grid layout and um you can mess around formatting whatever you want i usually will put no spaces for the various properties i won't put a blank line as you add properties to a widget but then when you add a new widget i'll usually put a space there that's just my preference you can do it however you want so now we're doing the inside grid layout and that one had two columns and we had row force default true so i'm i'm building exactly what we had in the previous video i i'm gonna take everything down to even these um even these conditions uh just to show how you would recreate exactly the the app that we've already built okay so we had row we had row default height at 50. um and then what did we have in there we had label and i'll go ahead and just to make sure we get all of it right i'll copy our parameters over here you probably notice we're not using the equal sign anywhere that there was an equal sign you're going to need a colon rather than do things on the same line with commas just put them on their own line it's a lot easier to read that way you see i'm taking a little extra care to make sure everything's indented at exactly the right space because it will crap out and then for the colors i'm going to go back to just calling rgb alpha values there is a way that you can create variables inside of qivi design file and we're actually going to get into that in this video but i am just going to go ahead and call our colors directly and this will get us pretty close size 20. all right so that's going to be our username label uh and then let's go ahead and make our text input this one will go a little faster it's only got two settings and in general uh if you're familiar with python and kivy like the basics if you're just creating a little app it doesn't matter which one of these you use um you know someone who knows how to read code and work with it is going to be able to understand either but as soon as you're building anything sizeable um you're going to want to separate out your your design and then you just have this file you can come in and mess with the aesthetics of or you can even hand it off to someone else and say i have all the widgets that i need here you mess with the design a little bit um so this really is it's a better method i'm going to go ahead and copy these since password is pretty close okay label for this one is going to be password and then i think everything else was the same but then i think we made the password setting true and then we made the background it wasn't green it was blue for that one yep okay so now everything in the inner grid out here has been made so i'm going to go ahead and get rid of those just to see we can start cleaning this up um and now we want to put the confirm button in the outer grid so everything here was indented inside the inner grid layout right because this is the first widget inside the master grid layout now we need something one indentation level back from where the rest of the widgets have been we've got this here and so that'll be our button um and now this is gonna be i'll grab all these again text is gonna be confirm entry and probably for future videos because i'm gonna keep building off this app and we are gonna um eventually have a like a few screens and a lot of stuff going on in this app i'll probably build in this uh kv file so if you wanna know how to do something specific in just the root python you can go ahead and ask me about in the comments i'll tell you about how to do it if there is a way how to do it but i would recommend as you're building any real app of substance you get kind of familiar with the kv design files um it'll it'll help you in the long run and it's the it's what like employers and app developers are gonna be looking for um okay and so then let's say on press press and then uh one thing that you do need to change it's no longer gonna be self.confirm when you call functions for buttons you have to go root and say that you're doing something that's in your root code so it's going to be root dot confirm with your little squigglies okay and then that should be pretty good so let's go ahead and get rid of this button and let's we're going to keep confirm out here because that's that's a python function right it makes more sense to separate it out uh we don't need these guys anymore because we are and then let's go ahead and put this last label on screen just a label with no text okay label and um there's something new that we have to do in here uh to get the kv file actually looking back um to interact with it so that's just gonna be easier to show so let me go ahead and clean this up but you can see like um we're we're creating essentially the same app that we already had and we're down to just like 20 lines of python rather than all that stuff so my app is not defined yeah that's because we changed the name login app let's take a look here i don't know that this is gonna build yet yeah there you go um so this should look fairly familiar our button background is gone i guess maybe i didn't change that oh i gave it an alpha of zero so it's completely opaque there we go so now it should be blue okay um so yeah you're seeing when i'm pressing the button though it closes right away and that's because um there's no way right now for the for the kivy file to know um what anything is in the python code and vice versa so what we have to do is we have to um create what's called ids but they're essentially variables that you assign to your things that you need to get data back from so we'll say username is equal to username password is equal to password this is us creating this is us initializing variables to use and then we'll go down to our text inputs and this one's gonna be so you use the id function and that's how you're giving it um kind of a call that can be called from python so the your main code knows what each text input and button and thing are from the outside world so the out id for this one is username we'll make the id for this one password um okay and then let's make the id for this one we'll call it actually output label i i gotta go back up and make that um up higher so do the id is essentially um a shared lookup value so it goes into the kv file and it can actually locate something specific within it uh okay so then one more thing we need to do to actually get them to update in the outside world is we need to import um object property so one more thing here from kivy properties this one's a little different it's not user interface and then import and its object property and we have to do that because we need to grab the actual text from the object so right when you enter your class you're going to say um username or we called it name here we'll say name equals and um to start you're just gonna say object property and then none because uh it hasn't read the kv file yet so there's nothing in it yet and then password do the same thing object property and then none that might seem a little weird but then once the confirm button is pressed that's when it actually goes and grabs the data and we no longer need instance anymore we can just use self that's another nice feature of separating out the stuff into kibi so let's see that may be everything we need um let's go ahead and take a look here did that kind of quick let's say our username is harry potter and our password is leviosa all right so one thing i want to go change it looks like the password text entry is not doing the like secret star anymore but our um our button is rebuilt so let's go ahead and take a look there i may have put the yeah this password true setting needs to be on the text input box not on the label okay so let's see yeah all right secret password very cool um so you're probably saying like hey that was a 15 minute video to have the exact same app i started with but going forward we're going to have such a cleaner better way of separating out stylistic stuff from actual functional meat and potatoes for your app so uh this is your intro to the kivi design language um it's something we could have touched on a little bit earlier but i like to show that you can build it all out manually just within python so there's a good understanding of where all these settings are coming from but moving forward we'll definitely be using the kivi design files a little bit more so it might seem like a big exercise to basically finish where you started but going forward this can make our lives a lot easier so thanks for watching if you have any questions about what you saw today or would like to see something in particular on the channel go ahead and let me know about in the comments below um if you found this or anything else on the channel useful i really appreciate a like on the video a subscribe to the channel it helps me out a ton and as always good luck with your code and thanks for watching thanks bye