Universally Compatible Apps with Multiple Screens Using Python and Kivy! Intro to Screen Manager!

what's going on you guys welcome back to the channel uh today will be a kind of a continuation in our intro to kivi tutorial series but um this video really will stand on its own um obviously if you look at the screen now there's a little bit of code from the previous videos that just kind of creates a minimum usable app um but as you can see i've shelled out the kivi design file and we're going to be changing most of what you see on the screen i've just kept some stuff that'll help us once we get into the app so if you haven't watched any of the previous videos maybe go back and check out one essentially we're working on creating a login screen that pops up right when you load your app and then it goes on to future screens and today in particular we're going to be looking at creating an app with multiple screens and how you go about that in kivi with python so without any further ado let's get into it and kind of a few of the first things that we're going to do here we need to import what's called screen manager from a net just like always it's from kivy.uix which is user interface and then this is screen manager and from that we want to import screen manager and also just screen so screen manager is the tool that kivi has built to handle multiple screens and then screen is an individual screen which probably kind of makes sense so then instead of like our login screen having been a widget we're going to make it a screen and we can keep name password and confirm so this is just kind of us adding some some stuff to a output label that we'll recreate but then i'm also going to take the builder.load file so this is where we tell the program what ki file to look for again there's some assumption that you know some basics of kivi if you're watching this one but essentially importing this builder um right here is what lets you actually point it at a specific ki file otherwise the the default name of a kivi file it's going to look for is going to be the name of your app minus the word app so if we had a file that was called different.kv you wouldn't need this import in builder file but since we want to call it login.kv then that's what we're going with so there we go that's our login screen and what we want to do now is we want to make classes for our additional screens so we'll say class and we'll just call it next window and that's also going to be a screen and just for now we're just going to pass this we don't need to put anything inside it just yet and you'll see why once we're on the kivi design side of things but then we need a window for screen manager and so we'll just call that we'll call that window manager okay and that is not just going to be screen that is going to be screen manager um all right and then we bring that in we pass it again and uh let's see that should be all we need to put in for now um we will take this builder.load file and um we'll just call that kv file equals builder.load and then if we come down to where we actually build the app we do need to rather than return the login screen we want to return the entire kv file so we'll see once we've fleshed out the design file if i've missed something here but that should be good to go to get started on the other page now okay so a couple things about using screen manager you're probably familiar with a kv file where you basically just start by putting whatever like your grid layout or anything else right at the top but with screen screen manager you need to start by calling whatever it is you named it so we called it window manager to make it easy but whatever you call it in your python file whatever you called your class that's what you need to start with and then you put the screens underneath that so we we called them i believe the first screen is login screen and then we said next window um and like you do not have to follow my naming convention i know i kind of um jump around a lot so uh this is just i'm i'm identifying where that name is coming from you can call it whatever you want but this is just telling okay you have window manager and then these are the windows underneath it and then you actually get into kind of what you're probably more familiar with which is going to be um actually creating the kivi design parameters for them now underneath that so we'll start with the login screen and um i am going to pull in a lot of the elements from the previously designed login app that we already had and put that on the first screen so if you've been following along with the playlist this will look pretty familiar you can copy it but i want this video to be able to stand on its own so if you have any questions on what you're seeing let me know in the comments or you can check out some of the previous videos the most important thing in screen manager when you have multiple screens you want to start by giving each screen a name so like this login screen we want to pop up when it starts up so i'm going to call it the startup screen and then we had a few parameters earlier on here we had uh we had username and password because um because this is a screen that's going to take um in the username and password and then it's going to update a label based on what you what you enter in those two text boxes so um those are a few parameters if you're making a different app you probably don't need those specific variables what you probably will want to do then is just define your layout so i'm using a grid layout with two columns and uh we had row force default true um which actually i didn't love the look of that so we'll just leave that alone i won't put in a default height and then we're going to start putting widgets onto the screen so we had a label with text that said username username um okay and then we will just give it a color of red and so again if you haven't seen any kivi design this is rgb alpha but it's not zero to two five five it's zero to one for each of them um so that's something specific to kivy you're going to want to dive a little more into educating yourself on the kivi design language if that doesn't make sense to you but that'll work for now and we'll just give it a font size of 20. so if you have been following along every single video then you know there's some parameters we had in past videos that i'm not putting in there because i don't want this to be a 30 minute long video so then for this text input that's where we give it the idea of username which is you know the variable we identified up above um and then we said we don't want multiline for this false and then we gave it a background color of green and there we go uh okay so i'm not going to put the password text input in here just yet um ah what the heck it's already here it's gonna say it's just a little extra time but i guess i can just copy and paste for the most part password and you're welcome to play around with the design all you want and if you have any questions on how to do something specific go ahead throw me a comment i will try to get back to you as soon as possible alrighty and then so inside the the two column grid layout that's all we need to put in but actually if you remember we had that entire grid layout inside a master grid layout so let's go ahead and do that as well um and that was so that we could have a button underneath that spanned the whole screen so grid layout and this one we just want to have one column and we had to define size for it and it is going to be root.width and then root dot height okay and so that's good now outside of our inner grid layout but still in our master grid layout we are going to put in our confirm button and i believe the text we just had it say confirm entry and then let's give it a big old font size 32. and i don't think we really need to worry about height or anything let's give it a background color background color of and yeah we gave this a blue cool so i'm um trying to make this a little bit uh familiar for people who have been following the whole series um straight through because this is just a button um that has existed since the beginnings to kind of show adding different kinds of widgets um and then the root.confirm function is what we built out over here to kind of take username and password and display it on the screen and that's why we also had this next widget which is a label whose output we called output label that's the actual text on the screen um and then to start it's blank and then once you enter data it gets filled in so this is just recreating the screen that we've already had on our login screen here's the actual um like now we're adding the second window so you go back to the base level of indentation and you say okay time for the next window and for now just to show how the buttons work i'm going to call the the name of this i believe i'm gonna call it next uh i'll call it second because next is kind of doesn't make a ton of sense if you're gonna have a bunch um all right and then uh on this layout let's go ahead and make a grid layout just like the other one but on this guy we'll just say columns one and then size root dot width by root dot height okay and uh let's just put on here some basic stuff so we can tell that it's working let's say label with the text of second screen and then color that doesn't really matter we'll make it red cool um and then we'll give it a font size of 20. and then let's put a button on here and for now um we want this button to be like uh return okay and then um we'll give it a font size 24 and then um you need to have the on release for this button and actually on this confirm entry button we're also going to want a on release line because this is now where you're gonna actually tell it how to navigate between the two screens okay so um i'll go ahead and run this i don't think it's gonna show us multiple screens yet um let's see calls one invalid data after declaration yeah cause i didn't indent um yeah these guys punks all right let's try that okay sorry about that um it looks like so i just had us importing the builder and loading in the file before we had defined our classes and you can i mean you can separate out the importing the builder if you want but if you load in the file that calls in specific classes before you've defined your classes then it's not going to see them it's going to see them as unknown so i had us loading in the file way up above all the classes and then it was saying well i don't know what any of these classes mean so that's how we got stuck with that but we should be good to keep going now so let's go ahead and actually put in so i can get it to load now and it loads up onto our second screen and we would hope that if you hit this return button it would go back to the initial login screen but we haven't put that in yet so let's do that now so the on release is where you actually make that happening you say dot app.root.com and so we're saying the root page that's up on the screen and you tell it what you want it to go to and so when we're on the first screen we want the button to take us to the second screen and when we're on the second screen same thing it's app.root.current and we want it to go back to startup okay so let's go ahead and check that's probably all we need to do just to get working yeah there we go so confirm entry return confirm entry return um this video is getting up there in time so i'll just quickly cover one last thing um you see it always slides to the right which is kind of it doesn't make a lot of sense if you're thinking okay well i hit confirm slide to the right that's fine but then when i hit return i should slide back to the left so the way you do that let's go ahead and put these on their own line um the way you do that is on your on release action you're also going to define a direction for it um so for this one it's actually currently okay going right so let's just start down here and say um root.manager.transition.direction [Music] equals and this one will send left okay so let's go ahead and check out that should be all we need to do from entry and that did not work in release maybe because it's actually sliding left already i might have that direction backwards there we go ah but okay right so you're redefining something that you you have to set on this button if you want to be the opposite um so we we need the first button to go left and then the second button to go right so that should be all we need to do now we've made it there we go slides to the right slides to the left slides to the right slides to the left so i know it's a little bit weird it's it's not super intuitive but that's how you create a multi-screen app in kivy sorry we got a little hung up there in the middle but hopefully you found that kind of useful these obviously you can still do username and password and enter them in and this label update and then it would once you logged in it would take you to your actual functional app that you're building over there so that's a quick intro into how to do multi-screen apps in kivy hopefully you found it useful um if there's anything in particular you want to see in coming videos let me know about in the comments below as always i really appreciate a liking to subscribe to the channel uh it helps me out a ton and um as always good luck with your code and thanks for watching thanks bye