Kivy Basics in 60 MINUTES

hello everyone welcome to our tutorial on an intro to kivy here we'll just take a few minutes in the slides to get to know this library a little bit better for starters what is kivy well kibi is simply a python library that helps us to build applications now that's not terribly descriptive so let's launch in a bit deeper it's excellent for rapidly building complex uis it's very easy to implement general app logic in raw python building the ui however is kind of complex and clunky without libraries like kibby kivy allows us to do this super easily we can actually do the app logic and the ui all in one bundle it's written mostly in python that means the logic code is almost entirely python and the ui building itself is kind of a combination of the python language and kivi's specific language don't worry that's super easy to learn it's open source so if you find any errors or bugs you can contribute to it and that means there are also lots of other contributors too it's cross-platform which is one of its main selling points what that means for us is we can actually build applications for desktop and mobile all in one go we're only going to be focusing on the desktop application however as we don't want to have this course be many many hours long it's gpu accelerated which is also very powerful for when we're building graphics intensive uis we're not going to notice too much for performance difference for what we're doing as we'll be keeping things simple but once you get into big applications having it gpu accelerated makes graphics clean and crisp and load quickly so why bother learning this library well we can use qivi to build apps for desktop and mobile so i can't stress enough how amazing that is a lot of platforms are kind of one specific so it's either mobile specific or it's desktop specific or web specific qivi is desktop and mobile all in one bundle it's very very easy to build flexible and powerful uis with kivy it's a little bit clunky to do so with raw python kibby makes this process super easy and intuitive it's widely used so there's lots of help available qivi is a very popular python library which means there are tons of tutorials documentation discussion forums etc that help you to learn the language it's free to use that's always a plus we definitely don't want to be paying for more than we have to and it's super easy to install and set up in fact the installation requires only one single terminal command and after that we just use a combination of python and kp files so roughly speaking how does ki work so i'll give you the general rundown qivi is a layout and widget building system which means that most of the elements that we use are widgets and we organize the widgets with layouts stuff like labels to display text images or image widgets to display images these are all different kinds of widgets and we can use stuff like grid layouts float layouts etc to position the elements relative to each other most of the ui building or layout building is actually done in the dot kv or the dot kivi files using some ki specific syntax don't worry that is actually really really easy syntax to learn and it's very intuitive once you get the hang of it most of the app logic is handled in the python files however now this isn't to say that there is an absolute all ui is done in kibi all logic in python there's a little bit of cross over there so we'll try to explore a variety of scenarios in which we'll see both of that and we can use variables in the qivi files to keep track of state now the really nice thing about this is that these are updated automatically when we attach state to variables called properties this means that if we have some text attached to a state as soon as that text changes through the app logic it is updated automatically in the ui that's really fantastic stuff as we don't have to then go in and manually change it so roughly speaking how will these tutorials work because there's going to be a lot thrown at you in a short time well i do want to stress that there are many options for layouts and widgets what i will show you is not by any means the kind of end or be all of things there are going to be lots of ways which we can accomplish the same tasks using various kinds of widgets and layouts we're just going to explore a few core layouts and widgets as the library is quite massive and there's just too many to cover in one course we're going to build layout layouts and widgets with both the kv and the python files most of the layouts will be handled in kivy files we'll just do a little bit of that layout in the python file is this is how you'll see in most qivi applications most of the logic is geared towards building our app which means that we won't necessarily be covering widgets that aren't directly related to this app itself now there are again likely many ways of building the same app so if you look at the solutions that we provide and then you come up with something entirely different that also provides the same solution that's totally fine i'm not going to say one way of doing things is better than the other but there are definitely different situations in which some solutions work better than others and that's just the nature of uis there's usually many ways of building the same thing now again we're going to focus only on the desktop application side of kivy we're not going to dive into the mobile development at all but not to worry there will be plenty of material here okay so now you know a little bit about kibby let's get to the fun stuff before we can do that i guess we'll have to do some installation don't worry that will be super short and it's actually pretty much the same process for windows and mac so we can bundle it all into one go okay so stay tuned for the installation tutorial thanks for watching and we'll see you guys what's up guys welcome to our tutorial on installing kibby we have a fairly short and simple one ahead of us all we need to do is first visit the kibby webpage this will be where we can find any kind of documentation any extra tutorials examples etc and then we're going to install kivy onto our system now this will be done via the terminal or the command prompt depending on your operating system although the command used to do it is pretty much the same so let's head to a browser and get started all right so i've got a browser open here this is chrome although it doesn't matter which one you use we're just going to start by searching for kibby okay we're going to click on this first link kibby.org and this is the kivy home page so this tells you a bit of information about the current latest release that's going to be 1.11.0 that'll be the one that we'll be using although depending on when you're watching this tutorial series it could be a different version okay so it's just the home page gives you a bit of information about what makes kibby so great you can search for download instructions here although i'll show you how to do all that good stuff otherwise you can actually just search for the documentation and that will give you any kind of api documentation that you might need okay so um feel free to explore this web page a bit if you want a documentation on a specific widget you can actually just search for the widget name and then kivi and you can find that for example let's say i want to know about a label in kivy i can do this and then i can just probably click on that first link you can see i've already visited it and it gives me some information about the api reference okay so feel free to check those out although likely they won't mean much to you unless you take a look at the other tutorials we'll go through all of this stuff on our own time otherwise what we can do is actually uh get rid of this and we're going to open up the terminal so for you mac or linux users this is the terminal app for you windows users you'll want to run the command prompt make sure if you're using windows you are running the command prompt as an administrator and that will make sure that you have the necessary administrator privileges okay otherwise we're going to install stuff through pip if you prefer a different system then you can do things that way but i find pip is usually pretty reliable we're just going to actually what we'll do for mac and linux users we're going to go sudo pip install kibi okay and i'm just going to provide my password okay and this should install the kibby package so it says for me requirement already satisfied because i do have the latest version installed in fact i think at this point it's 1.11.1 not 1.1.0 although it doesn't matter too much there's not a huge number of differences between the two if you are using a pc you'll want to do the same command minus the sudo so this will just be pip install kibby like so okay again make sure you're running it as as an administrator that does the same thing as the sudo command just gives the administrative privileges otherwise that is all we needed to do so that's actually it really short one just wanted to make sure we have kivy on our system and we're good to go so in the next section we're going to be starting up basic kibby project running some really simple code and talking about the kibby project structure so stay tuned for that thanks for watching and see you guys in the next one hello guys welcome to our tutorial on running a kivy program all we'll do here is write a really simple qb program just that we understand the basics of structuring our project and we'll run it so we get familiar with the process so the specific tasks will start with starting a new kibby project then creating python and kivy files then we'll add a custom widget in our case this is just going to be the base app with perhaps a button or something just to showcase that and then we'll run the project through terminal so head on over to your text editor of choice and let's get started right so the text editor i'll be using is visual studio code it doesn't matter which one you use as we're going to be writing the code here and then running it through terminal or command prompt but if you're using visual studio code just a couple of things to get started we'll need to make sure that we have the python extension installed so go to extensions search up python okay and it's going to be this first one it's the official python extension through microsoft and just helps us to write python code comes with the autocomplete and all that good stuff okay make sure that's installed and we should be good to go on that front otherwise we're going to go ahead and start a new project folder i'm going to put mine on the desktop so i'm just going to get a new folder going i'm going to call this my language learner with qivi okay and then we'll open that up in visual studio code so go ahead and open the folder and we should be good to go again doesn't matter which text editor you use also another thing in some other courses we do a format where we have kind of the practice or the kind of getting familiar with the concept and then building the project separately we'll be doing both at the same time so we can write all the code in this one project and if there's any kind of archive code that we have written previously that we need to delete moving forwards i'll be sure to stash that in a kind of a code archive so that we have all that code um somewhere okay all right so now from here we can close up the welcome screen i'm actually just going to start up a new file and this will be a python file so start a new file we'll save it as main dot pi doesn't matter too much what you call it just as long as it has the dot pi extension to dictate that's a python file okay we can go ahead and close that which is just going to zoom out a bit and we are i'm gonna actually select a higher version of python because that one's a bit old 3.8.2 is the latest one that i personally have on my computer okay so now that you're in main.pi we need to um just add a few a couple of imports and then a few lines of code to create a kivy app and then just the one line of code to actually run it okay so just bear with me here i'm just going to write the code and then explain what it's all doing we'll need to import from kivy.app the app class no that should be low uppercase okay we'll also want from kivy.uix dot button we want to import the button class so this is actually the button widget okay so from here we need to create an app class now this app class is going to serve as the kind of the entry point or the root of all future widgets and layouts and other parts of the app so i'm actually just going to call this my language learner app so this class is going to be called language learner app okay and it needs to subclass the kivi app class like so okay again just bear with me here i'll explain what each line is doing towards the end we're going to override the build function okay needs to put in self and it needs to return a widget so in our case we we don't know any of the layouts or anything just yet so we're just going to return a simple widget which will be in our case a button just that we can demonstrate the click functionality now button can take in anything it can take in some text can take in an image it can just take nothing and display maybe a color or something in our case let's have it display some text so we'll pass in the text parameter and pass the string into that and we'll just say the classic hello world okay so we've created our class all right we have a way to build and actually draw something but we need to now run it so we're going to have our classic if underscore underscore name uh should be 200 scores is equal to uh underscore on school main okay this is kind of a safer way of doing the check then in that case we're going to run the language learner we'll need to create an instance of it so we'll do language learner app instance dot run like so and that's all we need to do okay by the way i think visual studio code is not familiar with the kibi library that's why we're getting these warnings and if you hover over it says unresolved import don't worry about that it should work just fine okay so before we actually go to run this let's talk a little bit about what is going on here well so far all codes in the main.pi file and this is going to be pretty typical you'll be getting setup your entry point into the app all that logic is going to be in your python files when we go to build special widgets all that layout stuff is going to go in our ki file but for now all the codes should be here so we just start with a couple of imports you always need an app um probably most of your applications will have buttons in there at some point so you'll be seeing a lot of buttons and the next thing that we need to do is create a subclass of the kivi app okay doesn't matter what you call it just as long as it ends in app okay and it's a subclass of the app okay every single entry point into a kibby program needs to go through a subclass of kivi's app class we need a build function within that that needs to return some sort of a widget so what we could actually do is if we wanted to return an entire custom screen we create a widget and that whole screen becomes a widget and then we return that okay we're not doing anything complex here we'll kind of get into more how to do that later on for now we just need to return some sort of widget and if for us that's just going to be a button because we haven't specified any size attributes or anything this should take up the whole of the window okay and then when we go to actually start up the program we just do the instance dot run and that will basically build the app which will return the widget and it goes from there okay so this is going to be kind of the beginning point of all of your kibby programs so we can actually turn to terminal or command prompt to run this thing we're just going to navigate to where we saved this i believe mine is under desktop and it was language learner with kibby okay simple ls will confirm main.pi okay it's good stuff i can run this simply by doing python main dot pi and just make sure main.pi is replaced with the name of your python file and actually i need to go ahead and save this first make sure that this x is up here otherwise you have unsaved changes okay so um that was just a command s by the way or control s depending on your system or you could just go to file save okay let's turn to terminal we'll go ahead and run that command and as you can see the window pops up so the window has a default size it can be moved around it can actually be resized if you really want okay and gives you on the terminal side of things a bunch of information about the current version of kivy that you're using in this case the 1.11.1 so let's turn to this as you can see there's a something with this text in the middle if i click on it it turns blue so this indicates that it's a button which makes sense we're returning just a single button as the only widget in this specific app okay so that's all it's doing we click on it it turns blue but we haven't written any actual like handler code so nothing exciting is gonna happen there now the last thing i want to do here although it's not needed just yet is going to be to start up a kv file okay that's because i want to talk about the specific naming convention um if you do want to stop running this at any time just close the window turn to terminal you can see that it's actually stopped running okay so we're going to create a kb file and that's going to again contain most of the layout code so a python file will hold all the logic and a little bit of layout code the kv file will hold all of the layout code or most of the layout code so when we're creating qivi file we need to attach a kivy file to a an app class okay so in this case this one's called language learner app when we create a kivy file we need to name it language learner all lowercase without the app okay or just whatever this class is called minus the app ending so for me this is going to look something like this so we'll create a new file i'll go to save as and this is going to be language learner again all lowercase dot kv okay so just take out the app part otherwise it's going to be the same this will say it doesn't have any stuff for the kv extension we'll not need to worry about that for now the final thing that we'll run in here is something specifying the version of ki that we're using so at the top we're going to do hashtag colon kibby and in my case it's 1.11.1 or just whatever version of kivi you're currently using okay so let's give this a save and let's give our main dot pi save and we'll leave it at that so the next section we're going to be talking about sizing and positioning widgets where we'll start to build some more interesting layouts than just a single button but otherwise you now know how to build and run kv programs okay stay tuned for that thanks for watching and see you guys in the next one what's up guys welcome to our tutorial on sizing and positioning that's actually part one of the sizing and positioning kind of mini series because there are lots of different techniques and ways we can go about sizing and positioning elements according to which layout you're using and what kind of proportions that you want so here we're going to start with something fairly simple we'll just uh add widgets first through the python file so we're not going to touch the kivy file just yet we're then going to learn about how to use the pos attribute to position widgets i'll use the size and the size hint attributes to resize our widgets okay so let's head to the code and get started all right last time we left off here just by creating our very very simple app it really just has this button with some text and that's basically all it does now we saw that the button was positioned to fill the entire screen that means that it's x and y positions default to be 0 and 0 respectively and then its size hint weirdly enough is actually going to be a one and a one so that means it's just going to take up the entire width and the entire height of its parents we can actually override those to provide specific positions and specific widths and heights depending on kind of how we want our widgets to look so in our case because we're not using the kibi file we'll do so right within the button declaration itself so what we can do and i'm actually just going to close up to give ourselves some more room is start adding more attributes down here so we have a text attribute we're going to keep that as is but perhaps we'll want to add a specific position to this button so we can add a pause is equal to and then it takes in a tuple of two values actually you should add the comma um that is going to take in a tuple of two values that represent the x and the y values respectively now positioning in kibi starts with 0 0 being bottom left i know some positioning systems um i'm primarily an ios developer so ios is used for me a lot the zero zero is actually top left rather than bottom left okay so keep that in mind the origin is at the bottom all right so a smaller y value is going to be close to the bottom large y value close to the top smaller x is going to be closer to the left bigger close to the right so in our case let's say we want this to be 50 50. so it's going to be a little bit away from the left and a little bit away from the bottom so we can set just 50 and 50 here and this is the values in pixels all right let's go ahead and save this we'll turn back to terminal and we're just going to go ahead and run it to see if we can see any changes okay so good we're starting to see a little bit of change here we can see that this button which did start at zero zero down here is now shifted up and to the right okay so we can see the black background in here the background of our app defaults to black if we don't um add in a different color okay see that the button shifted but now it's off screen it's obviously still really big and in fact this is as big as the whole screen is it's just been shifted so the size is basically the same now there's a couple of ways we can go about changing the size we can pass in a specific size much like a position and that will represent a width and height and the way we do that is something like this just pass in size as tuple let's say we want to be 100 pixels wide and 100 pixels high okay there's nothing wrong with doing things this way however this is a static size just like the position is a static position so that means if the size of the window changes perhaps our sizing is not going to change either okay so ideally we would do responsive sizing and positioning we'll get more into those topics a bit later on at least with the positioning the sizing we can cover here aside from the size attributes each widget and actually most of the other layouts and other elements in kibby have a size hint attribute and the size hint attribute determines what percentage of the parent's width and height a widget is going to take up so whenever we add a widget to a parent so in this case a button is a widget and we're adding it to the overall app here okay whenever we do that the widget we just added is the child widget and the app or the widget we're adding it to is the parent so in this case the language learner app is the parent and the button is the child so if we do a size hint okay size hint like so this is going to be the percent of the width and the percent of the height of the parent that this is going to take up in size now widgets all default to a size hint of one and one so what this means is by default every single widget will take up 100 of the parent's width and 100 percent of the parent's height okay it's exactly the case with a button you saw it was as big as our screen however if we don't want to do that if we want to provide a manual size we can actually just enter none and none and then provide the manual size to get the exact sizing that we want okay so if we save this and then go to rerun it actually i guess we need to close the initial instance okay so we'll just uh clear this off we'll go to re-run it you can see that now we get a smaller much smaller button okay so it's 50 50 okay and it is supposed to be 100 pixels wide and 100 pixels high clearly that's not going to be big enough so let's increase the size by a lot we'll do 500 by 500 and that should be big enough at least to contain the text okay so we'll go to re-run it and there you go so you can see that's not taking up the whole size of our parents because we're entering an explicit size now if you do want to enter a specific size like this again make sure that you have none and none set for your size hint and all widgets default to a size hint of one and one so you have to do this every single time alternatively you don't have to provide a default size at all let's say i want this button to take up eighty percent of my parent's width and height okay and what i could do is i could just do 0.8 and 0.8 and then i don't have to pass in a size at all okay so i can do this now again probably need to close that up and i'm just going to rerun it okay so i didn't enter an explicit pixel value for the width and height but this is taking up 80 percent of my parent's width and 80 of my parents height because i specified it like this where possible i would actually recommend using size hints instead of regular sizes that way things are a bit more responsive okay because if i do size hint and my parents size changes then we're good to go however if i did just a regular size and did the size hint of none of none when i go to refresh this okay um you'll see that when i change the screen size the button size does not change which is very bad for when it's too small or much too big all right so that's all we wanted to cover here just a few things to really quickly recap what we went over positioning in kivy starts with zero zero at the bottom left so zero zero down here higher y values will be further up higher x values will be further right okay um all widgets default to a size hint of one and one so if you want to provide an explicit pixel value for the size then you need to make sure that you do size hint none and none okay alternatively you can provide just a hint and not size that's totally fine too if you want a percent of the parent's width and height and you want a responsive sizing we can use the positioning with the pixel values to provide an exact x and y positions if we'd like but there are other perhaps better positioning techniques which we'll explore in future videos for now what i'd recommend you do is play around a bit with changing the positioning and the size or the size hint of this button just until you become really familiar with this process and you're comfortable when you're ready to move on we'll explore some other sizing and positioning techniques using position hint okay stay tuned for that thanks for watching and see you guys in the next one hello guys welcome to part two of sizing and positioning here we're going to continue on with some of the techniques that we learned previously but we're going to expand upon them so make sure you're comfortable with the general positioning sizing and size hints before going to this section here we're going to actually create a custom widget we're going to subclass a button nothing terribly exciting but we're going to do this for a couple of reasons the first will be we'll show you how to pass in a size and position to a custom widget and also we'll learn how to set a default size and position for a custom widget as well right in the constructor or the initializer so let's head to the code and get started all right so a couple things this is where we left off last time we are just returning a simple button and we set the position size and size hint make sure again if you do want to set an explicit size in pixels you need to set your size into none of none also you'll note that there are two new files old code.pyenol code.kv i'm going to continue to put all the code that we write at the end of each section into these respective files that way we have an archive of everything that we've done up until this point because i'm actually going to be erasing this stuff here and we're going to be building a custom widget okay so that is going to be step number one and this is actually going to be how most of our projects go anytime we want a special widget with custom functionality where one of the built-in widgets just won't cut it will create a custom widget okay so let's say we want to create a funky button that has very specific properties we can have a class to do that um we can call this something like just call that funky button okay and it's going to subclass the button widget okay that means it inherits everything that a button has now again there are a couple of ways that we can go about adding the size and the position okay and that's all i'm going to do maybe some text nothing too fancy if we want we can actually add them when we create the button or we can declare them when we create the class so for now let's do it like we did before where we just passed in the parameters that means i'm just going to have to say pass here to specify that yeah i know there is a class here i'm not putting in anything for a specific reason okay so now what we're going to do is we're going to return that custom button in this case it's going to be our funky button okay it's still a button so it still has all of the button parameters so we could say text is equal to hello world okay if we want although it's not necessary um but just like before i can add in a specific position maybe we'll do 100 by 100 to move up a little bit and a bit more to the right if i want i can set my size but again i have to set the size hint first so size hint is going to be equal to none and none if i want a specific size in pixels if i don't and actually perhaps in this case i don't then i'm just going to set this equal to maybe a 0.5 and a 0.5 that way we it's going to be half the width and half the height and i don't have to worry about trying to figure out what that value is in pixels so if i give this a save and actually i'm going to change the text to funky button that way we can maybe see the differences from before okay so we're going to clear out the terminal we're going to go ahead and run it again now you can see funky button okay so it's got our new text it's got our new position and our new size and we're good to go other than that it acts very similar to a regular button now this can be kind of annoying if i know that every single funky button is going to take this exact position and this exact size in that case it would be much better for me to put these into the initializer here that way i don't have to rewrite them every time so i can absolutely do that what i can do is i'm just going to copy this and comment this out for reference okay what i can do instead is actually override the initializer so that's what i'm going to do in my funky button class i'm going to call upon the initializer init like so okay it's going to need to take itself and it's going to need to take in any number of arguments um so we're going to do kw arguments here okay then we need to call upon the super version of the constructor so we're going to do super funky button and self okay dot init okay and we're just going to pass in the arguments so that any other arguments that we might want to pass in are going to be handled automatically we don't need to kind of process those manually this way i can take in no arguments and i can just set everything up manually so let's say again i want this exact kind of these exact dimensions what i can do is just copy these and pass them in here of course these are attributes that belong to the current class so we have to put self in front of them okay otherwise exactly the same in fact why don't i change this up a bit so that you can see the difference we're going to leave this 100 100 and we'll do 0.25 and 0.25 so we're dealing with a much smaller button now now what i can do is actually just get rid of all these parameters and all i need to do is call it like this and we'll go to its default values so if i go to terminal clear this run it again oh looks like we are getting some sort of an issue here oh and actually that's because of these commas okay so we don't want these commas because we're no longer passing them in as a list of values okay so let's do that let's go back here okay and there we go so we get not exactly the same results because we did change the size of the button but it's much smaller you can press it still has the text has that position and we're good to go okay so just a couple of different ways you can do things when you're dealing with custom widgets as most of what we'll be building in the future will revolve around these custom widgets okay so and that's it for now give these guys a little bit of a play around until you're really comfortable with things um you can subclass any kind of widget in this case we just did a button because it comes with the default background color and you can kind of see it definitely play around the size text size hint um all that good stuff if you'd like try things this way try things this way and when you're ready to move on we'll start learning about the kv file itself okay so stay tuned for that thanks for watching see you guys in the next one what's up everyone welcome to the third part of sizing and positioning here we're finally going to dip into the kv file and we're going to use this to handle some of the layouts positioning and sizing so our first task is going to be to link our custom widget to the kv file so that we have that reference then we're going to use the canvas within the kv file to specify the position and size so for now we're actually going to pass in the position and size of the entire element as is and we use the canvas to build sub elements or sub parts of this we're going to learn how to use the keywords self and root to get the current position in size or the parents position and size and we can use this to lay out our sub views so let's head on over to the code and get started all right so this is somewhat where we left off last time you can see that i've made some modifications here so i've cleared out whatever was in funky button before replace it with a pass and here we're returning that funky button again we've got the position of 100 100 we've got the size hint of none and the size of 500 by 500 so if we were to run this let me just show you quickly what it looks like okay nothing terribly exciting okay so although i would like to be doing all of this within my language learner.kv file i actually can't do everything there okay the reason being the language learner.kv is great for specifying layouts where there's already a known size and a known position okay that's totally fine if i want my widget to maybe take up the entire screen because then i don't need to make any changes to the position or the size however i do want to demonstrate the concepts of using the root and self keywords which is why i've actually changed the size and position and i need to enter these manually okay so let's hook this uh this funky button up to our language learner.kv so what we're going to do in the kibi file is as we're accessing custom widget we need to open up our angular brackets and put the name of the class in here so in this case it's going to be funky button like so and then we can specify our attributes followed after the colon here and using indentation so very similar to python we're not going to work with parentheses or brackets everything is based on indentation so any attributes here and here these are going to be attributes of my funky button okay what i'm actually interested in is the canvas so i'm going to open that up again start with a colon and then anything within here is going to be specified uh is going to be a part of my funky button so i can specify different colors different shapes etc all that good stuff so let's say i wanted to maybe create some sort of a rectangle within this button i'm not sure why i want to do that at this stage in time but that's actually going to be a lot of what we'll be doing when we go to build our app for example lending borders those will have to be rectangles we'll be using rectangles to represent the progress bar as well as the grid okay so um in this case i'm actually going to start up a rectangle like so okay again the colon and the indentation and here i can put my attributes now i did mention that all widgets default to a size hint of one and one well this rectangle within the canvas is not a widget okay so therefore it doesn't actually have a size hint attribute we're going to have to use the self and the root keywords to know exactly how big um and exactly where we want this item to be relative to the parents okay we'll get into that in just a second so let's see what will happen if i try to just put in some x and y positions so we'll do position and this time actually we don't do position equal to some tuple we're using the dot kv syntax so we have to do position colon and then instead of a tuple we're just going to pass in the values directly so for example 50 50 will look something like this okay similar similarly the size is going to be done in the same way note the colon here and we'll do maybe 100 by 100 i believe this rectangle will default to white okay so let's go ahead and run this and just see what happens ideally what we should be seeing is our button that has this position in this size it's got nothing on it no text or anything and it should have a white rectangle somewhere in it hopefully 50 units to the right 50 units up and a size of 100 hundred okay let's just see what happens here okay well that might not be exactly what we were expecting because this rectangle this little square is supposed to be part of this button but it's clearly overlapping and actually going well past the button it's almost as if 5050 started from here and in fact that is exactly the case because we're not using any kind of a relative layout the 50 50 is actually 50 from the absolute origin remember origin is here 0 0 so it's only 50 units up into the right from the origin not from the parent's origin okay so if we actually wanted this to be up here we would have to get the funky buttons x and then add 50 to that as well as the y the size we can keep pretty much the same because it's going to be the same regardless size is completely independent of other elements positioning is all relative to some point in time we just need to make sure it's relative to the right point now because we don't want this to be 50 50 from the origin again we're going to have to get the x and y position off the funky button that way we can just add it to this and hopefully that will give us this effect where it moves up to here okay so let's do this what we're going to do is we'll do self.x plus 50 okay and then we'll do self dot y plus 50 and hopefully what this will do is it will get the x position in this case 100 and then we'll add 50 to it we'll get the y position in this case 100 as well and it will add 50 to that so hopefully this should bring it up to here and again the size is independent so we don't need to worry about that let's go ahead and close up and we'll restart this okay that's great stuff so it's given us exactly the desired effect okay we can click on that because it's still part of the button as well as outside of it and so that has worked so the reason that this has worked is because we've actually passed in a position when we created the button and it actually wouldn't have mattered if we'd passed in a size hint or an explicit size either way there is at the end of the day or i guess this is actually position wise um in this case we have passed in an x and a y position when we created the button and so we know that self.x and self.y will be populated when this is called now it did mention the use of the root keyword and although it will probably give us the same behavior here we should demonstrate it with another example just to show you the difference between the two so if we try to do root dot x oops and roots dot y here we'll just go ahead and close that and we'll rerun the program we're going to get the exact same results here okay that's actually expected that is what we want but i'll show you a scenario where that's not going to be the case they're not going to be exactly the same so let's say within our button we want to add another button okay as a child we can actually do that pretty easily all we need to do is add in a button widget like so okay and then we can treat this just like we would any other widget so maybe we want a specific size and size hint maybe we run a specific position okay so again we're going to do maybe a position off we'll try 50 and 50 and see what happens okay we'll try a size hint this time this is a widget so we can pass in a size hint we'll do none and none because i don't want that kind of default one and one and then we'll pass in a size maybe we'll set this size equal to we'll do 200 by 200. okay so let's give this a save let's head on over to terminal and we'll rerun this to see what happens okay so we're getting a button again the same issue as before 50 and 50 and that's because um this is 1550 from the origin all right now note also that the two buttons are going to be the same color so let's change up the colors that way we can kind of tell them apart all i'll do is i'll go into my button here and i'm just going to change up the background color attributes actually i'll set that at the bottom the background let's go color and it's going to take in an rgba code so it's going to be red green blue and alpha and we just need to pass in values between 0 and 1 for each of these so let's make this pure red we'll do one zero zero and then one because pure alpha actually that needs a comma okay and we'll stop running this we'll give it a re-run hopefully that should give us that red color okay it does good stuff okay so let's see what happened when i tried to do myself.x and self.y just like before okay so self.x plus 50 and self.y plus 50. we'll give this a save head on over to terminal and we'll rerun this okay that's not even running that's actually giving us an error but it worked fine for this so what's going on well the reason it worked for this is because when we created the funky button we explicitly passed in an x and y value with the position variable okay and that means that when it comes to access this self.x and self.y and in fact i'll do i'll change it back to self.x self.y these already populated however this button has no knowledge of self.x it has no x value assigned to it explicitly what we can do is use the root elements or this elements x and y as a reference point so if i change this self to a root okay this should fix the problem i'll go to rerun this and that's exactly what we get we get the problem fixed we get the exact desired result okay so hopefully you can actually see the differences between the two um we can use self.x and y if we've explicitly assigned an x and y value to that widget in this case it belongs to funky button but um with this regular button it didn't have an explicit x and y so we had to use the root x and y or the root widget which is going to be this guy let's use its x and y as reference points all right so play around with that a little bit when we come back we're going to start talking about using layout tools to lay out our widgets properly so stay tuned for that thanks for watching see you guys in the next one what is up guys welcome to our tutorial on sizing and positioning part four this will be the first exposure that we have two layouts and layouts provide a nice way for us to organize and position our widgets in various different ways so the first layer we'll focus on will be the float layouts this is one of the easiest ones to use gives us the most flexibility and this will also expose the position hint attribute we'll then compare the position hints to the regular position and talk about why you should as much as possible be using position hint rather than just a regular position so let's head to the code and get started all right so you can see that we're actually starting from a really clean slate i got rid of that custom button subclass we don't need it however we will need some custom subclass because we're going to be attaching this float layout to that so i'm going to create a class here and this is going to be a class we'll use in our final game we might as well start building things up now so i'm going to call this my game screen okay this is going to be a subclass of the widget class which we actually don't have access to yet so i'm also going to add the import so we'll go qv.uax.widgets and we're going to import the widgets class so the widget is just a very generic kind of widget uh doesn't have any specific button or label or anything like that functionality button actually inherits from widget but it has all the same attributes it has that size hint of 1 1 and all that good stuff okay i'm going to leave this blank for now we'll just do pass and we're going to just return a game screen okay so if i don't specify a specific position and a size hint then we know that it starts at zero zero and it fills the entire screen okay so we don't need to worry about passing in an x and a y or a width and height okay we know that's taking care of so we can then go to language learner and get access to this class so this is going to be our game screen like so okay and then we can go from there all right so the main purpose of this particular tutorial is to focus on the float layout so that's going to be the main layout for our application i'll be using it several times so the nice thing about a float layout is it gives us total flexibility as to where we want to place the elements we can place elements on top of one another we can place elements um a little bit further right or left than the others and their positioning doesn't affect anything else okay it's really just the elements floating and are put exactly where we want them to that does however mean we have to put explicit positions and you often explicit sizes for a lot of the elements as well so it gives us fine-tuned control but can be a little bit more work to set up than some of the other layout types okay so we're not going to worry about the canvas just yet okay we can ignore that for now what we are going to do is specify a float layout okay this acts for all sakes and purposes just like another widget so we can add it to our game screen just like this oops and then we can access the game screens x and y through the root okay so for example if i wanted to specify that this would have an explicit width and height and let's say an explicit size i could do size is equal to maybe root.width and roots.height okay that would just make sure that the size is exactly the same as the parents okay in this case that would fill the entire game screen or the entire window okay now with float layout we actually don't have to specify a size it will take on the size and the positioning of its elements okay if we do supply a size and a position then it will kind of affect the layout a little bit so i'm actually going to get rid of this for now we do however want some child widgets within the float layout or some children and let's just do two buttons okay so do button one okay and then we'll do button two cool okay so the first button can have some sort of text that just says button one okay that's fine and then we can have button two text for the second button so again make sure that the indentation is all good it doesn't really matter too much about the spacing i often put spaces between my widgets but this is just kind of an organization thing okay cool so with these buttons they don't have an explicit uh positioning or rather they do have an explicit positioning and sizing but it's probably not what we want because each button is going to fill the entire screen and it's going to start at zero zero again it's undesirable for us so what we're going to do is provide explicit positionings and explicit sizing so let's say we were just to do things manually we can do a position of maybe we'll do 100 by 100 okay we'll do a size hint none and none because we want to pass in a specific size and then we'll do a size of maybe uh we'll do 200 units wide and 100 units high okay actually that's really not going to be very big we'll do 300 and 200. okay so we'll do a very similar thing for this just going to copy this okay one again same size hint and size we do want a different position however this button is going to be lower down because it's only a y position of a hundred let's make this one much higher up we'll give this a y position of 500. okay so let's give this a save and we'll just run it just to make sure that everything is working fine okay looks pretty good to me and that's because again 100 100 and this case 100 and what did we say 500 okay so this really isn't too different than if we had just taken these and stacked them in game screen ignoring the float layout completely the benefit of using the float layout is that we don't have to just do position we can do a position hint okay so kind of similar to the size hint position hint works to provide a percentage of its parents or a percentage of the root and the benefit of doing that is that if the screen changes in size or in position the widgets respond accordingly so if we go back to here okay let's go back to here if i adjust this note that the the x and the y positions stay the same as well as the width and heights and that might be kind of undesirable when it gets really small or again when it gets really big so instead what i'll do is i'll replace the position with a position hint i'll have these be ten percent of the total width of my parent have it be ten percent x okay and then we'll do kind of ten percent here and then maybe we can do like sixty percent here or fifty percent okay so for that we're going to replace our position with a position hint so we're gonna position hint like so and this is kind of a weird format this is actually in form of or form of a dictionary now we can pass in x and y values so x is equal to something and then y is equal to something alternatively we can pass in right and top okay so remember x and y are going to be from the bottom x of 0 and y of 0. okay we can do things relative to the top and to the right as well okay we'll stick with x and y for now just because again this is kind of just learning the basics for now so if i wanted this ten percent of the width from the x-axis i could do point one okay and then we'll do the same for y point one okay then we're going to just copy and paste it over to here i want the same x so 0.1 again but maybe i want this point we'll do 0.6 of the way up okay 0.6 there okay now look at what happens when i go to refresh this we'll clear this out and then we'll go to run it again okay so we're getting something a little unexpected and that is just because um it's trying to conform to the float layer which actually doesn't have an explicit width and height so we'll actually just pass in an explicit position here um so we can do a position hint or we can just do a position and we'll just do zero and zero okay and we can do a size this is just going to be the root dot width and root dot height okay so that should take care of the issue let's go ahead and save get rid of that and rerun it okay there we go good stuff okay so this one actually doesn't look too different from what we had before but the benefit is that now you can see that these buttons are really responding to how the screen resizes that is why where possible we should be using position hints just like ideally we should be using size hints unless you know that a widget is going to stay exactly the same size regardless of what happens on screen you should be using a size hint so for example if we wanted these buttons to take up maybe 10 of the screen's height we'll do a 0.1 okay and if we wanted them to take up maybe 80 of the widths that we have 10 on either side we do 0.8 and a 0.8 and that way we can actually get rid of the size here and here we give this a save and close this up and we can rerun it and that way we get a much more responsive ui okay you can see it's really responding to that resizing all right so that is it for now just wanted to introduce you guys to the idea of the float layout and also how to use position hints and size hints and why we should be using these where possible if you need to hard code a width and height you know the element is always going to be at that specific size you can just use a size if you know that an element is always going to be a specific position you can use a position however if that size and position need to be responsive and need to resize according to the rest of the screen you should be using your position and size hints instead so definitely play around with this a bit and make sure you're comfortable and familiar with everything and when you're ready to move on we'll learn about grid layouts okay so stay tuned for that thanks for watching see you guys in the next one hello everyone welcome to the fifth and final part of sizing and positioning we just got exposed to the float layout here we're going to explore another kind of layout and that is going to be the grid layout this will be fairly simple to use we basically have a system where the different widgets inside the grid are automatically organized into rows and columns in our case we're just going to populate the grid with buttons keep things simple while we're exploring this concept so let's head to the code and get started all right so you can see that i've cleared out a lot of language learner dot kv main dot py just still has the empty game screen widget here i got rid of those two buttons but i still have my float layout starting at zero zero and as wide and high as the parent okay cool stuff so we're going to stay within this float layout and we're going to add the grid widget to here all right or the grid layout rather so we can add this just like we would any other kind of widget just going to do grid layout like so okay and then away we go now grid layouts are i guess easier to use than float layouts in that we just have to specify the number of rows or columns that we want and the widgets inside are set up automatically in the order in which we add them however it's a little less customizable than the float layout and there can be some unexpected behaviors if we're not ready for them okay so before we add any widgets to this grid layout we just want to do a few things first of all we want to specify the position and the size of this grid layout so that we know basically how big and small to make the grid itself and how to position and size the elements within it so within our grid layout we're just going to set the position um i guess we should do a position hint seeing as i've been saying that's what we should be doing all along okay i'm gonna set an x value of maybe we'll start at a point one okay i'm going to set a y value of maybe we'll start at a point uh maybe we'll start point three and see how that goes okay so we've got our position hint down we want the size hint equal to none and none and the reason we're doing this is because when i pass in my size i want to be able to get the roots.width times 0.8 that's fine i actually could have done that fine with the size hint i could have just done a 0.8 but where this becomes different is i actually want it to be a square so i want my height to also be the root.width times 0.8 if i'd done a 0.8 here that would have taken 0.8 of the height which would have given me a distorted rectangle rather than a square okay so that'll be one of the few places i actually advocate using a size uh hard coded in other rather than a size hint so if i were to run this right now you probably wouldn't see anything and that's because we haven't provided an explicit color and this has no widgets of its own so it will just blend right into the float layer which blends right into the game screen however what i'm going to do is i'm going to populate this with some buttons what we want is four buttons in a grid with the same number of rows and columns so we want a button here here here and here so four buttons total in order to achieve that with a grid layout it's actually super super easy all we need to do is specify the number of columns or rows that we want in this case we'll just do columns equal to two so we have one column and one column and then if i were to add four buttons like this button one two three and four because i've specified two columns it will put the first button here the second button here the third button here and the fourth button and the bottom right okay does this automatically just do to the way in which we're adding the buttons and the number of columns we've specified also you know that buttons are widgets so they have a size hint of one and one which means they'll start at the bottom left of their parent and they will grow to fill the parent the nice thing is because we're putting these in a grid layout what this will do is it will fill the current row and column but not go past that okay so it will basically have four buttons each one taking up exactly one quarter of the grid layout in the correct place with the correct size automatically okay so hopefully you're starting to see why kivy is so popular and why it's such a great library so we're actually not going to add in any other attributes to these buttons you know what i guess we could add in some text or something just to differentiate them we're going to say text is going to be button one we'll do the same for here and the same for here you don't have to leave the spaces by the way again that's just something i like to do to kind of separate out the widgets but it doesn't really matter too much here this is not exactly production level code okay so we'll go ahead and save this let's go back to terminal clear it out let's run it to see what happens okay so we're getting something wrong here size hint is none of none it doesn't like that oh and that's because i didn't equals instead of the colon okay let's go ahead and clear that out and we'll rerun it okay so not exactly what we would expect but almost there and actually you know what this is exactly what we'd expect because they put the size to be quite massive okay um so you know let's make this a lot smaller so it fits properly blue position hint off maybe we'll do point three okay we'll end this um yeah okay so we'll do a point three y of 0.3 as well uh we'll do the root.width times point i'll do 0.4 and then 0.4 hopefully that should actually fit within the bounds of our screen here okay so let's go ahead and rerun this okay yeah there we go much better so easier to see we've got the position all set up nicely you can see that our buttons are now perfect squares okay they're also taking up exactly the right amount of space and are in exactly the right of positioning i didn't specify any size or positioning for any of these buttons okay i've only specified the number of columns i want the size and the position of my grid layout and it took care of the rest of the work for me so i can press my buttons and you can see that they are clearly separate entities really cool stuff guys okay that's actually all i wanted to cover here just want to show you the basics of a grid layout just make sure um to understand that it will lay things out in the order in which you add them and also depending on the number of rows and columns you had so for example if i just had three columns here then you can see that would actually get quite a distorted version of this grid and go ahead and run that you're going to get three items at the top and one at the bottom it does divide the total width among the number of columns in this case the the total height among the number of rows although we didn't specify the number of rows so do be sure that um it will take on this specific shape based on the number of columns and the number of widgets you've added and the order in which you've added those widgets all right otherwise definitely play around with those a bit in the next section we're going to be exploring a new widget which will be a label this will be just a way to display some static text so stay tuned for that thanks for watching see you guys in the next one

Channel: Zenva

Views: 56,337

Rating: 4.9126921 out of 5

Keywords: zenva, zenva lounge, tutorial, programming, coding, software development, web development, online course, python, course, mini, 60, minutes, hour, kivy, basics, app, development

Id: 9JH8r8mz0g4

Length: 59min 1sec (3541 seconds)

Published: Sun Aug 16 2020