Calculator App Android Studio Kotlin Tutorial

hello and welcome to this kotlin and  android studio tutorial my name is cal   and in today's tutorial we're going to be building  a simple calculator we're 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  we're going to be the ones responsible for doing   all of the math in the first part of the tutorial  we're just going to get the layout sorted so   we're just going to be using some styles and some  linear layouts and then in the second part of the   tutorial we're 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 you'll   have a functioning calculator which you can then  build upon with all that said let's get started also creating a new android studio project i'm  going to call this one kotlin calculator app our   programming language is kotlin and i'm just going  to hit finish the first thing we're going to do is   head into values themes and just delete the night  theme this is just to simplify it a little bit   we're going to remove all of the default colors  and add in a few of our own so i'm just creating a   red color a very dark gray color that i'm calling  almost black as well as an orange so that's just   a pretty simple calculator color scheme and then  we're going to head into our themes we're 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 we're 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 we're going to change  the constraint layout to a linear layout setting   the orientation to vertical background we're going  to give it our almost black color then inside our   linear layout we're going to create a constraint  layout i'm going to give it width match parent   height 0dp and a weight of 2. we're going  to give a little bit of padding so padding   20dp and then inside here i'm going to copy and  paste in our textview so this is going to be our   workings textview as well as our results textview  so i'm just going to copy and paste that down   so we've got two text views the first  one i'm going to call workings text view   and the second one we're going to give it an id  of results text view we're just going to change   the width to match parent on both we're going to  give the top one constraint bottom to top of and   giving it our results text view we're 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 we're going to set the text   color to be white as well as the text alignment  to be text end we're going to make the text size   of our results 40sp so quite big and just making  our workings 25. cool so that's all looking pretty   good so i'm just going to remove the hello world  text from both of those text views and then below   our constraint layout we're 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 we're going to copy and paste this quite a few  times so what i'm going to do is create a style   so i've 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 we're going to create   a style i'm 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 there's 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 that's harder to maintain as well   cool but with that said we are going to create a  button inside our linear layout and we're going to   create a style for this button because we're going  to have a lot of calculator buttons with similar   attributes so i'm just going to copy and paste  our button row and rename it to button number   and then apply that style to our button i'm going  to give our button a text of 9 and then i'm 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 it's calling at style and  then giving a button number for our button number   style we're going to give it a background of null  i'm going to give it text size of 25sp and then   i'm going to copy and paste that button four more  times because that's how many columns there are in   a calculator changing the text to seven eight nine  and then it's going to be our time symbol we're   going to set the text color to white of our button  number and then we're 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 i'm 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 you're 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 they're 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 we're just going to quickly add this  ignores hard-coded text to our parent linear   layout and then i'm 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 we're just going to remove one of the buttons   so i'm going to make the weight equal to two a  little bit later on for our top left we're going   to create an all clear button so i'm just going to  change the text color to red so we're overriding   the style there as well as the on click we're  going to create an all clear action and then we're   going to do the same thing we're going to create  a backspace button and we're 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 we're going to set the weight to two  we're going to set the background color to orange   we're going to make the text size 40sp and then  we're going to override our on click we're going   to create an equals action in our main activity  cool so that's all of our layout sorted next we're   going to head into our build gradle and add the  kotlin android extension and then we're finally   ready to head into our main activity kotlin and  let's start with one of the easier ones first so   i'm 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 i'm 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 i'm going   to create a variable calling it length which is  equal to workings textview length if length is   greater than zero so there's 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   we're going to work on our number and operation  action i'm 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 it's going to open up the brackets  of both of those functions and then inside our   number action if view is of type button we're  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 i'm   going to put that into our workings textview and  then we're going to copy and paste that down into   our operation action but we're 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 i'm  just going to create another variable calling   it can add decimal and that's going to default  to true we only want a digit to be able to have   one decimal place when operation is added we're  just going to say can add decimal is equal to true   and then inside our number actually we're going  to say if view text is equal to a decimal place   we're going to say if you can add a decimal add  that to our workings text view and set can add   decimal to false otherwise we're just going to  append whatever digit is given cool so let's   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  can't tell but i've 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 i'm pretty happy with how that's turned out   now it's just time to work on our equals action  so inside our equals action i'm just going to say   results textview.txt and create a function calling  it calculate results which returns a string and   i'm just going to return an empty string for now  and then we're going to create another function   we're 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 we're going  to create a list calling it mutable list of any   and we're just going to return that list i'm going  to create a variable calling it current digit   which is equal to an empty string we're 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 you'll find   an operator which means we're going to add our  current digit to float so we're going to make a   float out of that current digit string that we've  made we're going to set current digit back to   an empty string and then we're going to add that  character which is adding the operator and then   outside of our loop we're just going to say if  our current digit is not equal to an empty string   we're 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 we're just going to put that  list into a variable and then we're just going   to say if our digits operator is empty we're just  going to return an empty string next we're 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 i'm 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 we're going   to create a variable called list which is equal  to pass list and we're going to say while our list   contains a times or a divide symbol we're 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 we're going to create another variable   calling it new list which is a mutable list  of type any we're going to return our new list   and then we're going to create a variable calling  it restart index which is equal to our past list   size then we're going to create a for loop to go  through our pass list so i'm just going to say i   in past list indices if pass list at position i  is a character so meaning it's an operator and i   is not equal to past list last index meaning it's  not the last index and i is less than our restart   index we're 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 we've got our operator  and we've 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   we're going to say restart index is equal to i  plus 1. otherwise you've found a addition or a   subtraction we're just going to say new list add  previous digit we're going to add our operator   and then below that but still inside  our for loop we're 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 i'm just going to copy and paste this   if digits is empty mine and just change that to  our times and division because we're 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 it's   going to return a float so i'll just put that  into a variable inside here we're 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  we're 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   it's an operator and i is not the last index of  our past list so very similar to our validation in   times and division we're 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 i'm going to say if our operator is equal to   an addition result plus equal to our next digit  and then we're 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 didn't 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 we'll 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 i'll catch you in the next tutorial

Channel: Code With Cal

Views: 72,859

Keywords: tutorial, programming, coding, example, android, studio, program, code, app, development, developer, software, indie, how, to, basic, simple, 2021, education, build, create, apps, easy, follow, beginner, friendly, make, uikit, learn, kotlin, calculator, calculate, addition, subtraction, multiply, operator, calculator app, kotlin calculator, calc, cal, times, divide, application, all, clear, backspace, back, equals, calculated, minus, math, claculator, calculator tutorial, from, scratch, linear, layout, style, styles, styles.xml, calculator app

Id: 2hSHgungOKI

Length: 12min 21sec (741 seconds)

Published: Sat Jul 17 2021