Hello App Inventor! Android programming for kids and the rest of us. Chapter 2. by Paula Beer and Carl Simmons. Copyright 2015 Manning Publications

SAMPLE CHAPTER

Hello App Inventor! Android programming for kids and the rest of us by Paula Beer and Carl Simmons Chapter 2 Copyright 2015 Manning Publications

Brief contents 1 Getting to know App Inventor 1 2 Designing the user interface 30 3 Using the screen: layouts and the canvas 48 4 Fling, touch, and drag: user interaction with the touch screen 65 5 Variables, decisions, and procedures 79 6 Lists and loops 112 7 Clocks and timers 146 8 Animation 165 9 Position sensors 183 10 Barcodes and scanners 203 11 Using speech and storing data on your phone 218

12 Web-enabled apps 236 13 Location-aware apps 257 14 From idea to app 270 15 Publishing and beyond 312

CHAPTER 2 Designing the user interface The chapter 1 apps were simple, but they taught you a lot about how the different parts of App Inventor fit together. In this chapter, you ll build on this to make apps that look fun and do interesting things using graphics and sound. The basic app you ll make is called Getting to Know Ewe. Prod the sheep, and it makes a cute baa! sound. You ll then improve the app to make the sheep disappear in fright if you shake the phone an app called Ewe Scared Her! People choose to download apps because the apps do something useful, look attractive, and are as easy to use as possible. The doing something useful bit is what this book is all about. This chapter focuses on the second two aspects making an app that looks attractive with a really simple user interface. What is a user interface? One of the most popular Android game series is Angry Birds by Rovio. Angry Birds does something useful: it provides challenging puzzles (plus you get to blow stuff up). This isn t the only reason it s popular though a lot of work has gone into the user interface. 30

CHAPTER 2 Designing the user interface 31 First, it looks great: the characters, artwork, sounds, and text all work together flawlessly. Second, it s incredibly simple to play: the user only needs to tell the game at what angle and speed their next bird should be fired. The game could ask the user to type these values on a number pad and press Enter. Instead, the game designers came up with the brilliant idea of having the player drag the bird away from a catapult at an angle and then let go just like you would if you used a catapult in real life. This is one of the reasons people play the game for hours it s so easy to play again, and again, and again. The final thing that Angry Birds does incredibly well is give feedback to the user about the results of flinging the bird. So you see the bird fly and crash and pop, you hear the sound effects, and you feel your phone vibrate. We call this combination of things the user interface, or UI for short: How the app looks graphic design, typography (fonts), and color How people tell the app what they want to do How the app gives information back to the user through the screen, speakers, or haptic feedback (buzzing the phone s little motor) Learning Point: Input > process > output

32 Hello App Inventor! Using the Designer to make a UI The way App Inventor works means you need to do the following: 1 Design the UI first in the Designer window (even if it s only a rough draft). 2 Program the Blocks Editor to tell the app what to do. 3 Test the program on your phone or emulator. You ll spend most of your time as an app inventor flipping backward and forward between these three activities, like this:

CHAPTER 2 Designing the user interface 33 Learning Point: Working from the top down In App Inventor, you design the UI first and then write a computer program. This is an example of a top-down approach. An alternative way of doing things in other programs is to start with the nuts and bolts of the program and worry about the UI later bottom-up. Both approaches have advantages and disadvantages, and in practice you ll probably find yourself doing a little of each as you build apps. Speeding along: built-in components As a computer and smartphone user, you ll recognize lots of the components in App Inventor s Palette. Elements like buttons, screen labels, and text boxes are common in web pages, desktop programs, and smartphone applications. Because App Inventor has these readymade elements, you can speed up the process of creating apps.

34 Hello App Inventor! In this chapter, you ll use only a few of the components. You ll say hello to more and more of them as you go through the book, but feel free to dip in now and take a look at some of the more exotic components and what they do by using the built-in component help. Now, let s use some components to build your fun little app. Getting to Know Ewe app PURPOSE OF THIS APP This app displays a picture of a sheep in a field. When the user prods the sheep, it baas. APP RATING 1 ASSETS YOU LL NEED Images: green pasture background and sheep. Sounds: baa!

CHAPTER 2 Designing the user interface 35 1. Setting up the project Start a new App Inventor project by choosing Project > Start New Project. Give it the name GettingToKnowEwe, and click OK. You should see the familiar four columns: Palette, Viewer, Components, and Properties. You can see that the App Inventor screen has changed. This is only a rough draft of how the app will look on your emulator or phone. You can check out the differences by connecting your phone or starting an emulator; as you make changes in the Designer, those changes will appear immediately on the phone. Learning Point: Setting properties All components have properties things you can change about that component. Some components have many properties (such as Screen), others have only a few (such as Sound), and some have none (such as Camera). The Properties column on the right side of your screen lets you set the properties of components when your app first starts. Later, the programs you write will be able to both read and change properties. This is called GETting and SETting properties you ll notice that many blocks start with the word get or set.

36 Hello App Inventor! 2. Adding a sheep image You need two components to complete your app s UI: a sheep picture and a baa! sound. Looking at the component options shown next, which one do you think will let you insert your sheep? CHOOSING THE COMPONENT ADDING AND RENAMING THE BUTTON

CHAPTER 2 Designing the user interface 37 MAKING THE BUTTON LOOK LIKE A SHEEP Learning Point: Portable Network Graphics (PNG) format We re using a PNG formatted image of a sheep with a transparent background. This means the sheep won t have a white box around it. The sheep has button text written across its eyes and is rather large. So, change the Text, Width, and Height properties to fix these problems. We ve zoomed in on the relevant properties to help you find them:

38 Hello App Inventor! 3. Adding a baa! sound The last component you need is the baa! sound: Finally, you need to attach a sound source file to your BaaSound component. App Inventor can use sound files in a variety of formats; we suggest you use PCM/WAV files or MP3s because they should work on all phones. WARNING It s easy to forget this step with sounds. If a button or background doesn t have a media file attached, it s obvious in the screen preview. But if you forget a sound, you may only realize it when you run the program later.

CHAPTER 2 Designing the user interface 39 Learning Point: Nonvisible components A sound is a nonvisible component you don t see it on the screen. Other nonvisible components include input devices like the camera, the barcode scanner, and the accelerometer and orientation sensors that detect movement and direction (shaking or tipping the phone). When you design your UI, drag over the desired components and drop them onto the screen. You ll see them appear in the Non-Visible Components section beneath the Viewer screen. That s it! Your UI has all the elements you need to make the basic version of the Getting to Know Ewe app. You ve chosen and added all the objects, attached media to them (images and sound), and set some of their other properties like Size and Text. The finished UI should look like this: 4. Programming the blocks, part 1: playing the sound Remember how in chapter 1 you used a Button.Click event to tell the program you wanted it to do something? This app works exactly the same way when a user prods the sheep, they re really clicking a button.

40 Hello App Inventor! Switch to the Blocks Editor, and, if you haven t already, connect a phone or emulator as you did in chapter 1. Create the blocks like this: Now try it click the sheep on your phone, and you should be rewarded with a bleating sheep! Learning Point: Calling procedures In this app, you play the baa! sound using a built-in procedure, Play. This is known as calling a procedure. You can spot procedures because their blocks are purple and include the word call. In chapter 5, you ll learn how to create and call your own procedures. 5. Programming the blocks, part 2: vibrating the phone Click the BaaSound section in MyBlocks, and you ll see lots of purple procedures such as pausing, resuming, and stopping the sound. There is also a procedure to vibrate the phone. You ll use this so that in addition to playing the baa! sound, the phone will vibrate.

CHAPTER 2 Designing the user interface 41 ENTERING A VALUE There are 1,000 milliseconds in 1 second, so enter 1000 into the BaaSound.Vibrate block. You have two options for entering values: choose the one that you find easiest. Now plug your Number block (with the value 1000) into the empty socket of BaaSound.Vibrate. You ll see the yellow exclamation point disappear, and the app will now work on your phone try it.

42 Hello App Inventor! Experiment with different values for BaaSound.Vibrate. Try these challenges: What s the shortest time you can enter and still feel the phone vibrate? How many milliseconds do you need to enter to make the vibration last exactly as long as the baa! sound? Extra challenge: Ewe Scared Her! app PURPOSE OF THIS APP Click the sheep, and she baas. Shake the phone, and the sheep disappears, and the message Ewe scared her! appears on a reset button. The user clicks this button to start again. APP RATING 1 ASSETS YOU LL NEED A completed version of the Getting to Know Ewe app.

CHAPTER 2 Designing the user interface 43 1. Saving a new project To get started, save a copy of GettingToKnowEwe. 2. Adding components: accelerometer, reset button, and screen arrangement To make this app, you need to go back to the Designer screen and think about inputs and outputs. The input is easy you need to know if the phone is shaking. Most phones have an accelerometer that can detect movement. The AccelerometerSensor component in the Sensors section of the Palette can detect a Shaking event. You also need a ResetButton input; this detects when a user clicks the reset button, just like in Getting to Know Ewe. Next is the output. When the phone is shaken, you ll hide SheepButton and show Reset- Button. When the reset button is clicked, you ll hide it and show the sheep. For the overall layout, it would be helpful to be able to arrange things in a grid. To do this, you can center the button at the top of the screen and the sheep at the bottom using a VerticalArrangement component. 1 You can see how all this looks in the Designer. 1 You ll find more on screen arrangement and a mini project to practice in the next chapter.

44 Hello App Inventor! Add the components by dragging them from the Palette onto your Designer screen, like so:

CHAPTER 2 Designing the user interface 45 3. Arranging the screen Select the VerticalArrangement component, and set its Height and Width properties to Fill Parent. Set its AlignHorizontal property to Center. Select the image component (Image1), and set its Height to 150 pixels; this will be a spacer, so the sheep appears to stand on the grass. 4. Programming the blocks Switching to the Blocks Editor, you need two new blocks for your two new input events. From the AccelerometerSensor1 and ResetButton blocks, add these events to the workspace: AccelerometerSensor1.Shaking ResetButton.Click You want to set the Visible property of SheepButton and ResetButton depending on which event happens. A table will help here: Event SheepButton ResetButton AccelerometerSensor1.Shaking Hidden Visible ResetButton.Click Visible Hidden To change an onscreen component so it s visible or hidden, you set its Visible property to True (for visible) or False (for hidden).

46 Hello App Inventor! HINT Blocks that set properties are green. Get the set blocks shown from the SheepButton and ResetButton sections of the blocks. To add the true and false blocks, you can either type true or false into a blank area of the Blocks Editor and press Enter, or go to the Built-in > Logic section. This is the block for hiding the sheep and showing the reset button. Now can you figure out how to do ResetButton.Click? Are you done? Wow, congratulations! You re truly on your way to being an amazing app designer. As you go through the book, you ll see how you could make improvements to this app, like animating the sheep to move off the screen instead of just disappearing or how about a walking sound effect? In chapter 3, we ll look at how you can use your phone to draw graffiti and how to create a customizable sound FX machine you can carry around in your pocket. Taking it further Adapt Ewe Scared Her! so that instead of hiding the sheep, you change the image to an angry sheep and change the reset button to say Ewe Made Her ANGRY!? What did you learn? In this chapter, you learned about the following: What makes a good user interface Input, process, and output Switching between the Designer screen, the Blocks Editor, and your phone (or emulator) to make an app Top-down versus bottom-up program design App Inventor s built-in components and how to find out about what they do

CHAPTER 2 Designing the user interface 47 Renaming components Setting properties Adding an image to a screen or a button Hiding and showing objects Playing sounds by calling a Play procedure Detecting when the phone is shaken, using an accelerometer Creating a simple screen arrangement using a VerticalArrangement component Test your knowledge 1 Pick a device in your house. What are its inputs, and what are its outputs? 2 Why do apps sometimes look different in the Designer than they do in the emulator? 3 What event is triggered when a button is clicked? a Button.Press b Button.Touch c Button.Click 4 What color are these blocks? a b c d Events Procedure calls Values (numbers) Set property Try it out 1 Create a Whipcrack app that plays the sound of a whip cracking whenever you make a whipping movement with the phone (use the Accelerometer.Shaking event). 2 Create a Canned Laughter, Drum Roll, or Rim Hit app with a button to activate the corresponding sound effect. 3 Create a simple sound-clip player app with Play, Pause, and Resume buttons. At this stage it will work only with the sound clip you specify in the sound properties.