How To Create Rounded Buttons With Kivy - Python Kivy GUI Tutorial #22

what's going on guys john elder here from coding.com and in this video we're going to do rounded buttons with kivy and python all right guys like i said in this video we're going to look at rounded buttons with kibi but before we get started if you liked this video you want to see more like it be sure to smash the like button below subscribe to that channel give me a thumbs up for the youtube algorithm and check out codeme.com we have dozens of courses with hundreds of videos to teach you to code use coupon code youtube one to get thirty dollars i membership with all my courses videos and books for one time fee it just 49 which is insanely cheap okay like i said in this video we're going to look at rounded buttons so i've got a little app here we've got a white background we've got a regular square button and then a round button that's also blue so i've got two new files i've got round underscore buttons dot pi and round underscore buttons dot kb this is the basic kibby starter code that we always have you'll notice i've got import windows so we can come down here and change this color to white to make our background white we've looked at that in other videos i'm also using the latest version of kibby 2.0 that we talked about installing last week so that's cool i'm using the sublime text editor and the git bash terminal as always now i've also i should mention set up last week when we installed the new kibi i set up a new directory called qvnew so we're in that directory and we're going to be in that directory from now on because it's got the newest version of qivi installed and i've got my virtual environment turned on so all right how do we do this round buttons it's actually pretty easy and it's all going to be done in our kv file so i've got our basic kb file with the box layout we've looked at this before and it's just orientation vertical we've got our root width and root height and i gave we're going to have two buttons so i'm giving them a padding of 50 and spacing of 20 just to you know keep them apart a little bit so let's just go ahead real quick and create a couple buttons and the first one will be button and the text here will say hello world and i'm just going to copy this guy and paste this one and in this one we'll say goodbye world and let's go ahead and save this and run it make sure that looks okay so python round underscore buttons and you see we have a white background we've got our two buttons here hello world goodbye world they're both big and gray and that's cool white background all right so all right let's go ahead and tweak these a little bit so for the second button let's change the color a little bit well first let's change the size i want to make this smaller so it looks good rounded giant button wouldn't look that great rounded so let's go position underscore hint and let's give this like a center underscore x of 0.5 let's say and then we'll give this a size hint of 1 and 0.3 and we've looked at these things in past videos if you're not sure what i'm doing here check the link to the playlist in the comment section below to check those videos out so let's go ahead and run this see what this looks like okay so now we've got a big button and a smaller button and let's also give this a background color so i'm going to go background underscore color and i'm just going to paste this in this is 48 by divided by 255 by 84 divided by 255 by 150 divided by 255 by one and this will just give us a blue color i've looked this up already so i know what it is and let's go back around underscore normal and give that a nothing like you know with buttons we have to give it a background normal or else the color will be tinted gray and we don't want that so okay let's go ahead and save this and run it see how that looks okay so we've got our button here and it's kind of blue and that looks good so now how do we make this rounded well it's actually not that hard we're gonna use canvas for this as we do for many things and i'm gonna come down here below here and let's just create a new sort of button and i'm gonna call it rounded button and we want to inherit this from button right and we start out by giving this a background underscore color of let's go zero zero zero zero and also a background normal of nothing so like i said we're going to use canvas so let's go canvas dot before and inside of here we want to set the color to rgba of and i'm just going to copy this color from up here because this is the color i want this to be the same color of the button okay now we want to give this a rounded rectangle and this is a canvas thing right now we need to give this a size a position and a radius and the size is just going to be self dot size and the position is just going to be self dot position right now for radius this is a python list and it takes in a number argument and i'm going to say 58 and the radius here is the roundness of the button itself and we can kind of play with this and see what this does but this is how round you want your button to be so i'm going to give it a radius of 58. now one thing to notice here we've got this color we're mentioning here so if in your button you've already designated a color you can't because you've designated a color right here so we'll have to change that so now to use this thing we just copy this and reference it wherever we want so we want to change this button to your rounded button and like i said we've got to get rid of the background color so let's go ahead and get rid of these two lines here go ahead and save this okay so let's run this guy python round underscore button dot pi pull this over and we've got our round button so one thing to notice if we click this it looks like it changes if we click this it doesn't look like anything's happening and it is happening and i'll show you that in a second but if we want this to change colors we need to fiddle with a little bit more and we'll probably talk about that in a different video that's a different sort of thing but you can see we've got our rounded buttons and notice the roundness of this this is a 58 radius if we come back here let's just play around with this real quick we give this a radius of like 18 right instead of 58 it's quite a bit less you'll notice it's not as rounded it's more square and boxy right so you could probably go crazy with this let's go 158 i don't know we can even go that high yeah but it looks really kind of goofy so play around with it and uh you know get it to look the way you like it to look 58 looks good for me so i'll keep it at that now so to see if this actually did anything we can come back here to the rounded button and let's give this an on press of and let's just print to the screen goodbye right so we could create a whole function on our pi file like we've done in other videos but we just need to make sure this button works so we'll just print to the terminal goodbye so let's save this and run it and here we have our button when we click it it doesn't look like anything has happened but now if i close this boom it says goodbye on the terminal so we know that it works like i said you can mess around with this to where when you're pressing on the button it changes colors and maybe we'll talk about that in other videos if people are interested let me know in the comment section below but uh that's how you do it so pretty simple pretty straightforward again just you know sort of define your button give it a background color of nothing and normal and then this is just a canvas canvas that before and we set the color that whatever color we want and we just create a rounded rectangle which is a you know canvas thing that you can create give it a size of self.size position of self.position and set your radius and then just use that reference that button and i called this rounded button you could call this anything you want if we called it elder button that would work too right it doesn't matter at all save this and run it but you know it's a round button so i'm going to call it round button or rounded button or whatever that sort of makes sense so we'll go ahead and change that back and that's all there is to it so that's all for this video if you liked it be sure to smash the like button below subscribe to that channel give me a thumbs up for the youtube algorithm and check out codename.com where you can use coupon code youtube1 to get thirty dollars on membership pages forty nine dollars to access all my courses over 47 courses hundreds of videos in the pds of all my best-selling coding books join over 100 000 students learning to code just like you my name is sean alder from konami.com and i'll see you in the next video

Channel: Codemy.com

Views: 12,240

Keywords: kivy rounded buttons, kivy round button, kivy rounded button, kivy round buttons, round buttons with kivy, rounded buttons with kivy, python kivy rounded buttons, kivy john elder, john elder codemy, kivy tutorial #22, codemy.com, kivycoder.com, codemy kivy, kivy button, kivy buttons, kivy button inherit, kivy inherit button, kivy button color, kivy projects for beginners, kivy tutorial John Elder, John Elder

Id: gQRcY2y3mkY

Length: 8min 31sec (511 seconds)

Published: Mon Dec 14 2020