- The MIT App Inventor Site
- Getting Inside an App
- Exercise: Sherlock Is Watching
- What Can You Build?
- Uploading to Google Play
- Summary
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Exercise: Sherlock Is Watching
Next we create an app that uses some of the basic functionality described in this section. As with the other apps you will build in this book, there is flexibility in the specifics. Feel free to experiment after following the steps to get a feel for how all the pieces work and the type of customizations possible. Learning to build apps is a process that involves both following the step-by-step directions and branching out on your own.
Navigate back to your projects by clicking My Projects at the top of the page (see Figure 2.14).
Figure 2.14 The My Projects button is for creating new projects and accessing existing ones.
- If you created a CatWatch app earlier, select it from your list of projects; otherwise, create a new project called CatWatch.
Click User Interface in the Palette. The Palette then expands to reveal several choices, such as Button, Checkbox, and Clock. Click and hold the Button choice, and then drag it onto the Android home screen in the Viewer (see Figure 2.15). A button appears in the Viewer, indicating that an element has been added to the screen. The button’s name also is added to the Components tree.
Figure 2.15 Adding a button to the Viewer.
- The button shows with the following default text: Text for Button1. Let’s change the name of the button. Click the label in either the Viewer or the Components tree and then click the Rename button. In the box that launches, give it another name, such as Meow.
- Notice that changing the name of the button does not change the button’s text. To change the displayed text, click the button and then find the box labeled Text inside the Properties pane. Then highlight the text and type Meow. The text will change in the Viewer.
)
)
Adding an Image
Images are an effective way to add some visual polish to an app. Next, we insert an image into the app.
- If you have not done so already, download the CatIsWatching image from the book’s InformIT page.
Find the box labeled Media, which is just below the Components box. Click the Upload File button (see Figure 2.16) and then upload the CatIsWatching file. This adds the image to the app, making it available to any component that uses the image. Note that the filename appears in the media box.
Figure 2.16 Uploading an image.
- Click User Interface in the Palette. Then click and hold the image and drag it onto the Android home screen in the Viewer. A blue bar shows where you can place the image. By moving the mouse, you can place the image above or below the Button. When the blue bar is below the Button, drop the image. Next click the Image1 button in the Components box. The Properties pane updates to display the properties associated with the image.
Click the box labeled Picture. All available images in your app are listed; select the CatIsWatching image. Click OK to see the image appear in the Viewer (see Figure 2.17).
Figure 2.17 Uploading an image.
- The image of Sherlock the cat needs to be tweaked to properly fill the screen. Click in the width box and then click the box that reads Pixels. Type 320 pixels.
- The procedure is the same for the height: Click the height box and then type 400 pixels.
- This app requires one more element. From User Interface, click and drag the Label component. Again, watching the blue insertion bar, drop the Label between the button and the Image components. Next, select Label1 in the Components box. Click the button underneath the BackgroundColor label, which is currently set to None. Then choose Green.
It is time to write some text inside the box. Go to the Text box and type Sherlock is watching. Choose TextAlignment and change this selection to Center. Notice that this does not change the position of the label—it changes only the text inside it (see Figure 2.18).
Figure 2.18 The completed image and label.
- Click Blocks in the upper-right corner. You should see Meow, Label1, and Image1 underneath Screen1. This is where you would drag these components into the Blocks Editor for further programming.
)
)
)
This first app is relatively simple, but it should make you feel more familiar with the core pieces of App Inventor. Later apps will make more extensive use of the interface elements and how they can be programmed. We will also explore how to put this app on your own device and interact with it.