Mobile App with KivyMD - Python GUI for Android - Binary to Decimal Converter

hi everyone today we will create a mobile app with kvmd which is officially the best gui library that i ever got to work with and i actually have a feeling that you guys will agree with me by the end of this tutorial so what we will build today is a binary to decimal converter and of course vice versa and the end goal of this project is to load it into our android mobile devices so of course we will do this together step by step and we will load it into the android device in the next few videos in this video we will focus on building the app first we will first copy the starter code from the description of the video and this will create an empty window object which we have called screen now usually mobile apps have a toolbar at the top of the screen or at the bottom of the screen and that's exactly what we'll do first so right underneath our screen call and actually let's replace this message we will create an md toolbar with the title of binary to decimal and then we will assign this expression to self dot toolbar and i haven't had a chance to film a class tutorial just yet so for now imagine this self keyword as a prefix to any variable name within the scope of the class next we will set the position of our toolbar to the top we will do this by typing self dot toolbar dot pause hint as in position hint equals a dictionary where the top key equals one cool and now the only thing left to do is to place this widget on our screen with add underscore widget and inside the round brackets our self dot toolbar widget and now we can save this file with ctrl s and we can run it from our terminal in my case anaconda and we will run it with python converter dot py where converter.py is the name of our file and once we're ready we will hit enter and we see our beautiful toolbar at the top of the screen now let's go ahead and add an icon button to the very top right so right below our positioning command we will type self dot toolbar dot right action items which will equal a list where the first and only value will equal an icon of rotate 3d variant which is a very conventional icon if you want to flip something you'll see it soon and just to make sure that my head doesn't block the rest of this expression we'll split it to the next line and since we indicated an icon we will also need to indicate a function that will be executed as soon as we click on the icon we will do this with lambda x self dot flip which is a function that we haven't defined yet and since we want to test how this code works we will definitely need to define it so right at the top of our class we will type def flip which will take in a single argument which is self and for now we will just print working so let's save this file and let's rerun it and as you guys can see our beautiful flip icon was added to the top of the screen and if we press it you can't really see it but our terminal will print working and if you guys want to see the full list of available icons just navigate to the link in the description and copy all these lines of code then save it as a python file and then run it from your terminal and you can choose your favorite icons from here so very commonly you would see dots another icon you may encounter a lot is a camera icon and they even added social media icons which is incredible next on the list of mobile app necessities is a logo now you can either use my logo you can download it from github or you can use any other image on your computer and we will add this logo with screen dot add widget and inside the round brackets we will specify an image widget where the source attribute would equal logo png in my case and if you're using any other image in any other location on your computer specify it here and we will also need to specify where this logo should be and we can do this with pause hint which equals a dictionary where the first key would be center x and its value would be 0.5 this will place our logo at the center horizontally and then with the help of our center y key we will place our logo almost three-quarters way up from the bottom of the screen vertically now let's save this file and let's re-run it and there's our beautiful logo next we will need to collect a binary number from the user for this we will create a brand new variable called self input which will equal to md text field where the placeholder text equals enter a binary number now i would also like to justify this text to the center of our input field and we can do this by setting the age align attribute to center additionally i would like to add some margins along the sides of this input field and we can do this by typing size hint which will equal to a tuple where the width value equals to 0.8 and the height value equals to 1 which is the default in other words the width of our input field would be eighty percent of what it used to be while the height of our input field would be a hundred percent as it used to be and we will also need to position this input widget so we will just copy this pause hint command from above we will paste it at the very bottom and we will only change its vertical position from 7 to point 45 from 0.7 to 0.45 and then last but not least as per the suggestion of paraglide 01 we will enlarge the font size from 16 to 22. we can then add this widget to our screen with add widget inside the round brackets self input and we can see that our beautiful input field was added to the screen and it only takes up 80 percent of the available width because we have 10 margin along the left and we have 10 margin along the right which is exactly what i wanted next we will quickly add two label widgets where the first one will be called label and this will equal to md label where the placeholder text will equal in decimal is and we will copy a few lines of code from above just so we don't have to retype it so i would like the age align and the pause hint which we will copy and paste right underneath we can get rid of the size hint and we will position this label at o35 vertically and to this we will add a theme text color which in the case of our first label equals secondary and then we will copy this entire label widget we'll paste it underneath and we will refactor it so this time we will name it convert or convert ted the placeholder text would be let's say 888 we would like it to be placed a little below the first one so we will delete the five and then we will change the secondary color to primary color additionally i would like to indicate that this particular label is very important we can do this by setting the font style to age let's say five where age represents a header and five represents the fifth order of importance and once we finished initializing these labels we will add them to the screen so let's save it let's rerun it cool so both our labels were added to the page but now everything looks a bit cluttered so let's maybe lift the input field slightly upwards yeah and it makes a lot of sense to place it at the center lastly we will also need a convert button now this is probably one of my favorite parts because unlike kivy kvmd has a fantastic shortcut for rounded corners so we will type screen dot add widget and inside the round brackets we specify an mb fill round flat button i know it's a long one but it's worth it trust me and then we will open another set of round brackets where the text of this button would be convert in all caps the font size would be slightly bigger than the default so we'll make it 17 instead of 16 and we will of course copy the pause hint command because who has the time to type it and this time we will place it at almost the very bottom so let's do point 15 and last but most certainly not least we will add an onpress callback which will equal to self dot at least for now flip we will create a proper convert function soon and we got ourselves a beautiful convert button cool and now let's add some functionality so instead of our default flip function we will specify a convert function and we will scroll to the very very top of our code and define it underneath the flip function so def convert but this time unlike the flip function we will need two parameters so the first parameter will be self as usual and the second parameter will be args arguments in other words each time you define a new function for a toolbar icon you always have to specify the self keyword as an argument while whenever you create a button widget you always need to specify two different arguments where the first one is always self and the second one you can name it whichever way you like just make sure it's there cool now let's move on so first we would like to fetch the number that the user provided us and we can easily do this by specifying self dot input dot text which represents the value provided by the user and because the type of this value is a string we will need to convert it to an integer so we will type and we will open a set of round brackets and here some of you might be shocked but the way we convert whole binary numbers to decimals in python is simply by adding a comma and 2 to the end of our int function it's that easy and then we can assign this expression to a local variable name which we will call val and this will equal our expression note that we didn't specify the self prefix in front of val that means that our variable exists only within the scope of the convert function if we will try to call vel inside the flip function it's not going to work while variables who have the self prefix in front of them can be accessed from multiple functions for example convert and build and now we can update the 888 placeholder with the converted value so we will type self dot converted dot text equals the string instance of val okay so i am aiming for 8 which equals in binary to 1 zero zero zero let's convert it boom we got eight and just in case let's try to get let's say five we got five and actually we don't really need to see those labels before we press the convert button so let's go ahead and get rid of them so let's delete the placeholder text from our converted label and then we will copy the placeholder text from our label label we will delete it as well and then we will scroll all the way up to our convert function and we will update our self label text to be equal to the placeholder and now if we save the file and we see that both our labels disappeared and now if we type let's say 15 and press convert both of them appear and one of the last things left to do is to take care of the flip icon button which will flip our conversion from binary to decimal to a conversion from decimal to binary and since this affects both the appearance of our app and both the functionality of all our widgets it makes sense to separate our app into two states where this particular appearance and functionality belongs to state 0 and the decimal to binary conversion belongs to state one so first we will create a state variable at the very top of our build function we will call itself dot state and this will equal to zero at least initially then we will scroll up to our flip function and we will begin with a conditional statement so if self.state equals 0 then we will first change the title of our toolbar with self toolbar title equals decimal to binary without the typo and we will of course update the text of our input field and we will say enter a decimal number and of course we will need to flip the state from 0 to 1. it actually makes sense to do it at the very top and additionally to avoid confusion we will also empty the text from both our labels for this we'll just copy these two lines of code we'll paste them underneath and we will refactor the value to an empty string as well as in our label label i just love saying label label okay so this takes care of state zero but what happens if we are in state one we will type else we will actually copy all these lines of code and slightly refactor them so we will refactor one to zero we will refactor decimal to binary into binary to decimal and we will ask for a binary number cool so let's press on the flip button awesome it seems to be working now let's test it so let's say a binary number of a thousand equals to eight perfect and then if we press on a flip button exactly what we expected happens and the only thing left to do is to implement states inside our convert function now because this block of code belongs to state 0 where we convert binary to decimal we will include it inside an if statement of if self dot state equals zero we will of course indent these lines of code and we will move on to the else clause where we will tackle state one so we will of course still need to fetch the user input with self input dot text and because it's a string we will still need to convert it into an integer now since this time we are converting a decimal number to binary we will need to add the bin function in front of our int function now the bin function returns a string rather than a numeric value and this string always begins with zero b so let's get rid of both of these characters by slicing them off so two and colon and in other words it means skip the first two characters which are zero b and return the rest of the string which is our binary number so now we can assign this expression to our val local variable and then we can copy these two lines of code from above and we will paste them underneath and since we just discussed that bin returns a string rather than a number we will not need this string command and since this time we are returning a binary number we will refactor decimal to binary let's go ahead and test it we'll save it so first let's see if we get seven perfect now let's flip let's type seven perfect now just in case let's test it on another number we know that 15 is one one one one so let's see perfect and we also know that eight is one thousand perfect now back to our binary to decimal conversion let's do the same fifteen seven eight i think we're good and one last but very handy trick i will show you with kvmd is how to switch the default blue theme to a theme of any other color and we will use deep orange for the example because so many of you guys really liked it so right before we initialize our screen we will type self dot theme cls as in class dot primary palette which in our case will equal to deep orange let's save it let's rerun our file and everything is orange but seriously this is really cool and while i only gave you two options to choose from in the community post there were a lot of suggestions well three to make it green okay so let's try uh green i gotta tell you i didn't like it but let's give it a shot this is how it looks like and the reason why i didn't like it it's because i usually like when the text is white and as i'm sure many of you have already noticed i've included some of my favorite colors right above my head but for now let's see how deep green looks like because that would probably have white text oh and there is no deep green so it actually shows you all the different colors available and it doesn't look like they have a darker green but let's try the blue gray so i'm just gonna copy it let's paste it here let's save it i actually really really like it maybe i should have done the app with this color instead but whatever we picked the default blue and we shall remain with the default blue but i just wanted to show you what else we need to do in this app that we haven't finished in this tutorial so let's say we are entering a string that is not a binary number and we are trying to convert it boom our app fails so what we will need to do in the next episode is we will need to tackle some exceptions in this case we have the value error exception another thing we will need to tackle what happens if the binary number we enter is perfectly valid however it has a fraction at its end now this fraction should realistically indicate a quarter that should be 7 in a quarter but what happens when we press convert our app fails again and again with a value error and the reason is this int command only converts whole numbers what we will actually need to do is we will need to specify a function that can convert both whole numbers and both fractions now if you guys are computer science students i'm sure you know exactly how to do it but if you're not i will show you how to do it in the next tutorial and we'll do it manually without any shortcuts to make sure we understand what we did thank you so much for watching if you found this tutorial helpful please give it a like maybe subscribe to my channel turn on the notification bell maybe leave me a comment or even share this video with your friends with your co-workers i really appreciate any form of help and so far you guys have been fantastic so thank you so much and if you have any questions please leave them in the comments below and i'll be able to address them in the next tutorial of this project which will not take very long to post because i already have the code ready i just need to film it and that's all so i'll definitely see you very soon

Channel: Python Simplified

Views: 26,129

Keywords: gui, python gui, python ui, ui, ui app, gui app, kivy, KivyMD, KivyMD tutorial, python programming, python tutorial, binary to decimal, python binary to decimal, python int, python bin, number base converter, KivyMD app, python mobile app, mobile app, mobile ui, mobile gui, android python app, android KivyMD, android kivy, mobile kivy, mobile app tutorial, create mobile app, python android app, python program, kivy md, user interface, ui widgets, graphic user interface

Id: ah3JeHAfM0M

Length: 22min 15sec (1335 seconds)

Published: Mon Jul 12 2021