How To Center a Tkinter Window On The Screen - Python Tkinter GUI Tutorial #126

what's going on guys john elder here from coding.com and in this video i'm going to show you how to center your app on the screen with kinter and python all right guys like i said in this video i'm going to show you how to center your app but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com where i have dozens of courses with hundreds of videos to teach you to code use coupon code youtube1 to get 30 off membership that's all my courses videos and books for one-time fee it's just 49 which is insanely cheap all right it is friday here in vegas very excited and it's actually cooling off a little bit so we might have some nice weather this weekend won't be a thousand degrees out and then this video i'm going to show you how to center your app in the middle of the screen so right when you run it the first time it will be completely centered in the screen now this is a little tricky because every monitor is different sized and your monitor may be this big your resolution may be that big it may be this big who knows and if you share your programs with somebody else you don't know what their monitor resolution is or their monitor size is so it could be a little tricky to do this but it's not that bad so this is gonna be a little bit weird because i have two monitors and as you probably know if you've watched these videos whenever i run these programs it they appear on my other monitor and then i have to kind of drag them over so you're not going to be able to see exactly centered i'll have to kind of fudge a little bit but i'll show you exactly how to do it in the code at least so let's go ahead and close this and open our code i've got a file called center.pi our basic kinder starter code i'm using the sublime text editor and the git bash terminal as always so we're going to be working a lot in this root.geometry thing and you see right off the bat you can designate how big you want your app to be i want mine to be 500 by 500 and this is how we do it so right off the bat we're going to change this around a little bit so i'm going to come up here and let's go uh designate height and width of our app so i'm going to call this window or app underscore with and set that to something and i'm going to call this app underscore height and set this to something and let's just make this 500 by 500 right off the bat now we can come down here and instead of explicitly using these numbers we can use these variables and this is going to be important because we're going to need to do this later on for some other things as well so instead of doing this 500 by 500 i'm going to make an f string and inside of here i'm going to put this times this and these brackets just allow us to pass in variables so we can say app width is that and app height is that so let's go ahead and save this and run it just to make sure that worked and let's run python center dot pi and when we do we get this nice 500 by 500 if we close this now if we want to change this to for instance a thousand by 500 we could save this and run it again now it's a thousand by five hundred so that's the first step and it's kind of important now we can also fiddle with other things in here we can do plus this and that and plus this and that now these two things will be the x and y coordinates of the top left-hand corner of your app if you want your app to appear in a certain position on your screen you can pass that position right here right so right now let's just say a hundred by a hundred now this is the x-coordinate and the y-coordinate so you know an x-y grid now we could save this and run it but it's not gonna make any sense because it's gonna pop up on my other monitor so i can't really show you that so okay now let's talk about what we want to do here so let me let me close these out now let's pretend this whole thing just the square box is our computer monitor right so what we could do what we want to do is let me click and make a line here we need to first off figure out where the center of the screen is so right here where these two lines cross that's sort of the center of our screen now this is not exactly centered because i just eyeballed this but basically we need to find out the center of the screen which begs the question how do we find out the size of our screen what what is our current size what is my monitor size who knows so we can figure that out with hinter so let's get rid of that and head back over to our code real quick now we can find the screen width and the screen height so we can let's create a variable called screen underscore with set that equal to something and one called screen underscore height and set that's equal to something and what is the screen width well it's just root dot w info underscore screen width and this is a function and we've looked at w info stuff for other things uh in the playlist check the comment section below for a link to the playlist but that's how we find the screen width and we can do the same thing to get the screen height so we can go w info underscore screen height and that's a function now let's create a label down here let's go miner score label and that's going to be a label and we want to put it in root and we want the text to equal and let's do let's do another f string here and let's just pass in those two variables so let's go with colon colon over here let's go height colon and then let's just grab each of these things so let's go screen with let's copy this and paste that into there and let's go screen height and go ahead and pass that into here just to see what these things are so now let's go my underscore label dot pack give this a pad y of 20 push it down screen a little bit so now if we save this and run it we can see that our screen width is 1600 pixel and our height is 900 pixels now this is my other monitor and i have the resolution jacked up a little bit higher normally your screen width and height might be different but that's why this is so important because every monitor is different every monitor is set to a different screen resolution you know potentially so this particular monitor is 1600 by 1900 or by 900 well how do we find the middle of the screen well we could just take each of these divided by two right that will tell us the middle of the screen but there's a problem right if we come back here and let's grab our little thing here again and let's make a line actually first let me bring over our app here now let's say we wanted this to appear right in the middle of the screen and again let's pretend like this is our monitor this blue area here well if we found the middle of the screen like we just did let's go ahead and make a line here that'd be something like that by i don't know something like that the middle is right here well if we if we told our our app to go to the middle using these coordinates well it would put it right whoops we don't need the plan anymore it would put it like right here it would put the top left corner in the middle of the screen that's what let me bring back the code that's what this coordinate system right here would be so if we put it like screen width divided by 2 by screen height divided by 2 it would end up putting it right here right that's no good we need to put it right here right in the middle so we need this thing let me draw this again stick with me here i know this is a little confusing uh and this is just the best way i can do it but let me just show you this here let's get our middle section again what we need to do is figure out where this point right here is because we put it right there the rest of the app will flow through and then it will be centered this will be like what our app will look like right so if we want our whole app imagine this thing is our app right we want the top left corner to be right here not right here because if it was right here then our whole app would be you know it would look like this on the screen and that's no good we want it to be right in the middle so we need to find this point uh right here so how do we do that well we need to find the width and the height of our app and divide that by two and then subtract that from this the middle thing and that will pop it up in that direction just trust me on this okay so it's hard to visualize that so let's just write the code out and do it so i'm going to change this to 500 by 500 again just for fun okay so what we need to do is we need to create some x y coordinates so i'm going to call this x equals and i'll call this y equals and this is going to be two things just like this because remember we've got to find half of the screen width and half of the app width and then we subtract those right so what we could do is just call screen underscore with and then take that divided by two right and here we can go screen underscore height and divide that by two right so that's part of it now we need to subtract from that our app width and height divided by two so here that's going to be app width divided by two and this is going to be app height divided by two right so you've got your screen width say that's say sixteen hundred we take that divided by two to get the middle point and then we subtract from that half of our app size width and that will knock that over same thing with the screen height and i misspelled height there we go so we take our screen height which is i guess 900 divide that by two and then subtract from that half of our app height and that will pop that over the top left corner and everything will be good so now we take this x and y and we need to pass that into our root geometry thing so we've got our app width times our app height then we add to it the x-coordinate and the y-coordinate now this will this will shoot out a float and like a decimal number so we need to make sure this is an integer so i'm just going to wrap this whole thing in an integer function same thing here otherwise i think we'll get an error because we want this to be a whole number here so okay now if we save this and run it this is where it's weird because you're not going to be able to see run this again and over on my other monitor i promise you it popped up right in the middle of the screen obviously you can't see that but basically what it did is pop the app like right here in the middle of the screen because it defaults to my main monitor which is 1600 by 900 so i can't show it to you because like i said it just popped up on the other monitor but trust me it did pop up in the exact center of the screen so i know that was a little bit convoluted so let's walk through this one more time you've got your app width and your app height right that's whatever you want it to be and then you've got your screen width and your screen height which is just root w info screen width and root w info screen height so to get the x y coordinates to pass into your root geometry thing right here right you just take your screen width divided by 2 and subtract the app width divided by 2. that's your x coordinate that's going to be this point right about here right then you take your y you take your screen height divided by two you can put a space here if you want or you don't have to and you subtract from that the app height divided by two and that will give you the y coordinate in that sort of coordinate in that sort of spot which is if we do this again really quickly just zoom zoom that will give us right here this spot right here so the screen width divided by your divided by two minus your app width divided by two will give you the x coordinate for this and your screen height divided by two minus your app height divided by two will give you the y coordinate for this spot right here and then that will definitionally bring the rest of your app completely in center of the screen and you're good to go so very convoluted but really not that hard i'm just having a hard time visualizing it for you but trust me that's how you do it you could try it for yourself to see all right so that was a convoluted friday morning video but it's friday we muddled through it and hopefully that made some sort of sense to you so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com where you can use coupon code youtube wanted to get thirty dollars off memberships a page is forty nine dollars to access all my courses over 45 courses hundreds of videos in the pdfs of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from codeme.com and i'll see in the next video

Channel: Codemy.com

Views: 15,708

Keywords: how to place a tkinter window in the center of the screen, How To Center a Tkinter Window On The Screen, center a tkinter window, winfo_screenwidth(), winfo_screenheight(), tkinter winfo_screenwidth(), tkinter winfo_screeheight(), how to center a tkinter window, tkinter center, tkinter center window on screen, tkinter center widget in grid, tkinter center screen, python tkinter center window, how to center tkinter python window, python center tkinter window, tkinter center how to

Id: TdTks2eSx3c

Length: 13min 56sec (836 seconds)

Published: Fri Sep 25 2020