Android 001: Hello World App

This will help you:

Create, test and install your first Android app

Android App Inventor is an online program which allows you to create, test and install Android apps using a block-based coding language. This means you don't have to worry as much about knowing what to type to make something happen - you can just look for a block that does what you need, and drag and drop it into your code. In this activity, you'll create a VERY simple Android app while familiarizing yourself with App Inventor. If you have an Android device handy, you can even test or install it.

Time: 1-2 hours / Level: A1

You should already:

• Have an Android device to test on (optional)

Step 1: App Inventor for Android

Go to the App Inventor for Android website. Click on the "Create Apps" button in the upper right corner. Create an account or sign in using a Google account if you prefer. After that, you should be taken to the "My Projects" page.

Step 2: Creating a Project

The "My Projects" page shows buttons to start, delete and publish projects near the top, with any current projects you have listed underneath. At the very top of the page, there are drop-down menus that allow you to further manage projects, connect to an app simulation, build a packaged app, and get help.

From the "My Projects" page, click on "Start new project" and enter a name. Choose a name that makes sense, but don't worry - you can change the app's name later. The project will appear in your list of projects. Click on it to open the editor.

Step 3: Screen Layout Editor

The screen layout editor, or "Designer", is where you can change the appearance of your app, add pages or screens, add components, and edit some of the main details of your app, like its name and icon.

The left side has expanding panels of components that you can add. The "User Interface" panel has some basic components that the user might see and interact with. The "Layout" panel has containers that arrange components in a certain way and allow scrolling. You should explore the other panels to see what App Inventor can do. See if you can find components for:

• Playing a song

• Converting speech to text

• Translating text

• Taking a video

• Having a character sprite move around

• Detecting location

• Scanning a barcode

• Sending a text

• Saving a file to the device

• Saving some app data to the device

• Saving data to an online database

• Send data over Bluetooth

Notice that a lot of these components aren't something you can see, but you need to drag them into the display area for them to be included.

The right side of the screen has a "Components" panel and a "Properties" panel. The "Components" panel shows a tree of all the components you have. You can select, rename and delete components from here. Right of that, the "Properties" panel will show all kinds of changeable properties for any selected component. In the properties for the first screen, you can change the app name and icon, whether the title shows at the top, and a lot more about how the app appears.

Once you get familiar with the layout, you can start building an app. Our first app will just have a button that makes some text display. Drag a button and a label on to the model phone screen to add them. For bonus points, start with a Layout component of some sort, and add the button and label inside it.

Go over to the "Components" panel, click each of your components, and click "Rename" at the bottom. Rename them to something short that makes sense - for now, the name doesn't matter, but adding components without naming them should be illegal because when you have several, say, buttons, you need to know what they're each for!

Next, select the button and go to its Properties. Near the bottom, there is a box labeled "Text", where you can set the text on the button. Change it to something, like "Next screen", or leave it blank. While you're here, try changing the button height, width, shape, or color. You can make the button un-clickable ("Enabled"), choose if it changes appearance when clicked ("ShowFeedback"), or make it invisible at startup ("Visible").

Finally, select the label and change the text and other properties however you want to. It can be the beginning of a joke, a greeting, an instruction to click the button... whatever.

At the top of the page, to the right of the app name, is a bar to manage screens. Screens are like pages of your app. They each have their own components and importantly, their own code. Add a screen and call it "NextScreen". After a second, the designer should automatically switch over to your next screen. In this screen, add whatever you want - maybe an image and a text label, or a music player.

Play with the properties of your chosen components, and maybe arrange them in a Layout component. Lastly, add a button, name it "BackButton", and set the text on it to "Back".

In this example, a vertical arrangement contains some HTML formatted content (yes, that's an option) in a label component above a bar containing the back button.

In this app, we want to start on the first screen with some text, then click a button to go to the next screen. That next screen will have whatever content you put on it, and a back button that goes back to the first screen. Since you have all the components you need and you know what they need to do, it's time to code!

In the upper-right corner, click on the "Blocks" button (next to "Designer") to get to the blocks editor.

Step 4: Code Blocks Editor

In the blocks editor, you work on the code for one screen at a time. You get code blocks from the expanding menus in the left panel, and drop them into the editing area in the middle. The "Built-in" section contains code elements that can be used regardless of components. They do the logical, programmatic steps of the code (like doing math, making decisions, repeating steps, and remembering values.) Below the "Built-in" blocks are block specific to the components on a screen. They handle things like appearance of the components and triggered actions.

Click through some of the menus of blocks. If you are familiar with programming, you may recognize some of the instructions on the blocks as similar to commands and structures in programming.

Some of the blocks have "mouths" or "overhangs"; these blocks are intended to have other instruction blocks placed inside them. Some blocks have notches in the top or bumps on the bottom; these are able to have other instruction blocks happen before or after them. Some have puzzle-piece-like slots; this means that an answer block (with a puzzle-piece tab) is required to go there.

If a block is resisting "snapping" into another, it might be because it can't work there. This happens a lot with the puzzle-piece answer blocks. For example, if you try to snap a text block (they're pink) into a math problem, it won't work. Because text is the wrong type of information, it can't be used.

So, basically, blocks fit together how they look like they should. You can stack instruction blocks, and stick answer blocks into them when needed. You can put one or more instruction blocks into a block with a "mouth". Generally, instruction blocks do something, and answer blocks can be used to get information. Some blocks do both.

Okay, that's a run down of how blocks work. You should click around the menus and see what's where. Try to figure out, roughly, what 2-3 blocks from each section do. It'll help you locate similar ones.

Finally, let's make your app work. In the upper left, there's still a drop-down to choose the screen. Select "Screen 1" or the name of your starting screen. Here's what needs to happen on Screen 1:

When the Next button is clicked:
    Open the next screen

This method of writing out pseudocode, then finding blocks that roughly match up, is a great way to create code. It separates the task of thinking about steps from the task of expressing those steps in a certain language, so it makes writing code more efficient, easier, and safer from mistakes.

The button click trigger is under the menu for the button ("NextButton"), and a screen opening command is under the "Control" section. The puzzle piece slot means it needs to know the name of the screen to open, so we can grab a text box from the "Text" section to answer that question. Just type in the exact name of your next screen, and snap it in.

Your code should look like this:

Now, choose the next screen from the screen drop-down in the upper left. On this screen, you were required to add a button, but the rest of the content could be whatever you want. So, we'll talk about how to make the button work, but the rest will be a coding playground for you to experiment with whatever components you choose.

The button operation is almost identical to the code from the start screen. Here's the pseudocode:

When the Back button is clicked:
    Open the start screen

Again, you'll just need 3 components: a button click trigger, a screen open command, and a text box with the name of the start screen. It should look something like this:

You might want to add more features with the other components you chose to include, but it's a good idea to test your app frequently when you make changes. So, now that we've created a little bit of code, let's see how to test your app.

Step 5: Testing Your Code

There are two ways to test your app, with detailed descriptions of each here. If you have an Android device with an internet connection, you can test your app using the App Inventor Companion App. Search "MIT AI2 Companion" in the Google Play Store and download it. Read the instructions for testing with it here.

If you don't have an Android device, or if you have no/bad internet connection, click on Option 2 or 3 on this page and read the directions to test your app.

Whatever your setup is, test your app and make sure that it works as you expect. Try making changes to the behavior or appearance while you are testing - generally, the demo will update automatically.

Feel free to keep adding behavior and testing your app. If you want, play around with the properties and appearance.

Step 6: Installing Your App

To install your app, click on the "Build" drop-down at the top and center of the page. If you have an Android device with the Companion app, you can choose "provide QR code for .apk". It will display a code to scan for a one-time download. Otherwise, you can choose "save .apk to my computer", copy or send the APK to a device, and open it to install it.

Your device may ask you if you want to download the APK file, because APK files are executable (they can run code on your device). If you download an image or text file, there is generally very little risk to your device because your device doesn't run code with an image - it just displays information. On the other hand, APK files are supposed to run code on your device. So if, for example, someone wrote code that said, open user's messages; send all messages to "hacker404@hackermail.net", then downloading and installing that APK could be a problem.

Since you wrote most of the code, and since we are pretty sure that MIT didn't decide to add sneaky malware into each app that AppInventor users create, it's a good bet that your APK is safe to download and install.

Open the APK file to install it. Since the app didn't come from an official app store, which usually try to avoid distributing apps with sneaky or dangerous code, your device may ask you to verify that you want to install an app from an unknown source. Again, it's a safe bet to do it this time. If there's an option to allow it "just this once", choose that. Otherwise, after you are done, you should reset it in your device settings so that it will not automatically allow installation in the future. This keeps your device safe. This setting should be under something like, "Settings -> Apps -> Advanced -> App access -> Install unknown apps". Make sure this gets turned off after you install your app.

With that, you should be done - you can find your app in your app drawer. If you set the name and icon in the properties for the app, that will be what you see.

Congratulations, you've created your very first Android app! This was a lot to be exposed to at once - don't worry if it took a long time to figure out. The next time, you'll have a better hang of it. Once you're ready, try making an app based on an idea you have, or try one of the other activities as a starting point.