Friday, September 24, 2010

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:

14 comments:

  1. Hi Got to section 10 no problem. Although the colours of my blocks are slightly different (def variable are light blue). Also 11.

    But 12 seems to introduce blocks from I'm not sure where? For instance the "Set Global to" blocks

    ReplyDelete
  2. Oh I found set global to in My definitions. but textbox.text does not fit in to the set global to bloock in the same way i.e. the side but it goes underneath?

    ReplyDelete
  3. Tom,

    First, the colors are different due to a new version of AppInventor released since I posted this tutorial. In regards to second question, here's a step-by-step of how I handled the set global block.
    1. In Blocks Editor, switch the left column from "Built-In" to "My Blocks."
    2. Drag in a "set global" from "My Definitions" (in this case "set global pVal to")
    3. Drag in the light blue "principalTextBox.Text" block from "principalTextBox" (in the left column)
    4. These two blocks should connect to each other. They do for me in the new and old version of App Inventor.

    - tk

    ReplyDelete
  4. Hi there, I did everything exact but it seems to be calculating wrong.. Not sure what's the matter.

    ReplyDelete
  5. I also got an extremely high number (roughly 100 times what I expect to be paying).

    ReplyDelete
  6. I figured out what I was doing wrong, I was putting the rate as 6.25 instead of .0625.

    ReplyDelete
  7. i have no such "set global" - what to do?

    ReplyDelete
  8. Using Loan Calculator Australia are a great way to find out roughly how much you can borrow for your home loan. These online calculators allow the user to type in personal and financial details and the calculator works out the rough amounts depending on what you want to know.

    ReplyDelete
  9. This type of calculator outlined because the quantity of cash you've got obtainable for payment impacts on all aspects of shopping for a home. The VA home equity credit calculator tells you what you'll be able to afford; you wish to understand before you begin longing for your dream home. It helps you to make a decision on the proper programs; with the loan programs area unit restricted. A budget should be set before launching the shopping for method.
    PPI Claims Made Simple

    ReplyDelete
  10. where is the make text block ( the last part) I looked everywhere

    ReplyDelete
    Replies
    1. never mind found it looks like just one slot block ( call--make text --text(slot) ) but turns into three when you connect it

      Delete
  11. This is an informative post review. I am so pleased to get this post article. I was looking forward to get such a post which is very helpful to us. Keep it up.
    I know something information, to know you can click here
    home loans hobart
    mortgage broker hobart

    ReplyDelete
  12. Really very nice article. As well as helpful to gain knowledge about the loan calculator software. Thanks to update us.
    Call for Inquiry at any time or Free Demo..
    Mobile: +91-9799950666 /555/444
    loan calculator software | Commercial Loan Software

    ReplyDelete