Tag Archives: slider

Tip Calculator App (version 2) for App Inventor

What the App Does

This is a simple app to calculate the tip and total bill at a restaurant – or other service provider where a tip is common place.

This is the second of 3 apps that implement a tip calculator.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 (this tutorial) introduces 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 will introduce a way to avoid all user data entry errors – by designing the app in such a way that the user can enter only correct values.

The Tip Calculator User Interface

In version 2, we eliminate the text box for tip percentage and replace it with a Slider component and we use a Label component to display the current setting of the Slider. A slider is something you drag with your finger, as shown in this screen shot:


We set the tip amount by putting our finger on the “thumb” and dragging the thumb left or right. “Thumb” is the name given to the moveable control that appears on the slider.

As we drag the “thumb” control on the slider, the amount of the selected tip is shown – which is 20% in this screen shot.  Using this design with a Slider, it is impossible for someone to enter an invalid tip!

Continue reading Tip Calculator App (version 2) for App Inventor