Simple Python App with Kivy - Step by Step GUI Tutorial

hi everybody so recently 46 of you guys have voted for a tv mobile app project and while i'm still working on it i thought it would be nice to film a quick introduction to tv just to make sure we are getting familiar with some of the commands so today we are going to build a very simple greeting app where we fill in our name and we get a hello greeting in return we will begin by installing tv inside our working environment now because i'm using anaconda i'm going to type conda install c conda dash forge tv and if you guys are not using anaconda you can install it with pip install tv next we will copy the starter code from the description of the video and we will paste it inside a code editor then we will save this code as a python file somewhere on our computer in my case i'm going to call this file say hello dot py and now we can go ahead and run this file just to have a quick peek we will open our terminal once again we will type cd which stands for change directory and we will paste the same folder where we saved our app and once we're in the correct folder we will simply type python say hello dot py and enter and once we do that we get a brand new blank interface window popping out and the name of this window will be a hundred percent match to the name of your app class and before we proceed with adding widgets let's quickly go over the starter code so with these commands we are importing all the different widgets we will use for our app and right below we are initializing our window object by creating a class for our app and even though we were able to get away with using classes during our tinter our deer pie and our pie q85 project you cannot avoid classes with kiwi so realistically the only requirements that kb has is an app class with a built method that can be run as soon as your python file is being executed cool now let's begin by setting the number of columns we would like our grid layout to have we will do this by typing self dot window dot calls equals one at least in my case if you guys have any questions regarding classes or the self keyword definitely leave me a comment below i want all of us to be comfortable with classes before we move on with building the actual mobile app with kivy now in order to place widgets inside our window object we will type self dot window dot add underscore widget we'll open a set of brackets and inside them we will specify the type of widget we would like to add now in my case i'm going to start with an image widget with a capital i we will open a brand new set of brackets where the source attribute will equal the url of our image file in my particular case that would be logo.png because my image is saved in the exact same folder as my sayhello file and once we run this file this is the result we get now if you guys want to use the exact same logo that i'm using just simply download it from a github account next we will add a label widget with a capital l where the text equals to what's your name and we will call this widget self dot greeting then we will copy this command from above we'll paste it right underneath and we will specify self.greeting inside the add widget brackets and once we save and rerun this file we can see our label inside the window okay now let's go ahead and collect some user input for this we will type self dot user equals text input in camel case and since my particular app is only asking for a name input i'm going to set the multi-line attribute to false and once we initialized our input widget we can go ahead and add it to our window we will copy this add widget command and we will paste our user variable right inside it and once we save and rerun our file we can see a brand new input inside our window we can type our text inside it and it will only take in a single line as soon as you type enter nothing happens and last but not least we will add a button widget by typing self dot button equals button with a capital b where the text equals to greet in all caps and then we will add this widget to our window by typing self dot window dot add underscore widget inside the round brackets self dot button and once we rerun this file we can see our greet button was added to the page but if we try to click it nothing really happens and that's because we haven't attached a callback function to this button just yet so let's define our callback function first to do this we would have to leave the scope of our build method and we will call this function callback this function takes in two parameters the first parameter is always self and the second parameter would be the instance which you can also call event or whichever way you'd like now what i would like to do within the function is to change the text of our label from what's your name to hello maria or hello to whichever name we type inside the input to do this we will type self dot greeting dot text which will target the text attribute of our greeting label and this will equal to hello space where we concatenate the self dot user dot text attribute which is the input we collected from our user that should include his name and in the very very end we will concatenate an exclamation point now the only thing left to do is to connect our callback function to a button press event and we will do this right before we are adding the button to our window we will type self dot button dot bind and inside the round bracket we'll specify that on press we would like to call the self dot callback function and since we've defined our callback function within the scope of our app class we must refer it as self.callback rather than just callback and actually when i'm looking in this i am missing my return statement which is right below my callback function and it shouldn't be there so let's paste it in the correct spot and now we can go ahead and type some kind of a string let's say maria and we will test our greet button perfect so our label changes to hello maria good job and now once we added all the functionality to our app we can move on with styling it so we will begin by designing our window object and what i would like to do is i would like to include some margins along the sides and along the top and the bottom of our app to do this we will type self dot window dot size underscore hint which will equal to a tuple where the side margins will be 60 and the top and bottom margins would be 70 and since our window object is quite smaller now it's important to place it along the center to do this we will type self dot window dot pause hint as position hint and this time it equals a dictionary where the center x key equals to 0.5 as well as the center y key also equals 0.5 sorry if my head is blocking it and once we save this file and rerun it we can already tell that our app looks so much better next we will add some styling to our label widget to do this i'm going to arrange my code slightly differently i hope you guys like it and we will add the styling attributes right inside our label definition so the first thing i would like to do is i would like to increase the font a little bit that's why we'll type font underscore size equals 18. and i would also like to add a color to this particular label and in my case it would be the turquoise color the same as my logo and you guys can just type it in it's zero zero ffce and once we rerun our app we can see that our text is now turquoise and slightly larger now let's move on with tackling our input field now if you guys noticed on your end whenever we type something the padding is quite awful there is way too much room between the bottom and our text and there's way too little room between the top in our text so let's first tackle this so first we will slightly rearrange our code just to make everything a bit more readable and then we will add padding underscore y which equals a tuple where the padding from the top to the text will equal 20 pixels and the padding from the bottom to the text will also equal 20 pixels now in the next line of code i would like to make this input field slightly shorter because it's very very tall and we can easily do this by specifying a size hint once again which will equal to a tuple where the width doesn't change so i'm keeping it at a hundred percent which equals to one but the height i would love to change it to be let's say half of what it is right now and we will do this by typing 0.5 50 and now when we look inside our input field and type something inside it it makes much more sense and lastly we will tackle the styling of our button now in my particular case i would like my input field to match the size of my button for this i will type size hint once again and a tuple where i'm not changing the width but i am decreasing the height by half now i would also like to have a bold text that's why i will type bold equals true and i would also like to change the background color of my button from the default gray to a nice turquoise that's why i'll type background color equals the exact same turquoise color that we set our label to but a curious thing will happen if we'll try to save this file and rerun it we can see that the background color of our button is actually quite darker than the color we specified now in my particular case it looks great and i would like to keep it that way but if you guys want to fix it on your end all you need to do is to add a background normal attribute that equals an empty string and if you do that and re-run your file you are getting the exact same color you specified now for my particular app this is a bit too much so i'm gonna reverse it back to the darker color and once we're happy with our app we can go ahead and test it now the first thing i'd like to check is what happens when we play with the size of our window cool so you guys can see that doesn't matter how big our window is or how small our window is the proportion between our widgets remains the same that means that our app will look great across multiple devices and the second test will be the functionality of our app so first let's say hello to myself hello maria let's say hello to my cat perfect and lastly let's say hello to slender men that live somewhere here in the forest just to be polite we will type slenderman greet hello slenderman see we included everybody good job if you found this video helpful please give it a like a comment maybe subscribe to my channel or share this video with your friends and family because each and every one of these actions is helping me a lot and if you're using this tutorial to build a different kind of project also please share it with me because i would love to see what you guys come up with now thank you so much for watching and i will see you very soon

Channel: Python Simplified

Views: 111,286

Rating: 4.9320593 out of 5

Keywords: python, python gui, python programming, kivy, kivi, kivy gui, python kivy, kivy app, kivy tutorial, python app, python gui app, gui app, python project, simple app, simple kivy app, textinput, label, button, button widget, callback, callback function, kivy callback, app class, kivy app class, build method, create gui, code gui, graphic user interface, graphic interface, python graphic interface, kivy graphic interface, application, python application, python program

Id: YDp73WjNISc

Length: 13min 11sec (791 seconds)

Published: Thu May 27 2021