Simple Android Calculator App in Python

[Music] what is going on guys welcome back in today's video i'm going to build a simple android calculator app in python and for this we're going to use qivi which is a cross-platform app development framework you can use it to create android apps ios apps you can use it to create windows desktop applications linux desktop applications and so on and in order to install it we're going to open up a command line and we're going to type pip install kibi like that pip install kivy and once we have that we're going to create a separate directory for the application because otherwise in the compilation process it's going to include all the files in the subdirectory and all that so we want to create a simple directory with a python file in it and in this python file we're going to start by sync from qiv.app import app then from kibby dot core dot window import window even though that's i think that's optional we're going to see in a second or in a couple of minutes then we're going to import kibi itself and we're also going to import uh from kibby dot what was it um ui x dot box layout we're going to import the box layout now what we want to do now is we want to create an app at the app itself which is going to be neural calc for neural calculator so the class is going to be neural calc for calculator and it's going to extend from app it's going to inherit from app and all it's going to do is it's going to have this build function here with the self parameter and it's going to return an instance of something that we haven't created yet which is going to be my route now my route is going to be a class up here so class my route and my route is just going to be a box layout so this is just one layout type that we can have and this box layout thing it's going to have a constructor it's going to call the super constructor on my root and on self so init like that and uh basically this is going to be the ui root element we're going to design the ui not in python but in a kivy file but that's basically the structure we have the my root which is a box layout we have the app which is returning this layout here with all the sub elements that we're going to define and in order to have the app running we're going to say neural calc equals neural calc and then neural calc dot i think it was run right there you go all right so now let's go to the layout we're going to create a new file which we're going to call neural calc dot kv now it's important that you name it exactly like that now not necessarily neural calc but you name it in the same way that you named your class and all in lowercase letters so if your class is hello world you want to name this hello world in lowercase.kv so then here we can design the layout we're going to start with the root element which is my root and angle brackets and we're going to choose an orientation for that layout so this layout orientation is going to be vertical because we want to stack vertically the individual elements and inside of that box layout we're going to have different layouts so we're going to have for the individual numbers so let's look at the windows calculator for the individual numbers we're going to have this grid layout here like in the windows calculator um and yeah for this we need obviously a grid layout and the other elements are going to be arranged in the box layout so the first thing we want to have we want to have a basic field where we have the current calculation this is going to be a text field a text input and this text input is going to have an id which we're going to call just calc field now in order to make this accessible in the code we need to define it up here so we need to say the calc field in the program is going to be the same as the calc field in this design here and the height of this is going to be 200 i think it's pixels not sure the size hint is going to be overwritten by one and none this basically means that we override it so that we can choose the height ourselves and then we're going to make this read only which is written as one word so read only is true and disabled is true as well now i always need to look at my second screen because i always forget the exact names of these parameters um so you can also look them up in the documentation obviously so then the font size of this uh of this text input is going to be 64. and this is basically just a field with the calculation so when we press something we want this field to be filled up with the calculation to be evaluated in the end now for all the other things we're going to have a grid layout or i think for all the other things because we're going to have the buttons we're going to have uh no at the bottom we're also going to have one box layout but in the beginning we're going to have a grid layout for the individual numbers for the plus for the for the multiplication symbol and all that so the grid layout is going to be that we're going to have four rows rows is four columns is four as well then uh we're going to have a padding of 10 and a spacing of 10. very simple thing and then the height of the whole grid layout is going to be 400 and then we're going to say size hint is one none again so that we can overwrite that and inside of that grid layout we're now going to have a bunch of buttons so we're going to say a button the text of the first button is going to be 1 the font size is going to be 26 and we're going to also have on press so the on press is going to be a function that is going to be defined in the python script and this function is going to be called the root dot calc symbol this is a function we need to define and here we're going to pass one and the basic idea is that whenever we press a button that calls this function this function is going to take the parameter of the symbol and it's going to add that symbol into the text box so we can implement that right away it's going to be a very simple function it's just one line so def uh calc underscore symbol it's going to take symbol as a parameter and it's going to just say self.calc field which is what we defined up here remember calc field this dot text is going to be set to string uh or actually not the string we're going to just say plus equals the symbol so we're just going to add to the string another string so even the numbers as you can see are strings we're not adding one as an integer here now we're going to copy that and we're going to do this a couple more times so let's do this uh eight times i'm not sure if that's enough so we're going to have this be one two three now we need to be a little bit careful here because we cannot just go with one two three four five because what we want to do here let me show you again the windows calculator as an example let's go to standard uh you can see that we have here one two three and then a symbol now we're going to do one two three up here uh but still we have the symbol so the first one the second one the third one but then we have one of these operations here so we want to have one two three and then a symbol then four five six another symbol and so on so i'm going to change this to one two three here and this is going to all they're all going to call the same functions at the same function but with a different parameter and the fourth button is now going to be a basic plus and it's also going to add a plus to the calculation uh field then we're going to proceed with four five six um then we have four five six there you go and then we have a basic subtraction so that is going to be minus that is going to be minus then here we have seven eight okay now we don't have enough buttons seven eight then 9 and then we have basically multiplication now let me just see how i arrange this the first time we had the numbers okay then we basically had okay right so basically what we do now is we also add this four more times because now we're going to have the brackets we're going to have an opening bracket and we're going to have this here as well we're going to have zero which is going to be there then we're going to have a closing bracket and then we're going to have a division symbol like that and after that we're going to have a box layout but i think we should already be able to see something if we run the script if i didn't make any mistakes there you go so this is the basic layout we have this here and i think that also the function should already work there you go so you can see that i can type certain things in here eight divided by nine oh the problem is that i didn't change everything [Music] we still have one here which should be a star and we still have uh these ones here so seven eight nine but the rest should be okay so we're almost done we need a couple more things and of course we need also an equal button or an equals button which says okay i wanna call a function that calculates the result and displays it so we're going to do this outside of the grid layout we're done with the grid layout now and we're going to say after the grid layout we have another box layout inside of the box layout which is my route and inside of that box layout this is going to be a uh horizontal one because we are only going to have three buttons and we're going to say uh we still want to have a padding and a spacing we want to choose one of seven here we want to choose a height of 100 again overriding the size hint and then we're going to have a button i think we can actually copy the buttons we have here three times so then we have the button the left button is going to be a simple dot for the comma this is just going to add dot then we're going to have a c for clear this is going to call a different function it's going to call the clear function and here we're going to have an equal sign which is going to call root dot calculate or let's call it get result like that so we need to implement these two functions and then we're actually done we only need to compile it to android so first of all we have def um [Music] clear and all it's going to do is it's just going to say self dot dots what was it calc field dot text is going to be empty that's all it does and then def get result is going to be simple as well because all we're going to do here is we're going to say self dot calc field dot text is going to be the result of the evaluation of the text so self dot calc fields dot mod calc symbol calc field dot text whatever is written there the formula that is written there will be evaluated in a pythonic way and we want to have a string as a result here that we add to the calculation field so now if i run this we're going to see unless i made any mistakes here that if i say uh for example 8 okay we have a problem i think that's just the size there you go we need to set the window size i guess oh by the way we forgot one very important thing we need to require a certain kv version because um we need to make sure that we have the proper version in my on my phone for example 2.0.0 doesn't work 1.9.0 works so we're going to say one point nine point zero here and we can also choose a window size by just saying window dot size equals 640 times 700 for example i'm not sure if this is going to work on android though maybe we're going to have to remove it um but that is actually the application so i can say 12 times 9 equals 108 then i can clear i can say 8.9 plus 3 is going to be 11.9 now i'm curious to see if 0.1 plus 0.2 will equal what i think it will equal yeah there you go we have a floating point error we can of course take care of that if we want to i have a video on that why 0.1 plus 0.2 is not 0.3 in python uh so you can check that out if you want to but you can see that it basically works so if i have something like a 8 plus 2 times 3 this will be 30. so you can see the calculator works we now need to only compile it to android now let's start with the compilation process i'm first going to delete this because i don't think that it's going to be relevant to android to be honest so uh that's the code that we're going to compile and in order to do the compilation you're going to need linux you're going to need either the windows subsystem for linux you're going to need a virtual machine or an actual linux system you cannot do this on windows only i have explained this process in two videos already so if you want to have a detailed uh talk about all this just watch my basic android app development tutorial all we need to do is we need to install build dozer and we need to install it on ubuntu using these commands you can find them in the dockbilldozer dot read the docs io you just go to targeting android you execute all these pseudo commands if you're on ubuntu and arch is going to be different of course um and once you have it installed i have it on my linux subsystem or on my windows subsystem for linux we can use builddozer init and build dozer dash v android debug in order to get uh what we're looking for so what we need to do is we need to navigate to the directory where our application is also i have a tutorial on this channel on how to set up the windows subsystem for linux properly so everything you're asking right now uh there is a video for it on the channel the basic android compilation process and also the installing of linux on windows also i have a virtual machine tutorial as well so you will definitely find something we're now going to navigate to the application there you go and in here we're just going to call billdozer i already have it installed builddozer init this is going to create this build dozer special specification file so i can say nv bulldozer.spec uh this is basically neovim you can use vi you can use nano you can use notepad if you want to in here you can set a bunch of different things you can set for example the title of the application uh neural calc for example calculator let's use a space in here the package name is going to be neural calc for example the package domain is going to be org dot neural or let's call it com.neural whatever and you can choose the files that you want to include you can choose a version you can choose requirements and you can also choose let me just find where it is you can also choose an icon just i don't know where it is i can i can i can there you go i can.file name you can uncomment that line you can choose an icon for the app if you want one you can use a splash as well for the loading screen if you want to use it all explained in the first android tutorial this is just some extra stuff you can choose the orientation you can set all sorts of things here permissions if you need them we're just going to go with that what we have right now so i'm going to write and quit and i'm going to say build dozer dash v android the buck like that and this is going to start the building process it's going to take quite some time so i'm going to skip that part usually it takes 30 to 40 minutes on my computer maybe my computer is just not as good so maybe it will be way faster for you but it takes some time and because of that we're going to skip that part all right now once the process is finished you should see that the build was successful if that is the case you should find a new directory called bin inside of that directory you will find an apk file this is the actual app this is what you want to get onto your phone you can use drive you can use dropbox you can use an usb cable whatever get this apk file onto your phone install it open it and then you should be able to see the app on the phone however on my phone i saw that the layout doesn't look quite good i think this this is because of the static sizes in the kv file now hopefully i'm going to show you here what it looks like at the moment i think just removing the height might actually uh fix that i'm not sure about this but we can try and see if that works so we're going to delete height here we're going to delete height here and we're also going to delete it here and see if it works then probably it's not going to be that balanced it's going to be quite stretched um and maybe we're going to have to fix that again but once we have chosen that we can also go ahead again and run this command again this time it will take less time and we're going to skip it apart where it's done all right so this ended up looking even worse so we're going to now remove this size hint stuff here and hope this is going to fix that if that is not possible i'm going to look for a solution online let's try it we're going to run this again and see what happens all right now this looks a little bit better but it's still not good so what we're going to do now is we're going to return to the size hints but this time we're going to provide uh for the second parameter the ratio so we're going to say this should be something like what was it before actually was it 400 or something let's say 0.4 here or actually 0.3 here then go with 0.5 here and then go with 0.02 down here 0.2 there you go we're not going to change the font size of course the buttons look kind of small so you can increase the font size to like 30 40 50 or something can play around with that but that's a minor thing let's run this again and then we can see if it looks better now all right now this looks finally like something that is at least acceptable now of course the lower three buttons are a little bit too big so maybe we should change the size hint to 0.1 or something uh but in general it looks kind of good so kind of fine so 86 minus 63 equals 23 there you go times 9 equals then we can try again 0.1 plus 0.2 there you go and it equals 0.3000 whatever so this is how the app looks now i think i should be able to somehow put it into the video otherwise you can see it here uh seems kind of fine from the layout this is how you build a basic android calculator app in python using kivy so that's it for today's video being shown up you'll learn something if so let me know by hitting a like button leaving a comment in the comment section down below and of course don't forget to subscribe to this channel and hit the notification bell to not miss a single future video for free other than that thank you so much for watching see you next video and bye [Music] you

Channel: NeuralNine

Views: 4,773

Rating: 4.9861593 out of 5

Keywords: android apps, python android, android calculator, calculator, app, android, calculator app, python calculator app, python android calculator app, kivy calculator, kivy, kivy app, python calculator app kivy, tutorial

Id: zk0MeJ7YIMc

Length: 21min 6sec (1266 seconds)

Published: Mon Sep 27 2021