App Inventor 2 Calculator


MIT App Inventor is a blocks-based programming tool that allows everyone, even novices, to start programming and build fully functional apps for Android devices.
Newcomers to App Inventor can have their first app up and running in an hour or less, and can program more complex apps in significantly less time than with
more traditional, text-based languages.
MIT App Inventor is a blocks-based programming tool that allows everyone to start programming and build fully functional apps for Android device.


Step 1: Open App Inventor to work online: Go to and Click on ‘Create’, Use your google account details to log in.
When you are taken to the app inventor page create a new project.
Give the project the name ‘Calculator’ and click OK. The project is now added and you will be taken to the designer screen.

Step 2: Build the Interface of Calculator.
From the Palette Panel drag a Label over and place on your screen, it will be your calculator’s display screen, you can also align it under Properties.
Now to add buttons, you need a table arrangement from Layout and drag Button from the Palette panel. Name these buttons as 1,2,3,+,-…etc.


Go to the Palette Panel. Click on Button and drag a Button onto your screen to make a key.

Step 3: Add the functionality to the Interface Once the interface is ready we can set the functionality of the components. What we want to happen can be described in the following steps: 1. The user enters 2 numbers in the text boxes.Step:2 The user selects a function (+,-,x,/).Step:3 The user clicks on the calculate button and the result is displayed.


You can also change the background colour by going to Properties and choosing a colour of your choice from the BackgroundColour option and also the font size of text can be changed.
The functionality of the program (step 3) is added by using the Blocks Editor - Along the top of your App Inventor panel you will notice a button which says 'Blocks’. Click on this button
Here you can create a logic for your calculator by using the arithmetic properties under the Built-in Blocks section. Where there are graphical blocks, encoded with built-in functions of type- Math, Logic, If-else, Procedures etc.


Here we have to create 3 variables to hold first number, second number and the operator, to perform mathematical operations, we can create variables and set the name of variables to any relevant type.
Now we choose when from Button1 menu, to make our app understand, what should happen when Button1 is clicked and what all operations need to be performedwith that.
Next we try to store a value in a button, if we wish to store a value like 754 in button 1, here user will type 7,5,4 and we create a logic where first 7 is stored and the when 5 is pressed then 7 is multiplied by 10 then added to 5 to give us 75, and then when 4 is pressed, the entire 75 is multiplied with 10 then added to 4 which gives us 754.
We can create this logic using addition and multiplication blocks from the Math section, this also is done so by simply dragging the blocks on to the Viewer screen.

We can also create procedures by clicking on do procedure block from the Procedure section and dragging it on to the Viewer screen, procedures are just like for-loops, they help to run a set of instructions multiple times, depending on the number of times the coder wants it to run, which makes our job much easier and less tedious.


Here we have used a combination of “set to”, “when Button .click” and the operand blocks to get the logic of using two operands and an operator to execute.

Step 4: Now we create blocks for the operators, like +,-, sin, cos, tan etc… that we have used in the calculator. We define a logic use ‘when button .click’ blocks to assign logic to the operators buttons.


The blocks look something like that as shown above.


Now with all the buttons for numbers and operations, our calculator looks like as shown above.

We may also use If-Then Statements, which perform operations based on conditions like- if(condition is true) do this…
else do this …
We can use these blocks to do distinguish between the different distinguishing properties of the various types of operators, acting on the operands.
Our source code (which is actually graphically displayed with the help of colourful blocks) looks like this-


Step 5: Now after some final touch ups you are ready to test the app by connecting to the emulator or your device. You should be able to add, subtract, multiply, divide and do other mathematical operations on your numbers.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License