Creating an Android app with Google App Inventor

After a few times filling in the registration form and weeks from waiting, I finally got an invite for Google App Inventor. In this post I will explain how I have tried to rebuild an app that I created before with “normal” programming.

Context

My little cousins like to play with my phone and press on every app that looks like it’s going to be fun. So I thought it would be fun for them to have an app that could play animal sounds when you click on an image. It is a quite simple concept, but for me it was a good start to get to know the Android API. The result of the first version looks like this:

As you can see the app has a three tabbed layout. Each tab contains a grid with images that listen to a click event.

To explore the Google App Inventor a little bit more, I want to play a little video on the last tab when you click on an image.

App Inventor

Google App Inventor is split into two tools. The first is the App Inventor Designer, which allows you to create the pieces of your app by drag and drop components, such as buttons, text and pictures.

The other one is the Blocks Editor. The Blocks Editor lets you assign behaviour to your components. In my case this would be playing a sound when you click a button.

Adding components

As I am trying to recreate my app, the first thing I tried to do was add the tabbed layout. But unfortunately tabs are not available (yet). For now I just continued with creating the Cartoon screen. This screen contains three images and when clicking on one of the images, a video should start playing below the images.

The Designer provides me with three options to arrange the screen layout.

In order to create the layout with the images and the video player, I have used the VerticalArrangement component with a HorizontalArrangement component. This allows  me to place the images in the HorizontalArrangement component and the video player below the images on the VerticalArrangement component.

Images

Now that the layout is in position, I can add the images to the HorizontalArrangement component. The first time I added an image, I just selected the Image component and dragged it onto my screen. This is fine, if you don’t want to add any behaviour to the image. In my case I do want to add behaviour, so I have to use a Canvas component.

The Canvas component provides us with the possibility to listen to a click event. To add my image to the Canvas I had to set the image as a background image.

So now that all the images are in place, the only thing that is missing a video player component.

Video player

Adding a video player is as simple as dragging the VideoPlayer component to your screen. You can configure the video player with a source, but I left it blank. The Designer also contains a component called Player. This component is a non-visible component and can be configured with a source. In the images below you see the screen layout with the two Player components at the bottom.

Instead of playing a video, you can also play a sound. The Designer also contains a non-visible component Sound which can be used for playing short sounds. For longer sound files you can also use the Player component.

Now that I have all the components ready, I can start the Blocks Editor to add behaviour to my images.

Adding behaviour

When you open the Blocks Editor you will find two tabs with blocks. The first tab contains all the built-In blocks, such as picking a colour or adding a procedure. The second tab contains the blocks for your components.

In the image below I have added the (green) block that handles the behaviour of clicking on an image (or actually the canvas). The blue blocks set the source of the video player to the correct source and set the visibility of the player to true. The purple block tells the video player to start the video.

This block is repeated for each image with a different source. When a video is finished playing, I want the video to stop and the video player component to hide.

You may wonder why you see the Pause call in the purple block instead of the Stop call. This is actually wrong, but Google forgot to add a block for the Stop call (See the bug report here). I put the Pause call there to show my intensions. This is all the behaviour that is needed for now.

Conclusion

Although I wasn’t able to completely recreate my application, I’m very positive about the result that I was able to create with this piece of software. I like the fact that I was able to quickly create a basic app, but I was missing the real “programming” feeling. Maybe this is because Google App Inventor is still beta software and I wasn’t able to enjoin all features.

I am really curious about the full version and will definitely give it another try when it is released.

Oh and my cousins love the app