Designing the user interface - Hello App Inventor!: Android programming for kids and the rest of us (2015)

Hello App Inventor!: Android programming for kids and the rest of us (2015)

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.

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

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:

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.

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

ASSETS YOU’LL NEED

Images: green pasture background and sheep. Sounds: “baa!”

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.

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

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:

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.

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.

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.

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.

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

ASSETS YOU’LL NEED

A completed version of the Getting to Know Ewe app.

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 ResetButton. 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]

1 You’ll find more on screen arrangement and a mini project to practice in the next chapter.

You can see how all this looks in the Designer.

Add the components by dragging them from the Palette onto your Designer screen, like so:

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).

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

· 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?

1. Button.Press

2. Button.Touch

3. Button.Click

4

What color are these blocks?

1. Events

2. Procedure calls

3. Values (numbers)

4. 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.