Android Programming for Beginners – MIT App Inventor

The MIT App Inventor is a cloud-based tool. You can create apps for Android or iOS devices using the “Drag and Drop” method directly in the web browser. After quickly setting up App Inventor, you can start creating apps. 

---

Live testing is possible while building applications. For live testing, you must have the MIT App Inventor Companion installed on your phone or tablet. It is important that your phone and computer are connected to the same WiFi network.

Once we’re done with that, let’s make our first Android app. The editor can be found at ai2.appinventor.mit.edu . Click “Create Apps” to get started.. 

Then select “Start new project” from the “Projects” menu.

Then enter the name of your application in the popup window. Let this be HelloWorld now.

App Inventor consists of the Designer and the Block Editor. Let’s start with the Designer. The editor interface consists of four columns.

In the ‘Palette’ column you will find the components, from which you can drag and drop the required components to the appropriate place in the ‘Viewer’ column. A copy of the selected item is displayed in the ‘Components’ column. Here, by clicking on it, you can set the properties of the item in the ‘Properties’ column.

To test our application live, open the ‘ MIT AI2 Companion ‘ application installed on your phone and press the “scan QR code” button.

In the web interface, click on ‘AI Companion’ in the ‘Connect’ menu. The QR code required to connect will be displayed.

In a few seconds we will see our app called ‘Hello World’ on our phone.

The Application is running, but nothing happens. Some interaction is needed. From the ‘Palette’ column, add a Text Box and a Button.

You can see that in the ‘Components’ column, a text box named ‘Label1’ and a button named ‘Button1’ have been created as children of ‘Screen1’.

Click on ‘Label1’ and in the ‘Properties’ column enter ‘Press the button!’ as ‘Text’ and enter ‘Hello World’ for ‘Button1’ ‘Text’.

This completes the look of our application, but nothing happens when you press the button. Now switch to the block editor, click on the ‘Blocks’ button in the top right corner.

There are two columns on this surface. In the ‘Blocks’ column, the controls needed to run our program are grouped into categories, of which we simply drag the appropriate block to the ‘Viewer’ field.

The controls almost speak for themselves. We simply connect them to each other.

This is where pressing the ‘Button1’ will replace the contents of ‘Label1’ with the specified string, in this case ‘Hello World’.

Now let’s expand the program with one more button, which will restore our application to its original state. To do this, go back to the ‘Designer’ editor and add another button, then write ‘Back’ to the value of ‘Text’.

We can now return to the Block Editor.

Three blocks need to be created for our application to work.

The first block hides a button called ‘Button2’ at startup.

The second block changes the contents of ‘Label1’ to ‘Hello World’ when you press ‘Button1’, then hides ‘Button1’ and displays ‘Button2’.

When the ‘Button2’ is pressed, the block will change the contents of ‘Label1’ back to the ‘Press the button!’, then hide the ‘Button2’ and display the ‘Button1’ again.

Let’s see what we did.

To install our application, you need to create a file with the extension ‘(.apk)’. Click on ‘Android App (.apk)’ in the ‘Build’ menu. After a short time, the installation file is complete. We have the option to download or immediately install the newly completed application by scanning a QR code.

We can play with the components a bit, we can color them, we can change their size and position. You can add different layouts. A few clicks and the look of our app changes completely.

I hope we’ve been able to show you how easy it is to create your own Android apps with a few clicks.

Project file download: HelloWorldExample.zip