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!

The Slider component is dragged from the palette to the Viewer when in the Designer:

And then dropped on to the Viewer – note that the Slider appears really small! as shown below I added a VerticalArrangement layout first, and then dropped the slider inside the vertical layout box:

Select the Slider1 component and then change the Properties. The MinValue should be set to 0 and the MaxValue to 30 (unless you prefer to choose other values) and the ThumbPosition is set to 20 as the initial starting point. In other words, the default or assumed tip amount is 20% before adjustment:

 

Use the Width property to set the size of the Slider on the app’s screen. I chose to set it to the full screen width but it could also be set to a specific number of screen pixels.

The Blocks Code

When the app is running, each time the slider position is adjusted, a PositionChanged event is thrown. Our app adds a block to process the PositionChanged event:

As the slider is adjusted by the user, the current position is updated on the screen to show the selected tip amount. Since the range of Slider values is from 0 to 30, we use the thumbPosition property directly and copy it to the label on the screen.

Using the Slider is quite easy!

The remaining blocks code is simplified since we can remove the error checking used in Version 1. Instead, we just take the ThumbPosition and divide it by 100 (to convert into a fraction – remember 20% is really 0.20) for use in the calculations.

(Click on the image – once or twice – for a larger version)

Key Features Shown

• Introduced the Slider user interface component
• Demonstrated how a user interface design change can eliminate a source of potential user errors

Downloads

• 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…”