In Mobile App Development
Calculator App Android Studio Kotlin Tutorial - read the full article about app development tutorial, Mobile App Development and Native and cross-platform solutions from Code With Cal on Qualified.One
Youtube Blogger
hello and welcome to this kotlin and android studio tutorial my name is cal and in todays tutorial were going to be building a simple calculator were going to be building this calculator from scratch i have made another video where we built a calculator in android studio however in that video we used a third-party plug-in to do all the hard work of the math for us today our calculator is a little bit simpler but were going to be the ones responsible for doing all of the math in the first part of the tutorial were just going to get the layout sorted so were just going to be using some styles and some linear layouts and then in the second part of the tutorial were going to link up all the buttons and make them work this is just really the bare bones of a calculator but i could imagine in the future creating more videos where we build upon add different functions and that sort of thing but yeah hopefully by the end of this tutorial youll have a functioning calculator which you can then build upon with all that said lets get started also creating a new android studio project im going to call this one kotlin calculator app our programming language is kotlin and im just going to hit finish the first thing were going to do is head into values themes and just delete the night theme this is just to simplify it a little bit were going to remove all of the default colors and add in a few of our own so im just creating a red color a very dark gray color that im calling almost black as well as an orange so thats just a pretty simple calculator color scheme and then were going to head into our themes were going to remove all of the secondary brand color stuff all of the comments and just changing our color primary to be orange and our color primary variant to be our almost black and then were going to change the parent theme to app compat and we can close off both of these now and head into our main activity firstly were going to change the constraint layout to a linear layout setting the orientation to vertical background were going to give it our almost black color then inside our linear layout were going to create a constraint layout im going to give it width match parent height 0dp and a weight of 2. were going to give a little bit of padding so padding 20dp and then inside here im going to copy and paste in our textview so this is going to be our workings textview as well as our results textview so im just going to copy and paste that down so weve got two text views the first one im going to call workings text view and the second one were going to give it an id of results text view were just going to change the width to match parent on both were going to give the top one constraint bottom to top of and giving it our results text view were going to set the max lines and lines to 2 on our workings text view as well as setting the lines and max lines to 1 on our results were going to set the text color to be white as well as the text alignment to be text end were going to make the text size of our results 40sp so quite big and just making our workings 25. cool so thats all looking pretty good so im just going to remove the hello world text from both of those text views and then below our constraint layout were going to add in a linear layout giving it a width of match parent height of 0dp and a weight of 1. so this linear layout is going to be each of our button rows and were going to copy and paste this quite a few times so what im going to do is create a style so ive just created a new values resource file calling it styles.xml right click and split vertically to have both xml files on the screen at once inside here were going to create a style im going to name it button row and our button row style is going to have the same width height and weight as the linear layout we just created and then that way we can then apply that style which is our button row to our linear layout and then when we copy and paste this linear layout and then say we want to change something in the future theres only one place we need to modify that styles is one of those things that you can overuse and under use so if you just use a style for absolutely everything it actually becomes more of a hassle to maintain likewise if you never use them and you just copy and pasting over and over again you know thats harder to maintain as well cool but with that said we are going to create a button inside our linear layout and were going to create a style for this button because were going to have a lot of calculator buttons with similar attributes so im just going to copy and paste our button row and rename it to button number and then apply that style to our button im going to give our button a text of 9 and then im going to change the width to 0dp as well as the height to match parent and correctly apply the style to our button just so its calling at style and then giving a button number for our button number style were going to give it a background of null im going to give it text size of 25sp and then im going to copy and paste that button four more times because thats how many columns there are in a calculator changing the text to seven eight nine and then its going to be our time symbol were going to set the text color to white of our button number and then were going to copy and paste our button number style and renaming it to button operator and so our button operator is going to have a different on click and a different text color so our button operator im going to apply that to our time symbol and change the text color to orange i find the easiest way to create an on click for a button that youre going to put in a style is to just create in the button first with error message just create the function inside our main activity so then we can add that on click to our style just calling it operation action and the other one is our number action and then we can remove the on click from those buttons because obviously theyre going to inherit that from the style cool so we can close off our styles.xml just to give ourselves a little bit more space and then were just going to quickly add this ignores hard-coded text to our parent linear layout and then im going to copy and paste down our button row with all the buttons included copy and paste that down four more times and then just go through and change all of the text to being the nice calculated grid for the equal sign were just going to remove one of the buttons so im going to make the weight equal to two a little bit later on for our top left were going to create an all clear button so im just going to change the text color to red so were overriding the style there as well as the on click were going to create an all clear action and then were going to do the same thing were going to create a backspace button and were going to call that backspace action clicking on the error message to create that function in our main activity kotlin file and then just change all of our operators to being divide minus and then addition for our equals button were going to set the weight to two were going to set the background color to orange were going to make the text size 40sp and then were going to override our on click were going to create an equals action in our main activity cool so thats all of our layout sorted next were going to head into our build gradle and add the kotlin android extension and then were finally ready to head into our main activity kotlin and lets start with one of the easier ones first so im going to start with our all clear action and because we added the kotlin extension to our build grader we can now reference text views directly workings text view and results text view are the ids that we gave our text views and im just going to set their text equal to an empty string for our backspace action we just want to remove the last character from our workings text view im going to create a variable calling it length which is equal to workings textview length if length is greater than zero so theres actually something to backspace workings textview text is equal to workings textview text subsequence starting at zero and ending at length minus one so next were going to work on our number and operation action im going to add a variable calling it can add operation which is equal to false which is going to do a little bit of validation for us and then its going to open up the brackets of both of those functions and then inside our number action if view is of type button were just going to say workings text view dot append so adding the text from whichever button is pressed so for example a nine or a seven im going to put that into our workings textview and then were going to copy and paste that down into our operation action but were also going to say if we can add an operation and by operation i mean a times or a plus symbol so when we add up an operation we want to set can add operation to false and then when we add a number we want to add can add operation to true and the other thing we want to validate for is a decimal place so im just going to create another variable calling it can add decimal and thats going to default to true we only want a digit to be able to have one decimal place when operation is added were just going to say can add decimal is equal to true and then inside our number actually were going to say if view text is equal to a decimal place were going to say if you can add a decimal add that to our workings text view and set can add decimal to false otherwise were just going to append whatever digit is given cool so lets build and run this really quick and just see that we can add a digit we can use our backspace button as well as our all clear button you probably cant tell but ive been pressing the operator buttons over and over again and you can only add one operator at a time as well you can only add one decimal place to any given set of numbers so yeah im pretty happy with how thats turned out now its just time to work on our equals action so inside our equals action im just going to say results textview.txt and create a function calling it calculate results which returns a string and im just going to return an empty string for now and then were going to create another function were going to call it digits operators and it returns a mutable list of any type so it could be any type of object inside here were going to create a list calling it mutable list of any and were just going to return that list im going to create a variable calling it current digit which is equal to an empty string were going to say for character in our workings textview.text so go through all of our workings and if you find a character which is a digit or you find a character which is a decimal place current digit plus equal to that character otherwise youll find an operator which means were going to add our current digit to float so were going to make a float out of that current digit string that weve made were going to set current digit back to an empty string and then were going to add that character which is adding the operator and then outside of our loop were just going to say if our current digit is not equal to an empty string were going to add that digit to float to our list the idea of this function is to break up our workings text view into an array with floats and characters as operators cool so inside our calculate results were just going to put that list into a variable and then were just going to say if our digits operator is empty were just going to return an empty string next were going to work out the times and division as BODMAS says you need to do division and multiplication before you do any add or subtracting so im just going to create a new function calling it times division calculate which takes our digits and operators list and returns a mutable list of any were going to create a variable called list which is equal to pass list and were going to say while our list contains a times or a divide symbol were going to create another function which returns a mutable list of any this function is going to do one times or division at a time so just going through the list and doing one at a time and then returning that list were going to create another variable calling it new list which is a mutable list of type any were going to return our new list and then were going to create a variable calling it restart index which is equal to our past list size then were going to create a for loop to go through our pass list so im just going to say i in past list indices if pass list at position i is a character so meaning its an operator and i is not equal to past list last index meaning its not the last index and i is less than our restart index were going to say value operator is equal to our past list at i previous digit is going to be past lists it should actually be i minus 1 as float and our next digit should be past list plus 1 as float so weve got our operator and weve got the two digits we want to times or divide and then we want to say when our operator is a time symbol we want to say new list add previous digit times our next digit and we just want to do the same thing as a divide symbol but just changing that to division previous digit divided by next digit and then inside both of them were going to say restart index is equal to i plus 1. otherwise youve found a addition or a subtraction were just going to say new list add previous digit were going to add our operator and then below that but still inside our for loop were going to say if i is greater than our restart index new list at the object from our pass list at the index of i cool so that should be our times and division all sorted so im just going to copy and paste this if digits is empty mine and just change that to our times and division because were just going to return an empty string if that is empty the final thing left to do is create a function which calculates our add and subtraction this function is going to receive a mutable list of any but its going to return a float so ill just put that into a variable inside here were going to say result is equal to past list at the index of zero take the first float variable and put it into our result variable just going to return our result were going to say for i in past list indices so just looping through our past list again we say if our past list at index of i is a character meaning its an operator and i is not the last index of our past list so very similar to our validation in times and division were going to say our operator is equal to our past list at position i our next digit is equal to our past list i plus one as float im going to say if our operator is equal to an addition result plus equal to our next digit and then were going to copy and paste that down and same thing for negative so just minus equals to next digit just going to change this to result dot to string and we actually need to fix up a bug here when i didnt add i plus 1 or i minus 1 in our times and division so just changing that now and if we go and run this now you can see that we can add and subtract we can also do a simple times as well well test the division and it should be able to add multiple divisions or multiple times or plus or whatever you want really and it should result in the correct calculation yeah i hope you enjoyed building this kotlin calculator from scratch i hope you learned something if you made it this far consider giving the video a like or subscribing otherwise ill catch you in the next tutorial
Code With Cal: Calculator App Android Studio Kotlin Tutorial - Mobile App Development