Basics: Project 107w
Project name: Clicker counter app with MIT App Inventor 2
Tags: MIT App Inventor 2, Android, Counting clickers app
We will learn how to build Counting clickers app with MIT App Inventor 2.
Counting clickers are often used in theaters, auditoriums, and other large-group settings to count how many people enter; an attendant simply clicks a button for each person who comes in. We are going to make a basic counter, but it can be extended to count anything, or any number of things, like a baseball umpire’s counter or a billiards scorekeeper.
Step By Step instruction
1.Building the Android app with MIT App Inventor 2
1.Go to appinventor.mit.edu and click on Create Apps! orange button.
2.Click on Start New Project. Give your project a name – CountingClickers. Click on OK button. Your project will be saved.
3. Go to Designer editor tab. We need to modify the design of our app first.
- From User Interface drawer of Pallete panel, click and drag out Button component (Button1), drop it into the Viewer area which is in the middle of the Designer editor.
5. Adjust components properties. You will need to click on each component from Components pane and change the properties of component in the Properties pane:
- Click on Button1 and adjust its size properties to make it big on the screen. In Properties panel set the Width property to Fill Parent , Height property to 300 pixels, FontSize property to 25, Text property to the number 0 – it is our starting value for the counter, so it must be a number.
6.Go to Blocks editor tab.
7. The variable for this app is Button1.Text, which is the text stored in and visible on Button1. We have a start value – 0, provided in the Designer editor, and we will have that value increased by 1 every time the button is clicked. So, every time the button is clicked, we will get the current value, change it to be 1 greater, and then set that value back into the property. It will update the property withe the new number, which you will see on the screen. From Button1 component-specific drawer drag out the when Button1.Click do event handler block and drop it into the Blocks Viewer area.
8.From Button1 component-specific drawer drag out the set Button1.Text to block and add to the when Button1.Click do block.
9.From Built-In Math drawer drag out the addition block and add it to “to” part of the set Button1.Text to block.
10. From Built-In Math drawer drag out the number block and add it as shown below.
11. From Button1 component-specific drawer drag out the getter Button1.Text block and add it as shown below.
12.This is the final blocks diagram:
As you can see the addition block (+) adds the two numbers in its input sockets and then delivers the result to the left through its output socket. The two numbers we want to add are “whatever is currently in Button1′ Text” and 1. We use the getter Button1.Text to retrieve the value of whatever is in that variable at that moment and we use the setter of Button1.Text to take the result of the addition and store it back in the Text property of Button1. This set operation overwrites whatever is in there, so when we do this event again, we will get the new value from the getter block.
20. To have an app running without being connected to MIT App Inventor 2, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Select App (save to my computer) to download the app to your computer as an apk file.
21. Upload this package to your Android device (smartphone, tablet) and install. Open the Counting clickers app.
22. You can also use Emulator to check the Counting clickers app. You need to install MIT App Inventor 2 emulator, launch aiStarter. Go to Connect and select Emulator.
23. Every time you press the button, the number counts up by 1. It uses the Text property as a variable to hold whatever the current number is and then changes it, remembering the change. This is the basis of how all variables work- they store a value, which can be read with a getter and overwritten with something new with a setter.
Do you have any questions? Leave a comment down below!
Thanks for reading. If you like this project probably you might like our next ones, so please support us by subscribing our blog and donating.
We have learnt how to build Counting clickers app with MIT App Inventor 2.
You can extend the Counting clickers app by:
- Adding another button that resets the count to 0.
- Adding another counter button that counts independently of the first.
- Change the counter to increase the value by 2 on each click.
Attached on the beginning of this project description