Day 3: If-Then Statements / Calculator

What We're Going to Learn Today

In today's tutorial, we are going to learn about If Statements. We are also going to work with a list picker to make a calculator.

Getting Started

1. Go to the MIT App Inventor and log in using your google account
2. Click on "My Projects" on the top and then press the New button.
3. Name the new project Day3
4. Click on Day3 to open it
5. Open an emulator or connect your phone to app inventor using the MIT Companion App

Let's Start

1. Under the Palette, drag a label from the basic category and place it on the screen. Rename it "Title_Label" and set its Text property to "My Calc" and the FontSize to "18.0"
1. Drag a HorizontalArrangement under the Title_Label. Find it under the Layout category on the Palette.
2. Drag a textbox from the Palette into the HorizontalArrangement. Set its width to 50. Remove the text from "Hint" and check "Numbers Only"
3. Drag a Listpicker to the right of textbox1 into the HorizontalArrangement. Set its text property to "+"
   1. Drag another textbox from the Palette into the HorizontalArrangement. Put it to the right of listpicker1. Set its width to 50. Remove the text from "Hint" and check "Numbers Only"
4. Drag a label to the right of textbox2 into the HorizontalArrangement. Set its text to "="
5. Drag a new label to the right of Label1 into the HorizontalArrangement. Set its text to "Result" and rename the component "Result_Label"
6. Finally, Add a button below the HorizontalArrangement. Rename this button "Calculate_Button" and set its text to "Calculate"

Listpicker

A listpicker creates a list of items for a user to... pick. We need to add these items to our listpicker.

1. Select Listpicker1
2. Add +, - (That is plus comma space minus) to the ElementsFromString property

1. Add + to the Selection property
2. Look at your emulator or phone. Try typing text in the fields. Try using the ListPicker. Notice it doesn't change the symbol if you pick a new operator.

Blocks

Now we want our calculator to work. Lets add some blocks.

1. Find when Calculate_Button.Click do from My Blocks and drag it to the board
2. Find set Results_Label.text to and add it to when Calculate_Button.Click do
3. Add + from Math from the Built-In Blocks
4. Fill + with TextBox1.text and TextBox2.text

Listpicker

1. Enter some numbers in each text field and press the calculate button. Your app should add the numbers together and then set the Result_Label text to the answer.
2. If you press the + symbol you will see that you can pick -. However, selecting - doesn't do anything right now. Let's change that.
3. Return to the block editor.
4. We need the text that is displayed on the ListPicker1 to change when the user selects a new choice. Find when ListPicker1.AfterPicking do and drag it to the board.
5. Find the blocks set ListPicker1.Text to and ListPicker.Selection under ListPicker1 on the left and snap them into when ListPicker1.AfterPicking do
6. ListPicker.Selection 's value is whatever the user has picked. Read the blocks and understand why the text changes. when ListPicker1.AfterPicking do set ListPicker1.Text to ListPicker.Selection
7. Try clicking on ListPicker1 on your phone.
8. Notice now that, while the symbol changes, hitting the calculate button will only add the numbers and never subtract. We need the app to know what to do if + was changed to -

If-Then Statements

1. Remember that ListPicker.Selection 's value is whatever the user has picked. We want the app to add numbers when the user selects + and subtract numbers when - is selected. To do this we need to use an If block. Go to the Built-In tab on the left. Find the If block under Control tab and add it to your when Calculate_Button.Click do then snap your whole set Results_Label.text to under the If like this:

1. We need to fill in the "test" part of the of the If block.
2. Snap an = block into the test. = is a Math block.

1. Now snap a ListPicker.Selection and a text block into the equals. A text block is found under the Built-In tab. Click on the text box and change the text to +:

1. Now, when you click the Calculate_Button, If the ListPicker1 selection is +, then the app will add the two numbers together.
2. Let us make subtraction work now. Rebuild the If block and its contents but change the text to - and the + math to - . (Tip, you can copy and paste blocks)

Test out your app. You should be able to add and subtract numbers now.

Challenge Stuff

Here are some hard things to try to do. If you don't want to try any of these, or are finished:

Regular Challenge: Add multiplication and division functions to your app.

Super Hard Challenge: Add exponents and roots functions to your app.

Developers Challenge: Make a copy new of your Day3 and rename it to a real app name. Change the background color, button and text fields layouts to be more ascetically pleasing. Make a icon for the app. Add your "company name" to the app. Basically, make this app look and feel like a professional app that belongs on a phone. Package your app to your phone.

Middle School Android App Inventor Tutorials by Richard Incorvia is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.