• App Designing


App Inventor for Android is an application originally provided by Google, and now maintained by the Massachusetts Institute of Technology (MIT).

It allows anyone familiar with computer programming to create software applications for the Android operating system (OS). It uses a graphical interface, very similar to Scratch and the StarLogo TNG user interface, that allows users to drag-and-drop visual objects to create an application that can run on the Android system, which runs on many mobile devices.

The application was made available through request on July 12, 2010, and released publicly on December 15, 2010. Google terminated App Inventor on December 31, 2011. The MIT Center for Mobile Learning is now supporting it under the name “MIT App Inventor”

App Inventor lets you create Android apps without any knowledge in programming.. You design your apps on a web page, assemble pieces of logic blocks together on an editor, test your app on an emulator or on your phone while you are designing; Your projects are hosted by Google. All you have to do is design and join the pieces together like a puzzle game.

Starting App Inventor

Before we begin, we must have access to the following things:

  • Internet
  • A Gmail account (this is how we will log in to App Inventor)

Start the Designer and create a new project

In the web browser, go to the App Inventor website at http://beta.appinventor.mit.edu/. If this is the first time we are using App Inventor, we will see a blank projects page.

  1. Click New on the left side, near the top of the page.
  2. Enter the project name (one word, with no spaces) in the dialog box that appears, then click OK.


The browser will open the web page called the Designer, the place where we select components for our app and design the user interface, and should look like this:


In addition to the Designer, we need to start the Blocks Editor, the place where we set the behavior of the app. It is a separate application with its own window, and therefore we need to open two windows to design an app. These windows are linked: changes made in the Designer will be immediately reflected in the Blocks Editor.

Starting the Blocks Editor

When we click Open the blocks editor from the Designer window, the Blocks Editor program file should download and run.




We may be prompted to accept the Blocks Editor file. Click “save”, “allow”, “keep”, or whatever type of acceptance button comes up (it depends on the computer and browser). For Windows users, follow the instructions as the automatic installation wizard suggests. To open the Blocks Editor:

  1. Click ‘OK’ (Open the Java file)
  2. Click ‘Always trust contents from this publisher’ and open the file
  3. Click ‘Run’

This process may take 30 seconds or longer.

If the Blocks Editor fails to open, one possible reason is that the browser is not set up to run downloaded Java applications automatically. To account for this possibility, find the downloaded file named AppInventorForAndroidCodeblocks.jnlp and open it. The Blocks Editor window should look like this:



The large empty “canvas” space on the right side is referred as the work area, in which we place blocks to assemble the program.


On the left side, it has three palettes (Built-In, My Blocks, Advanced); each palette has drawers storing sets of blocks. When click a drawer, we can see all the blocks stored in that drawer. We can scroll down to see more blocks.

The Built-In palette contains the standard set of blocks that are available for every app you build (e.g., Definition, Text, Lists etc.). The blocks under the My Blocks palette contains specific blocks that are tied to the set of components that you have chosen for your app. The Advanced palette contains blocks for inventing intermediate and advanced apps with more complex logic.

The Designer runs from the browser, and the Blocks Editor runs from Java; however, they are linked. Therefore, even when we close your Blocks Editor window, all the information in the Blocks Editor is stored in the Designer. When we click the “Open the Blocks Editor” button, a new .jnlp file is downloaded to the computer, and we need to open the file again. When a new Blocks Editor opens, it will contain all the blocks you programmed before you closed the Blocks Editor.

As we build oour app, we can do “live testing” on an emulator or an Android device. If we have an Android tablet or phone that we want to use while we develop apps, click 4A below.

If we do not have an Android device, we can still see our app as we develop it, but with an on-screen “emulator” that comes with App Inventor. To build with the emulator, click 4B below.