Build an Android dice shaker app with David Briddock
Over the last few articles we’ve used App Inventor 2 (AI2) to build our first Android app, a useful timer.
In subsequent issues we’ll build apps that explore particular aspects of AI2 coding. This time it’s a random dice shaker app that’s driven by a motion sensor.
Remember, all you need to play along is a Windows/Mac/Linux PC, web browser and Google account. Ideally you’ll also have an Android smartphone or tablet for testing.
What We’ll Learn
To test this particular app you’ll need access to an Android device, as it uses one of its built-in sensors. The sensor in question is the accelerometer, which captures device movement and acceleration information. In this case we’ll be looking for a shaking motion.
In addition, we’ll use the Android device’s text-to-speech capabilities to provide an audible indication of the dice number.
Starting AI2
In your browser, navigate to the AI2 home page (ai2.appinventor.mit.edu) and sign in with your Google account.
We need a new project, so in the Projects menu, select the ‘Start new project’ option and give it a meaningful name, such as ‘MMDiceShaker’.
Screen Properties
We’re automatically placed in Designer View mode. Notice there’s already a component called ‘Screen1’. We’ll drag and drop the other components onto this screen.
With Screen1 selected, go over to the right-hand Properties panel. First, ensure the AppName is set to ‘MMDiceShaker’, then set the Title to ‘MM Dice Shaker’.
Now change the AlignHorizontal property to ‘center’ with the spinner control, then do the same for the AlignVertical property. Next set the ScreenOrientation to ‘Portrait’. An optional step is to change the BackgroundColor – say, to Blue as shown in the image.
Another optional step is to add an app icon image. Ideally this will be around 48x48 pixels in size, but any smallish image will do, as it’s automatically rescaled. Click on the Icon property and select the ‘Upload File...’ button from the pop-up options. Select the ‘Choose File’ button, locate the desired image file on your PC and then click ‘OK’.
Adding Components
Now for the screen components. We’re going to display the dice number with a large font label in the centre of the screen.
In the left-hand Palette panel, open the User Interface group. Grab a Label component, then drag and drop it into the Viewer panel coding area. Next, we need to fill the empty ‘do’ space to define what happens when a shaking motion event is detected.
The first task is to set the label text. Select the Label1 component and grab a green ‘set Label1.Text’ block. Drag this label over to the coding area and snap it into position inside the brown block.
We need to set the label text value to a randomly generated number between one and six. Open the Math group and select a blue ‘random integer from’ block. Snap this onto the end of the green block we just added. To set the random range between one and six, just click on the numbers and type in the new value.
Speak To Me
Now we’ll add the text-to-speech behaviour. It’s really an optional step, but definitely a fun thing to do. With AI2 we can create a text string and have the device speak the text back. Any text string will work.
Back in the Blocks panel, click on the TextToSpeech1 component and grab a purple ‘call TextToSpeech1.Speak’ block. It needs to be snapped into position directly underneath the green ‘set Label1.Text’ block.
Now we need a text string. From the Text group, grab a magenta ‘join’ block and snap it onto the end of the purple block. Notice there are two empty text values we need to set.
For the first value, grab a simple string from the Text group. Snap it into position then click on the space and type in ‘It’s a ’ (or whatever text string you prefer). For the second value select the Label1 component, grab a light green ‘Label1.Text’ block and snap it into place.
And that’s the coding done. Ensure the warning and error counts in the bottom-left corner are both zero, then carefully check your code against the Blocks View image.
Testing
To test this app, we can’t use the Emulator, because it doesn’t imitate an accelerometer shaking motion.
However, we can test with the AI Companion App installed on an Android device and the Connect menu’s ‘AI Companion’ or ‘USB’ options (as we discussed earlier in the series).
Side-load the finished app onto an Android device (goo.gl/ZMKgAe), so it’s within arms reach the next time you play a dice-based board game.
Going Further
There are many things you can do to enhance this app. One simple thing would be to adjust the background or text colours. A more adventurous exercise would be to have two dice labels, each having its own random number generation blocks.
Next time, we’ll be building a fully functional web browser app.