When learning a new programming language it is traditional to make a program that takes some sort of  input and puts out the phrase "Hello World!" and who am I to gainsay tradition so here we go. I assume you've got App Inventor 2 IDE open in your browser and AI2 companion (downloaded from the Play Store) installed on your device as well as a QR code scanner such as ZXing, so let's begin.


Go to projects and click Start New Project. You will be asked to give the project a name. It doesn't matter what name you give it,  but I called it Hello_World and notice that underscore between Hello and World. You can't have spaces in a project name so put underscores in instead.


The project will come up and you'll see this:




Getting Started with App Inventor 2  (AI2)

Go Back Previous Page

A "Hello World" Starter App


If you look in the components window (second from right) you'll see the component Screen 1 listed. It's automatically selected because it's the only component currently in this project. Now, open AI2 Companion  on your device. On the left above there you can see the icon as it appears on a Android device, in this case my Hudl.


The picture on the left below shows you the start screen of AI2 Companion. You are asked to type in a six-digit code or scan the QR code for your project. Where's that coming from?


It's coming from connect on your IDE in the browser. So, click connect, and then AI Companion. You'll see this come up:

AI21 AI22 connect

If you don't have a QR code scanner on your device you can type in the six digit code. It's a random one every time and here it's fowgbv, and that's what I'd type in and then click connect with code. I have a QR code reader installed and so I'm just going to click scan QR code and point the camera at the QR label (which is that big square thing).


Regardless of whichever way you went, the Companion will connect and display the project you are working on if - and only if- your Android device and your computer are currently on the same wireless network. This is important. It won't work if they aren't.

First step then. Screen 1 should be selected. We are going to change the title, because on your device the title will say Screen 1. Go to the properties window on the extreme right. You may need to scroll the browser down to see it, but ten properties down you'll find Title and a text box underneath it. Click in the text box, scrub out Screen1 and type in Hello World instead. Press the enter key on your keyboard once you've finished typing that and look at your device. The title of what's showing should also have changed to Hello World.


Your screen currently has a white background. It's annoying. Let's change it to a better colour. Three down in the properties window,  you will find Background Color  (it's American and they don't like using the letter u). It should currently say Default (which is white) and if you click on that it will give you a list of colours to turn the background including None which turns it black. I'm using that, but pick a colour you like, you can always change it again later. Once you've chosen, what's showing on your device should turn that colour too.

Let's add a textbox. From the pallete on the left, click on user interfaces and drag a button on to the viewer. On the viewer and your device a grey button will appear and it will say "Text for Button 1" on it. This is the default.  In the components window (second from right) you will see the name of the button. It should say Button1. Let's rename it.  Call it ButtonGo. To do that make sure it is selected (it should be highlighted in green), click Rename at the bottom of the components window and you will be confronted with a dialogue box that shows you the old name and asks for the new name. Type the new name in and then click OK. Nothing will change in the physical properties of the button but in the components list the name will change.

The other thing that will be apparent is that it flicks automatically to the top left hand corner of the project. This is because of the layout arrangement. All Android IDEs do this and it's where it differs drastically from Visual Studio. Layouts have to be constructed.

Before we move the button anywhere, let's manipulate it a bit. Ten down in the properties window for the button you'll see the heading Text and underneath a text box where you can type in text. Type in GO! and press the enter key on your keyboard. Now, look at the top of the properties window, and turn the background colour of the button green in just the same way we altered the screen colour. Hopefully in both your viewer and on your device you should see a green button with the word GO! on it in the top left hand corner.

Let's move that button to the middle. In your components window, select Screen1 and then in the properties window change Align Horizontal to Centre.


On the left is what the project looks like at this stage on my Hudl. Spiffing. Let's put in a text box.


The text box is found in the User Interface section of the Pallete

next to the bottom. Drag and drop one in, and rename it textHello. Right at the bottom of the properties panel you will find

the width and height settings.  Both should say Automatic. Leave height at automatic, but click on width. You are given the choices of Automatic, Fill Parent or setting a pixel size. Choose Fill Parent and the text box will spread to fill the width of the screen.  Look three up and you'll find the text alignment control. Set it to Centre.

The box is probably saying "Hint for text box 1............"  and if you look up four from where the alignment control is you'll find the hint control which has the same text in. Delete the text by clicking in the box and deleting and you'll end up with an empty text box.

Now go back down to the bottom of the properties window and find where it says"Visible" which is just above the width and height controls. Change it from Showing to Hidden, and the text box will disappear. It's still there, we just can't see or interact with it when it's hidden.


Spiffing, because now we have enough to code with. So open your blocks editor by clicking Blocks on the top bar. You'll see this:


All of your programming blocks are on the left, neatly categorised, and each component on the form has its own "drawer" as well which contains the blocks that allow specific commands to that component.

This sounds hard, and it looks hard at first, and it is. But once you get the hang, you can pretty much dance through these. Over the page, let's do a foxtrot.

More >