Build a useful Android timer app with David Briddock
Last time we created a simple yet useful timer app with AppInventor 2 (AI2). This week we’ll extend this app by adding more components and additional coding blocks. 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, but even this isn’t essential.
What We’ll Learn
This week we’ll add some new interface components, namely timer start and stop buttons, which will be contained within a horizontal layout component.
We’ll also explore a faster and smarter app testing option that involves a real Android device. Then discover how to make source backups and deploy apps onto a real Android smartphone/tablet. So let’s get started.
Designer Changes
In your browser navigate to the AI2 home page (ai2.appinventor.mit.edu) and sign in with your Google account. Once signed in select the ‘My projects’ option in the Projects menu (or use the single-click ‘My Projects’ shortcut further along the menu bar). Select the ‘MMTimer’ project we created last time.
We’re automatically placed into Designer View mode. Here we’ll add two buttons, one to start the timer and reset the count to zero, and another to stop the timer.
Layout
We want to place these buttons next to each other. For that we’ll need a layout. From the Layout group in the components Palette grab a HorizontalArrangement and drop it towards the bottom of the Screen1 area. A blue bar appears to indicate its drop location.
With the HorizontalArrangement1 component selected in the Properties panel set the Width value to ‘Fill parent...’ from the popup list.
Buttons
Now grab two Button components from the User Interface group, one at a time, and drop them onto the HorizontalArrangement1 component. They will appear side by side. Now rename the left button to ‘StartButton’ and the right to ‘StopButton’. Select the StartButton and click the FontBold checkbox then set the Text value to ‘Start’, the Width value to ‘Fill parent...’, the FontSize to ‘48.0’ and the TextColor to ‘Green’. Do the same for the StopButton except set the Text value to ‘Stop’ and the TextColor to ‘Red’.
That’s the Designer changes done. Now it’s coding time, so click on the Blocks View button.
Coding Blocks
We need to define the Start and Stop button click event behaviour.
Select the StartButton component in the lefthand Blocks panel, grab a brown ‘when StartButton.Click’ block and drop it onto the coding area. Now we need to populate the empty inner space, which as you can see from the Blocks View image contains two other block elements.
The first is a brown ‘set global secs’ block from the Variables group. Snapped to the end is a blue Math number block with a value of zero. The second green ‘set TimerClock. TimerEnabled’ block is from the TimerClock component. Snap on a Logic group ‘true’ block to begin generating clock ‘tick’ events.
From the StopButton component grab a brown ‘when StartButton.Click’ block and drop it onto the coding area. Inside is a single block, namely a ‘set TimerClock.TimerEnabled’. However, this time we need a Logic group ‘false’ block to stop the clock generating ‘tick’ events.
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
Last time we used the Connect menu’s Emulator option to test the app. We could use this again.
However, the emulator takes a while to start up. More importantly we cannot test some functionality without using a real Android device, for example feedback from orientation, motion and GPS sensors.
Fortunately there are two other testing options, which use an Android smartphone or tablet.
AI2 Companion App
The best app testing experience is with the free AI2 Companion app. Installed on an Android device it communicates over a USB connection or a local wi-fi network. Go to the Google Play Store (goo.gl/VcZNrL) and install the AI2 Companion app onto an Android smartphone or tablet.
For the wi-fi option both the device and PC must use the same wi-fi network. Start the AI2 Companion app on your Android device then select the ‘AI Companion’ option in the Connect menu. Set the six character ‘handshake’ code by typing it in, or using the ‘scan QR code’ option (pointing the device’s camera at the QR code).
For the USB option attach the cable, then enable the Developer USB Debug mode (goo.gl/chuXJX). Now start the AI Companion app and choose the AI2 Connect menu’s USB option.
After a short pause our app should start running. Every time a Designer View change occurs the app is restarted. So it’s a great way to experiment or fix any bugs.
Source Export
All our work is saved in the cloud. But we can also download the app source to our PC. This export file bundles together all the design and block coding information into a single file with an AIA extension (which in reality is just a standard ZIP file).
It’s easy to do. Just select the ‘Export selected project (.aia) to my computer’ option in the Projects menu. The same menu also has an option to import AIA files. So, if you discover other AIA files on the web you can import them into your project list.
Android Device Deployment
In addition we can create a self-contained Android package file (APK), which can be installed on an Android smartphone or tablet. The same file can also be uploaded to the Google Play Store.
Use the Build menu to compile an APK and save it to your PC. Compilation time varies depending on the complexity of the app. Now this APK file can be ‘side-loaded’ onto an Android device via a USB connection. This process involves a number of actions on both the Android device and the PC, as described in various online tutorials (goo.gl/ZMKgAe).
Going Further
Feel free to experiment with this app. For instance, modify the font size and colour, change the label text to show minutes and seconds, or maybe add a third Pause button. Have fun. Next time we’ll build a motioncontrolled dice shaker.