How to Create a Pop Up Window Inside Your App with Kivy! Building Advanced GUI Apps with Python!!

hello and welcome back to the channel today's video will be the next episode in our uh building an app with kivy tutorial series and in this video in particular we're going to take a look at inserting pop-ups into your app um so if you haven't been following along with the series so far i'll show real quickly what we've gotten to we have our functional like python code separated out from like the kibby app design language but currently you can enter a username and a password you hit confirm and then your password and username show up in a little text box and like i said all we really have in here is just the logic required to run the app and then the function of pushing button because everything else is stored in the kivi design file so um if any of that seems super confusing and doesn't make sense to you i do recommend starting this um playlist from the beginning on the channel there's a intro to kivi apps with python because we are just going to dive right into it today and so my intention is when you hit that confirm button yeah it'll still add that text on screen but then we want to pop up that says something like user data saved something like that and pop-ups are actually different because you need to create them outside of your regular grid layout so the standard grid layout everything underneath these brackets and at this indentation level is too far in so what we really need to do is we need to come up to the top and we need to create a pop-up which we'll call confirm pop-up uh at popup and so now what we've done is we've created a second piece a second thing inside of um inside of our app and so one of the first settings i'll put on is auto dismiss i'll just turn it false and that's just a setting where if you click anywhere outside of the pop-up it'll automatically close if that's on true so we just want it off and then we'll give it a title and we will just say user data has been saved okay and let's see we want to add i think we're also going to want to add a button so that you can close out of there because right now if that was our pop-up it's gonna and i'll show you once we run it it's gonna pretty much fill the entire screen it doesn't look the best um you would have to close the app and then re-run the app to see anything so let's go ahead and say on the button we'll just make the text uh like exit pop up okay and then oops and then we will go ahead and say on release so one when you press the button what do we want to do well we want to dismiss which is just close the screen that it's on um but then so there's a couple things we have to do because if i run this right now even though it's in our kv design file it doesn't show up anywhere nothing's happening because it's not actually being called anywhere so we come down to our button right and we have our on press it goes ahead and it runs that confirm function so we'll add on release we want to um call the pop-up so we'll say confirm pop-up dot right because we want to run an instance of it dot open and uh so that that should be all we need to do but i'm going to show you kind of what's weird about kibby that makes this a little more so yeah it says it's not defined because it's not under the same build so it can't see it by default so you have to import a module that is called factory so we're going to go ahead and do that all in the kibby design side of things import factory and then kivy.factory dot factory okay and just looking at it that should be all we need to do and now it will be able to see it so we shouldn't get is not defined anymore let's go ahead and see i think maybe i put a space in there too many oh no no it's because when you actually call it now it needs to be factory dot confirm pop-up not just regular confirm pop-up so factory is just uh kivi's solution for how you look into other builds and pull in the the data from them from other uh layouts and stuff so let's go ahead and say secret password password confirm entry there you go and so you see why i wanted to add an uh button to the screen because the default pop-up is going to fill the available space i mean it's just like any other kivy widget it is resizable but it basically takes up as much space as it's allowed if you don't create defaults so there you can see though we're able to go into it and exit out of it with our button which is kind of nice but so obviously that pop-up looks pretty trash right now so we'll do a few things to improve it like we'll give this button a font size of like 28 so it'll be a little bit larger on the text that says exit pop-up and then we can give it a size hint and a position hint just like everything else so previously while building out this app right we've seen the ability to give things hints which are saying you're still gonna fill the available space but at a ratio that's less than a hundred percent of the available space and uh position hint is kind of the same thing hint is kind of the same thing but it needs to be in uh dictionary format so we'll say for x let's go to uh point two is good and then for y let's go to let's just put it in the middle of screen 0.5 and let's go ahead and run that take a look and see how this looks from entry nice so that actually looks pretty sharp um you can see if we resize it it resizes as well um so do be mindful of that if you're designing pop-ups that uh size size is pretty important when you make it a position hint it's all going to be relative to whatever size your window's at so make sure to play around with it and check it out in different sizes but that's really all uh we need for now i'll just briefly touch on one thing if we tried to add a label as well and just had the text say like uh use or name saved or something like that what you're gonna see is pop-ups with kivy are only able to have one sort of widget pop-up can only have one widget as content which doesn't make a lot of sense and it's not super useful because most pop-ups that you are going to have pop pop-up you need to have a few options for so what you can do is and you're probably guessed this already is you could put like a grid layout in here and then you could have the button inside of that and then the label inside of that so the solution to the solution to having multiple widgets is using a grid layout because it technically sees that as just one widget so i'll just leave it at that this video is getting up there in time i don't want to take your whole day up so there you go yeah it doesn't look the best because we haven't given it the size uh commands or anything um but you can see we were at least able to uh put a label and a widget in there we didn't give it any definition because i just wanted to show uh if you do start trying to add stuff to a pop-up and you get frustrated because it says you can only have one widget just create a grid layout or a box layout float layout anchor layout whatever kind of layout you want create the whole layout because kvc's that all as one widget so that's really it on popups probably the next video i'll do will be actually using multiple screens which is kind of the next thing you'd want in an app because most of the time you don't just sit on one screen so that's it for this video if you found it useful i really appreciate liking a subscribe it helps the channel out a ton if you have any questions about what you saw here or want to see something specific in the future feel free to let me know about in the comments below and as always thanks so much for watching and good luck with your code thanks bye