App Inventor sample project: Loan Calculator

Our next sample project using Google's App Inventor is the classic Loan Calculator. Some of the items I'll highlight include:

• Layout design techniques
• Adding images
• Math functions
• Button actions

Let's get started...


1. Click on My Projects, then create a new project. I called mine MortgageCalculatorApp.



2. You will now see the layout screen with Palette, Viewer, Components, Media and Properties boxes. Adding components is easy by dragging objects from the Palette box onto the Viewer.



3. Drag 4 HorizontalArrangement objects from the Palette onto the Viewer and name them (in order):

• logoHorizontalArrangement
• principalHorizontalArrangement
• rateHorizontalArrangement
• monthsHorizontalArrangement

4. Below monthsHorizontalArrangement, add a Button named calculateButton. Set the width of this button to "Fill Parent."



5. Below calculateButton, add a Label named resultLabel. Set the width to "Fill Parent," color to Red, make Bold and center the text.



6. At this point, our basic layout is complete. We now have to add our components into the layout.

• Set the width of logoHorizontalArrangement to "Fill Parent." Then, drag (2) VerticalArrangement objects into it. Set the widths of each of these to "Fill Parent" as well. Finally, drag an image in between the (2) VerticalArrangements. Including the VerticalArrangements on either side of the image allows us to center the logo.
• Drag a Label into principalHorizontalArrangement, name it principalLabel, set the text to "Loan Amount," and set the width to 100px.
• Drag a TextBox into principalHorizontalArrangment to the right of principalLabel and name it principalTextBox
• Drag a Label into rateHorizontalArrangement, name it rateLabel, set the text to "Rate," and set the width to 100px.
• Drag a TextBox into rateHorizontalArrangment to the right of rateLabel and name it rateTextBox
  
• Drag a Label into monthsHorizontalArrangement, name it monthsLabel, set the text to "Months," and set the width to 100px.
• Drag a TextBox into monthsHorizontalArrangment to the right of monthsLabel and name it monthsTextBox

At this point, your screen should look like this:




7. Now connect your Android phone via usb. On your phone, go to Settings-->Applications-->Development. Enable USB debugging and Stay awake.



8. On the layout screen click the button to Open the Blocks Editor. This will open a Java applet that contains all of the logic blocks/action handlers and interfaces with your phone.



9. We will be calculating the following equation with the code blocks:





10. The code for this app requires several variables: To get variables in Blocks Editor, go to Built-In, then Definition and drag "def variable" onto the screen. All of our variables will be numeric so initialize them to 0 by attaching the number block from Built-In-->Math and changing 123 to 0.





11. The only other code block we need for this app is a responder to the button click: when calculateButton.Click do action. This is called when the button is clicked and will take care of the math in the app. This block is found under My Blocks-->calculateButton.



12. Inside the when calculateButton.Click do action, all of the variables are set to their corresponding values from our loan equation above. You will get a lot of use out of the Built In-->Math blocks when constructing the equation elements. The last set of blocks sets the label with the calculated monthly payment amount rounded to 2 decimal places.


So there's the code (layout and blocks) required for building a loan calculator.


Download this application onto your phone by scanning this code: