App Inventor Tasks 4, 5 & 6 - Using Variables
This page will teach you how to make three simple apps that use variables.
​
These apps will prepare you for the final program - the Pop-up Blob game.
App #4 - Button Masher
The first app to make is a simple program that counts how many times a button is pressed (but don't press it too much!) This app will introduce you to using variables in App Inventor.
​
​
​
Open App Inventor 2 (use the button below) and create a new project. You will need to log in with a Google account.
​
Firstly, grab a button and two labels and place them in the Viewer.
​
Using the Properties tab, you need to make the following changes:
-
Button Text to 'Press Me!'
-
Button Height to 60 pixels and Width to 'Fill parent...'
-
Label 1 Text to 'Number of Presses'
-
Label 2 Text to '0'
-
Both Label 1 and Label 2 Width to 'Fill parent...'
-
Both Label 1 and Label 2 TextAlignment to 'centre : 1'
In the Components tab change the component names to be easier to code later.
Switch to Blocks layout and drag an initialize global to block into the centre.
In the blank space type 'Presses' - this is the name of the variable that will store how many times the button has been pressed.
​
Drag a 0 block from Math. This will set the number of presses to 0 when the app starts.
Drag a when ButtonPresses Clicked from the ButtonPresses section and add the necessary code inside.
​
This code increases the variable value of Presses by 1 every time the button is clicked. It also changes the LabelPresses text to display the number of presses.
Improve Your App
​
As you will have seen in the video at the top, I programmed the app to go a bit crazy when 35 presses were recorded. In the code below I have shown how to use an if then block to check if the number of presses is 35. If it is then I have made the button invisible - this is an important feature we will use in later programs. Copy this code and add the following features to the then part of the if statement:
​​
-
Set the background colour to black.
-
Change the Label1 Text Colour to white.
-
Change the Label1 Text Size to 40.
-
Change the Label1 Text to 'You broke it...'
Program 4 Complete!
App #5 - Timer
The second app to make is a timer that counts up one second at a time. It also needs a reset button that sets the timer back to 0 again. It will introduce you to the clock component and enabling / disabling components.
​
​
Open App Inventor 2 (use the button below) and create a new project. You will need to log in with a Google account.
​
The code for this program is straightforward; it will take more effort getting the layout right.
​
In the Palette tab, drag a HorizontalArrangement from the Layout section. It will look like an empty grey box at first. Grab a Button as well and place it underneath.
​
Now drag two labels into the grey box and place the second one directly after the first, it may take a few attempts to get them to appear side by side like below:
The last component to drag over is Clock (it is in the Sensors section in the Palette tab). It will go into its own section underneath:
Change the name of some of the components so that they make more sense.
​
Now to make some changes in the Properties tab. You should know enough by now to work out how to change your components so that it looks like this in your Viewer:
Change your layout to Blocks and add the code blocks to the right.
​
This code makes the Label named Seconds update by 1 every second, just like a timer.
The code to the left will make the Label named Seconds reset to 0 when the button is pressed.
Improve Your App
​
As you will have seen in the video at the top of this task, I added a pause/unpause button that will set the enabled feature of the timer to true or false. You will need to complete the following steps (I've been deliberately vague to make it a challenge - break it down into small steps and use the colours to help you):
​
-
Add a new button.
-
Add code that, when the new button is clicked, checks if the TimerEnabled is true.
-
If it is, then change TimerEnabled to false.
-
Else change it to true.
-
Now you also need to change the Text of the Button to read either "Pause" or "Unpause".
Program 5 Complete!
App #6 - Windy Day
The third app to make is an app that blows leaves around your screen. It will introduce you to random numbers, the canvas and coordinates.
​
Open App Inventor 2 (use the button below) and create a new project. You will need to log in with a Google account.
​
In the Palette tab, drag a Canvas from the Drawing and Animation section. A Canvas allows sprites (objects) to move around inside of it.
​
In Properties, change the Height and Width of Canvas to 'Fill parent...' for both, so it fills the whole screen.
​
In the Palette tab, drag over five ImageSprites from the Drawing and Animation section and drop them anywhere inside the canvas.
​
Download the leaf picture with all App Inventor images on the basics page here.
Upload the leaf image it in the Media tab.
​
In the Components tab change the names of your ImageSprites to be leaf1,
leaf 2 etc.
​
For each leaf sprite, in the Properties tab, change the Picture to the leaf you just uploaded and change Height and Width to 30 pixels each.
​
Finally, in the Palette tab, in the Sensors section, drag over a Clock.
​
Your Viewer should look like the image to the left.
X axis
Y axis
0
300
500
Now for an explanation of coordinates. Each sprite (leaf) has an x coordinate (horizontal) and a y coordinate (vertical). For example, the leaf in the top right would have coordinates of x = 270 and y = 100. Can you work out approximately what the other leaves coordinates would be?
​
What the code blocks below do is randomise the x and y coordinates for leaf1 every second.
The word integer means a whole number.
​
Use this code and add to it to make all 5 leaves randomly change coordinates.
Improve Your App
​
-
Add a pause / unpause button, just like in the Timer app that pauses the timer so that the leaves stop blowing (and starts them blowing around again too).
​
-
Find a nice picture (maybe of a park?) online and upload it in the Media tab. Set this as the Canvas BackgroundImage.
​
-
Add an audio file of some whooshing (why not record it yourself?).
Program 6 Complete!