De­velop a Tip Cal­cu­la­tor Ap­pli­ca­tion in App In­ven­tor 2

Mov­ing on down the in­ven­tion lane, let’s cre­ate a sim­ple An­droid ap­pli­ca­tion that cal­cu­lates the tip we should give at a restau­rant. Do have fun try­ing it out.

OpenSource For You - - Developers -

Ihope that all of you are busy in de­vel­op­ing creative An­droid apps, and do­ing the job well too. If you have up­loaded any of your ap­pli­ca­tions on to the Google Play Store, please share your links with me. On our jour­ney so far, we have ex­plored the var­i­ous com­po­nents and fea­tures of a smart­phone. We can proudly say that we have mas­tered cer­tain as­pects like the com­po­nents avail­able for use in the pal­ette, and found out that play­ing be­tween the de­signer and block edi­tor is so much fun.

In our An­droid app de­vel­op­ment jour­ney, we have cov­ered all those ba­sic to com­plex ap­pli­ca­tions that are es­sen­tial for daily use. Now, let’s de­velop a sim­ple yet use­ful An­droid ap­pli­ca­tion. Leav­ing a tip is a tra­di­tion fol­lowed when we visit restau­rants. With this app, we will cal­cu­late the amount of the tip.

Theme of the ap­pli­ca­tion

The theme is pretty sim­ple—we will cal­cu­late the to­tal bill at the restau­rant by adding a per­cent­age of the bill as the tip. We will have in­put boxes for the bill amount and tip per­cent­age; then at the click of a but­ton, we will get the to­tal bill again, in­clud­ing the tip amount.

GUI re­quire­ments

For every ap­pli­ca­tion, we have a graph­i­cal user in­ter­face or GUI, which helps the user to in­ter­act with the on-screen com­po­nents. How each com­po­nent re­sponds to user ac­tions is defined in the block edi­tor sec­tion.

GUI re­quire­ments for Screen1

1. 2. 3. 4. 5.

La­bel: La­bels are static text com­po­nents that are used to dis­play some head­ings or mark­ings on the screen.

But­ton: A but­ton will let you trig­ger the event and is a very es­sen­tial com­po­nent.

Hor­i­zon­tal ar­range­ment: This is a spe­cial com­po­nent, which keeps all child com­po­nents hor­i­zon­tally aligned within it.

No­ti­fier: A no­ti­fier is used to dis­play some instructions or give users con­trol over their ex­ist­ing com­po­nents. You will see its functionality in more de­tail when we im­ple­ment it in the app.

Text box: Text boxes are in­ter­ac­tive com­po­nents and are used to take user in­puts. In our case, we need to in­put the bill amount and tip per­cent­age to cal­cu­late the fi­nal sum.

The com­po­nents that we re­quire for this ap­pli­ca­tion are given in Ta­ble 1. We will drag them on to the de­signer from the left hand side pal­ette.

1. Drag and drop the com­po­nents men­tioned in Ta­ble 1 to the viewer.

2. Vis­i­ble com­po­nents can be seen by you while the non-vis­i­ble com­po­nents will be lo­cated be­neath the viewer un­der the tag ‘Non­vis­i­ble’.

3. Change the ti­tle of Screen1 to the name of the ap­pli­ca­tion.

4. La­bel and text boxes will be aligned us­ing hor­i­zon­tal ar­range­ments.

If you have dragged and placed ev­ery­thing, the lay­out will look some­thing like what’s shown in Fig­ure 1.

6. Make the nec­es­sary prop­erty changes like we did when chang­ing the text prop­erty for the la­bel and but­ton com­po­nents (Fig­ure 2).

7. Re­nam­ing the com­po­nents helps to iden­tify them in the block edi­tor. 5.

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.