App Inventor Tip Calculator version 5: Fully automated!

What the App Does

This is the fifth version of 5 app versions that implement a tip calculator – and the final version is pretty cool! This app is useful – I was recently traveling and used it on my smart phone to calculate restaurant tips – I will post a short tutorial on how to install this app on your phone.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 introduced an improved user interface to eliminate user data entry errors.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

In Version 5, we eliminate the “Calculate tip and total amount” button by making the calculation automatic. Each time we enter a digit or adjust the slider, the tip is calculated immediately. There is no need to press a button to do the calculation.  Just enter a bill amount and optionally adjust the slider to select a tip percentage.

The Tip Calculator User Interface

The new user interface eliminates the Calculate button and adds a single “Clear All” button as a quick way to reset the calculator. This sets the bill amount back to zero and the tip amount to 20%.

Here is a view of the app in operation – the bill amount of 23.45 has been entered on the keypad and the tip amount is 20%. The tip and total bill are shown at the bottom of the screen.

Each time any digit is entered – or the tip is adjusted – the tip and total is automatically calculated.



The Designer View

Minor changes to the user interface are also made to fix some minor problems with the user interface. We “clean up” these problems by setting the text of the label that shows the bill amount to the null string “” (and make some minor changes to the blocks). We have also removed the old “Calculate” button and replaced it with a “Clear All” button. Finally, the original “20” % is changed to “20.0” %.


The Notifier1 component is no longer needed in this version of the app and has been deleted.

The Blocks Code

How do we implement the automatic tip calculator?

First, the blocks that calculate the tip are placed into a “to” procedure, like this:


(Click on the above image to view a larger version – depending on your browser you can click twice to see a fully enlarged view.)

Then, call the CalculateDisplayTip procedure each time either the slider is changed or a digit is entered. Each time the PositionChanged event occurs, we “call CalculateDisplayTip“. TipCalculator5_BlocksPosChanged

To update the tip calculation when digits are entered, a “call CalculateDisplayTip” block is added to UpdateDisplay.  Since each button “Click” handler calls UpdateDisplay, the screen is automatically updated each time a digit button is pressed.


In version 4, there is a minor problem – deleting numbers can lead to an extra “0” zero on the display. To clean up this code, the event handler for the del button is improved as shown here – if everything has been deleted (or the length of the AmountBilled string is 0), then the AmountBilled is set to the null string “” instead of “0”.


Finally, the “Clear All” button is implemented to set AmountBilled to the null string and reset the slider to “20%”.


There are still some minor problems with this app. For example, with the slider set to a minimum tip of 0% and a maximum of 30%, when you slide it around, you cannot force the fractional percentages to land on whole numbers as you move the thumb. There is an easy fix for this that you can implement on your own – in the PositionChanged handler, use the round math block to adjust the thumbPosition values to whole numbers. A value of 20.1% would be converted to 20%. Give it a try!

Key Features Shown

  • Version 5 enhances the newer user interface design by eliminating the “Calculate” button. This shows how a re-thinking of the original design can lead to a much improved program. Now, user data entry errors are no longer possible. Plus, the program is simplified by elimination of the “Calculate” button and making the tip calculation automatic.

Summary of Versions 1 to 5

  • Version 1 used a simple user interface to quickly build an App Inventor app. This “simple” user interface worked but required checks for possible data entry errors by the user.
  • Version 2 replaced the entry of a tip value with a slider control for selecting a tip percentage. This user interface improvement eliminated the possibility of a data entry error for the tip percentage.
  • Version 3 removed the Amount Billed text entry and replaced this with a numeric key pad. This redesigned user interface eliminated data entry errors completely.
  • Version 4 cleaned up the code by “re-factoring” the blocks into procedures, which reduced the duplicated code.
  • Version 5 made an additional improvement to the user interface by making the tip calculation automatic.  The automatic version eliminates the “Calculate Tip” button by automatically calculating the tip as each digit is entered or if the tip value is changed with the slider. Because we had re-factored the app in to “procedures”, adding the automatic calculation feature was easy – just create the CalculateDisplayTip procedure and call it from two places in the existing code – and we are done!  Subdividing a complex problem into sub-problems is an important part of software design and implementation.

This tutorial introduced new App Inventor features – and introduced the idea of evolving a design to a better design, both in terms of the code (by using procedures) and in terms of the user interface (replacing the original text input with a slider and a numeric keypad).


  • Source code App Inventor “.aia” source file (App Inventor source code files have the filename extension .aia)
  • Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select “Import project (.aia) from my computer…”

Please Share on Social Media

Please click on the buttons below this post to share with your friends on Facebook or other social media.

If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!

One thought on “App Inventor Tip Calculator version 5: Fully automated!”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.