OpenSource For You

Develop a Tip Calculator Applicatio­n in App Inventor 2

Moving on down the invention lane, let’s create a simple Android applicatio­n 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 applicatio­ns 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 developmen­t journey, we have covered all those basic to complex applicatio­ns that are essential for daily use. Now, let’s develop a simple yet useful Android applicatio­n. Leaving a tip is a tradition followed when we visit restaurant­s. With this app, we will calculate the amount of the tip.

Theme of the applicatio­n

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 requiremen­ts

For every applicatio­n, 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 requiremen­ts 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 arrangemen­t: This is a special component, which keeps all child components horizontal­ly aligned within it.

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

Text box: Text boxes are interactiv­e 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 applicatio­n 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 applicatio­n.

4. Label and text boxes will be aligned using horizontal arrangemen­ts.

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.

Newspapers in English

Newspapers from India