Introduction
MIT App Inventor is a web application (app) Integrated Development Environment (IDE) for creating Android apps. If you want to know more visit the official page on Getting Started with MIT App Inventor, that also links to some easier projects to start with.
Get started
On the official MIT App Inventor page click the button.
If you have a Google account you can login with that directly, otherwise you have to create an account.
My first Android + Arduino app
To learn how to develop an app for Android OS that communicates with Arduino, I used the Youtube instruction: How to Build Custom Android App for your Arduino Project using MIT App Inventor. It is a very (very) quick tutorial, but it covers all the required steps. This post is the text version of parts of that Youtube instruction. The project aims at connecting an Arduino board with a single LED to an Android mobile phone using Bluetooth. The mobile interface will then be used for turning the LED on and off.
First you have to write and load the Arduino sketch and load it onto your Arduino board.
Arduino sketch
#define ledPin 7
int state = 0;
void setup() {
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
Serial.begin(9600);
}
void loop() {
if(Serial.available() > 0){
state = Serial.read();
}
if (state == '0') {
digitalWrite(ledPin, LOW);
Serial.println("LED: OFF");
state = 0;
}
else if (state =='1') {
digitalWrite(ledPin, HIGH);
Serial.println("LED: ON");
state = 0;
}
}
Create button
For this project you need one button, for opening the Bluteooth connections on your Android mobile phone. 
You can use any button design you like for this tutorial, if you want to make a customized button you can follow the tutorial on Karttur’s Button design page.
MIT App inventor
The MIT App inventor Graphical User Interface (GUI) has two (2) modes (screen): Designer and Blocks. The app always starts in Designer mode and the buttons for switching are in the upper right corner. The designer screen contains 4 columns, with the following top rows: Palette, Viewer, Components and Properties. The left column (with the Palette top row) contains all the components that can be added (clicked-dragged-dropped) to the app under development (Viewer).
Create a new project
From the upper menu of the MIT App Inventor, create a new project:
, give a Project name: and click . mit_app_02_new-project
The page listing “My Projects” will automatically open. Click on the project you want to work with to open the GUI.
Link to mobile
You can create a link between the MIT App Inventor and your Android phone, and your project will be shown live in real time on your phone. To do that you first need to grab you mobile and download and install the MIT AI2 Companion in your mobile phone. The app is available from google play store.
When you have the MIT AI2 Companion installed, go back to the MIT App Inventor (on your computer) and then select from the menu:
.
You will be presented with a QR code, open the MIT AI2 Companion on you phone and either choose or . The mobile phone in the Disigner view will be reflected live on your Android phone.
Design layout
Add a horizontal arrangement: from the left column (Palette), click on the Layout alternativ, then click and hold the mouse on HorizontalArrangement and drag to the phone view. The HorizontalArrangement will lock to the upper left corner.
The Components column will show HorizontalArrangement1 under the Screen1 component. The Properties column shows the properties of the component HorizontalArrangement1. Change the following properties:
| property | value |
| AlignHorizontal | Center:3 |
| Height | 6 percent |
| Width | Fill parent |
Create a second HorizontalArrangement just below the first, and set identical properties.
In the HorizontalArrangement2 (the second one below) you should now add a ListPicker. In the left column, change in the menu:
; click hold and drag a ListPicker to the component HorizontalArrangement2. The Listpicker should be horizontally centered and show the text Text for ListPicker1. You are going to replace this text with a button (for example the button created above).
With ListPicker1 active, in the Properties column erase the content for Text, and click the (empty) box for Image. in the dialog box that opens add the button image. Your image will probably not exactly fit the height of HorizontalArrangement2. Activate HorizontalArrangement2 and in the Properties column change Height to Automatic.
Create a third HorizontalArrangement, and set identical properties to the second (with Height kept as Automatic). Then navigate in the left column to drag a Label to HorizontalArrangement3:
By default the new component will be names Label1 and show the default text Text for Label1. Go to the Properties of Label1 and change the Text to Not Connected. Leave other options with their default values.
Create a fourth HorizontalArrangement, and set identical properties to the first (with Height set to 6 percent). The add a fifth HorizontalArrangement with Height kept as Automatic and add a label also to this component (HorizontalArrangement5). Change the text in the label (Label2) in HorizontalArrangement5 to LED: OFF - this is the initial state of the LED once the app is up and running.
Create a sixth HorizontalArrangement, and keep the Height at Automatic while changing AlignHorizontal and Width as before. Add two (2) Buttons to the HorizontalArrangement (should be nr 6):
The two buttons will align horisontally. To set a space between them, add a VerticalArrangement and set both Height and Weight to 6 percent. Change the text of the two buttons to Turn ON and Turn OFF. The Designer interface of your Android App should then look similar to the illustration.
Invisible components
You must also add two invisible coomponents to your project: a BluetoothClient and a Clock. As they are invisible you can drop them anywhere in your interface design. The way to get them from the menu:
Rename components
To make the coding easier, you should rename the key components (i.e. all components except the arrangements) that you have to interactive with in the code blocks:
| Old name | New name |
| ListPicker1 | BTList |
| Button1 | TurnOnBtn |
| Button2 | TurnOffBtn |
| Label1 | ConnectStatus |
| Label2 | LEDStatus |
Block coding
With all the components added and logically named, it is time to turn to the block coding. Click the button in the upper right corner of MIT Inventor App. The GUI will change and show a white central area, that is where you are going to put the code blocks.
The blocks screen contains only 2 columns, with the hierarchical structure of components to the left and the viewer to the right. When you click on a component, all the possible code blocks for that components will form a middle column (or rather a column covering the left part of the viewer). The example below shows the blocks screen with the pop-out window for code associated with the BTList component.
When creating the code you first select the component that you want to relate the code to, then you select the code blocks that fulfill your needs. Rather than going through each step, the complete code for the project in this tutorial is shown in the figure below. To see all the individual steps in the coding, please have a look at the Youtube instruction. Note, however, that the components are named somewhat differently, and there are some other minor changes.
Build and install app
You can now build your app and install it on your Android mobile. From the MIT App Inventor menu choose:
Your app will build and then you will be presented a QR code that you can scan with MIT AI2 Companion from your phone. When installing the app you have to accept bypassing the security settings (as your app is not provided by Google play).
Once installed, start your app as you start any other app. You should get the screen view of your project. Click the button, and you will see all the Bluetooth devices paired to your phone. Pick the Arduino Bluetooth device. The text (label) under the button should change to say Connected. You should then be able to turn the LED on and off with the two buttons on your mobile.