Kivy with Python tutorial Part 10 - Screen Manager

Key Takeaways

what is going on everybody welcome to the 10th Cavey tutorial video in this video we're gonna be talking about the screen manager so I've already talked about this what the purpose of the screen manager is in the last video so we're just going to go ahead and hop right on into it so to get the screen manager we have to make another import and this one's going to be from TV UI x dot screen manager import screen manager we're gonna also need screen and then we're gonna import fade transition so not only is it going to allow us to change between screens there's a quite well there's a handful of transitions that you can use that just kind of makes it look a little better as you transition and it literally a transition helps the user know that transition is even occurring right but it's also it's just more user friendly and it looks better so anyway those are the things that we need and now we're ready to actually build our application luckily or at least for this tutorial we can do it pretty simply we're just going to need a lot of classes that happen to pass but anyways first we're gonna have a class and we're gonna have a main screen and main screen is going to inherit from screen basically to use a screen manager we need to import from screen and inherit from screen rather and then so main screen will pass then we're gonna have class another screen again it's going to inherit from screen and again it's just gonna pass and then we'll have class screen manage management it's really easy to koi when you're like doing tutorials or just like trying to learn about something it's really easy to make the function named the same thing as what you're working with either a module or exactly this because generally they name their things a pretty intuitive name as well so you can get in all kinds of trouble anyway screen manager don't do that so this will be a screen management class which we'll cover in just a moment and then it's going to inherit from screen manager which is here you guessed it it's gonna pass okay so we don't really need any logic at this point simply because we are really just doing like the visual and keavy kind of stuff at this point so we don't actually need to put any logic here but soon you can imagine you might and that's basically it although we need to get rid of these right here so presentation is not a function it's just a variable so we're going to go ahead and get rid of that and now we're ready to move into our kv file so we'll save that there and we'll come over to our ki v file and I'm just going to go ahead and delete everything out of this main kv we don't really need anything there and if ya I'm gonna delete okay so now that we want to do is we want to utilizes meet or fade transition and later on you can actually you might do something with it but actually probably the main use of fade transitions going to be in the key V file anyways but so to do it import in your ki V file it's really quite simple but I guess it's it's kind of flipped around but anyway it's kind of I'll just show you so we want to import what we want to import fade transition and then from where so key v UI x dot screen manager dot fade transition okay and that's our import that's really the only thing we need to right there now we're gonna reference first screen management and basically talk about what screen management is managing so first we have screen management colon tab and first we're going to reference transition transition is you know like an element of our screen manager okay so what we inherited from to make our screen management class their transition you guessed it we're going to use the fade transition then uh what are the screens that we're managing will remain judging main screen and we're gonna manage another screen okay and later on you might be able to add some stuff here for now we'll just leave those actually completely blank so now let's create our main screen rules here and um again TV files are not like spreadsheets Earths spreadsheets style sheets um in the sense that you know like you reference say an ID so main screen is our you know parent and then we've got this child you know ID basically and then we can pass some more things and actually reference that ID and have a user scroll to that ID and all that kind of stuff it's kind it's basically the same thing here so here we're gonna give it a name in the name of main screen we're just gonna say is main and that's basically it and then we we want a budding here capital B for button by the way we want a button tab over we're gonna have a few elements here and what this button is going to do is on release which is a function of a button here on release what do we want to happen well app dot root dot current so our app is basically this right main app and then we're saying basically dot root dot current for the current screen that we're looking at and we want to actually change that to other if the button is going to be the on so the main screen and it would be like hey go to another page or go to these settings or whatever basically this is what controls what this button does so we want it to head to other for another page so the name of our say another screen for the IDE like the ID anyways the name is going to be other so that's kind of how you reference them anyways that's on release but we need a few other things first of all we need some text to let the user know what the heck is about to happen well just look how this actually next screen that's probably the easiest and then finally font size will just say 50 so it's nice and clear and that's basically it with the main screen and now we're going to code the another screen I'm going to just copy this paste this instead of a main screen it is another screen name is other when we release the button on this screen we want to change back to the main screen and then of course this will say something about going back home so we'll just say back home okay easy enough and now we've got basically all of our required you know TV stuff and we've got our buttons we've got our screen manager managing our screens or screens are willing to change the current screen to other and the way that we're doing that is with a fade a transition so I think we're ready to run let's see if we have any errors so you can run that our screen comes up short off we have next screen we click on next screen and we see it faded to this screen here we'll click it again and we go back home so we can see that this basically worked the way that we at least for now have intended obviously the button is giant and we don't really do anything else but we are able to go back and forth between various screens and then obviously as time goes on we can add some information it's more you know kind of gooey stuffs logic here and then come into our actual TV file add some more kind of graphics and customization and maybe not make the button take up the whole screen that kind of stuff so we're gonna add stuff there so I figured that most or the best thing to do now would be show since in the previous video we actually made an application where we were drawing stuff right why not just add that application as if it was you know anything else so we'll add that application will basically come to the main screen we'll hit this it'll come to our application and then maybe there's a button that heads us back home okay something simple like that so that's what we're gonna cover in the next video so stay tuned for that if you guys have any questions or comments on this video please feel free to leave them below otherwise as always thanks for watching thanks for all the support subscriptions until next time