App Inventor Tutorial 10 Calculator
This tutorial will help you develop a calculator using If statements and a ListPicker.
You will be asked to enter 2 numbers, Number1 and Number2. When you have
entered your numbers, select the function from the ListPicker and click on the
Calculate button. The answer to the sum will be calculated and displayed by the
app. The ListPicker will allow you to select from one of the following functions:
+, -, x, /.
Step 1: Open App Inventor
To work online: Go to [Link]
Use your google account details to log in.
Or working offline with the local server: Once you have the App Inventor running type
into your browser [Link]
When you are taken to the app inventor page create a new project.
This window will appear. 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.
Rename it Title_Label.
Set the FontSize to 18.0
Set the Text Property to My Calc.
Go to the Palette Panel.
Click on Screen arrangement and drag a HorizontalArrangement onto your screen
below the Title_Label My Calc.
Drag a textbox into the HorizontalArrangement.
Remove the text from Hint
Select the Numbers Only checkbox.
Set its width to 50 pixels.
From the Palette Panel, under the Basic category drag a ListPicker over to the
HorizontalArrangement, to the right of the TextBox1. Set the Text Property for the
ListPicker to +.
Drag another TextBox into the HorizontalArrangement. Place this
to the right of the ListPicker.
Remove the text from Hint
Select the Numbers Only checkbox
Set the width to 50 pixels
Drag a label into the HorizontalArrangement to the right of TextBox2.
Rename the label Equals_Label.
Set the Text Property to =.
Drag another label over to the right of the Equals_Label.
Set the Text Property to Result and rename the component Result_Label.
From the Palette Panel drag a button over to the screen and place it below the
HorizontalArrangement. Rename the button Calculate_Button and set the Text
Property to Calculate.
The ListPicker creates a list of items. The user can select from the options in this
list. We need to add the +, -, x, / to our list. Under the Components Panel select
ListPicker1. In the Properties Panel, under ElementsFromString add +, -, x, / (+
comma space - comma space x comma space /).
Add + to the Selection Property.
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
2. The user selects a function (+,-,x,/)
3. The user clicks on the calculate button and the result is displayed.
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 'Open the Blocks
Editor'. Click on this button
ListPicker Functionality
We need the text that is displayed on the ListPicker1 to change when the user
selects a new choice. From the My Blocks tab click on ListPicker1. Select the
(when [Link] do) piece and drag it onto the board.
From the My Blocks tab click on ListPicker, Select the (set [Link] to)
piece and connect this to the (when [Link] do) piece.
From the My Block tab click on ListPicker. Select the [Link] piece
and connect this to the (set [Link] to) piece.
The ListPicker block is shown below.
If-Then Statements
Remember that the value of the ListPicker is the value that the user has selected.
We want the app to add the numbers together when the user selects the +, to
subtract the numbers when the use selects -,to multiply the numbers when the user
selects the x and to divide the numbers when the user selects the /. To do this we
need to use an If block.
From the My Blocks tab, click on Calculate_Button.
Drag the (when Calculate_Button.Click do) piece onto the board.
Go to the Built-In tab, click Control and drag the If block onto the board.
Insert the If block into the (when Calculate_Button.Click do) piece.
Under the My Blocks tab, click on Result_Label.
Drag the (set Result_Label.Text to) piece onto the board.
Connect the (set Result_Label.Text to) piece to the then-do part of the If block.
From the Built-In tab, click on Math and drag the + piece onto the board. Add this
piece to the (set Result_Label.Text to) piece.
From the My Blocks tab, click on TextBox1 and drag over the [Link] piece.
From the My Blocks tab, click on TextBox2 and drag over the [Link] piece.
Add the [Link] piece to the first gap in the + piece. Add the
TextBox1.Tex2 piece to the 2nd gap in the + piece.
We need to fill in the test part of the If block.
From the Built-In tab, click on Math and drag a = piece over to the board. Connect
the = piece to the test part of the If block.
From the My Blocks tab, click on ListPicker and drag the [Link]
piece to the board. Add this piece to the 1st empty space in the = block.
From the Built-In tab, click on Text and drag a text piece over to the board.
Change the text on this piece to +. Add this piece to the 2nd empty space in the
equals block.
The complete block for the add function is shown below.
When the Calculate_Button is pressed and the ListPicker is set to +, the app will
add the 2 numbers together. We need to repeat this process for the subtract,
multiply and divide functions. Rebuild the If block but change the text piece to -,
x and /. Also, remember to change the math pieces. The finished block is shown
below.
10
Test your app by connecting to the emulator or your device. You should be able to
add, subtract, multiply and divide your numbers.
11