Develop a Tip Calculator Application in App Inventor 2

Moving on down the invention lane, let’s create a simple Android application that calculates the tip we should give at a restaurant. Do have fun trying it out.

Ihope that all of you are busy in developing creative Android apps, and doing the job well too. If you have uploaded any of your applications on to the Google Play Store, please share your links with me. On our journey so far, we have explored the various components and features of a smartphone. We can proudly say that we have mastered certain aspects like the components available for use in the palette, and found out that playing between the designer and block editor is so much fun.

In our Android app development journey, we have covered all those basic to complex applications that are essential for daily use. Now, let’s develop a simple yet useful Android application. Leaving a tip is a tradition followed when we visit restaurants. With this app, we will calculate the amount of the tip.

Theme of the application

The theme is pretty simple—we will calculate the total bill at the restaurant by adding a percentage of the bill as the tip. We will have input boxes for the bill amount and tip percentage; then at the click of a button, we will get the total bill again, including the tip amount.

GUI requirements

For every application, we have a graphical user interface or GUI, which helps the user to interact with the on-screen components. How each component responds to user actions is defined in the block editor section.

GUI requirements for Screen1

1. 2. 3. 4. 5.

Label: Labels are static text components that are used to display some headings or markings on the screen.

Button: A button will let you trigger the event and is a very essential component.

Horizontal arrangement: This is a special component, which keeps all child components horizontally aligned within it.

Notifier: A notifier is used to display some instructions or give users control over their existing components. You will see its functionality in more detail when we implement it in the app.

Text box: Text boxes are interactive components and are used to take user inputs. In our case, we need to input the bill amount and tip percentage to calculate the final sum.

The components that we require for this application are given in Table 1. We will drag them on to the designer from the left hand side palette.

1. Drag and drop the components mentioned in Table 1 to the viewer.

2. Visible components can be seen by you while the non-visible components will be located beneath the viewer under the tag ‘Nonvisible’.

3. Change the title of Screen1 to the name of the application.

4. Label and text boxes will be aligned using horizontal arrangements.

If you have dragged and placed everything, the layout will look something like what’s shown in Figure 1.

6. Make the necessary property changes like we did when changing the text property for the label and button components (Figure 2).

7. Renaming the components helps to identify them in the block editor. 5.