Tear Up Thoughts: A Quick Guide To Developing Android Apps With Google App Inventor

Ever since I first received my Droid, I've been very curious about how people produce some of those amazing applications on and off the Android market. I'm a programmer, but not a gifted hacker by any stretch of the imagination. I've mastered Visual Basic and Coldfusion, but when it comes to writing an application from scratch that would work on a mobile device, I was certain that was well beyond the scope of my abilities.

When it comes to writing mobile apps, the closest we've come at MUO is Beth's article on how to develop an iPhone app. Even with the iPhone approach, you need to learn Objective-C. In other words – you've got to learn how to become a coder. Well, for those of you that appreciate visual-based programming like me, then you will be very happy to learn that Android has made it possible for anyone with even the most basic programming experience to create their very own high-quality and highly functional Android applications. The secret weapon to developing Android apps? It's called the Google App Inventor and it's offered at Google Labs.

Setting Up Google App Inventor

The App Inventor consists of three parts. There's the design tool, the blocks editor, and finally configuring your phone.
The first thing you have to do is set up your phone. Go into Settings -> Applications and make sure that "Unknown sources" is selected. This allows the Blocks Editor to install itself and communicate with your phone for testing purposes.

Then, click on "Development" and make sure that you've enabled both "USB debugging" and "Stay awake."

Guess what – that's all you have to do to configure your phone to work with the programming tools.
When you first sign up to use the App Inventor, you're going to need to install the Block Editor as one of the steps. This is a Java application that installs onto your computer, and it gives you the ability to modify the behavior of the "blocks" that you've created in design mode, and it communicates directly with your phone.
Once you've signed up and you're in the design tool, just select "New" and name your first project. In this example, I'm going to get started on a matching game for my kids where they need to match images of cats on a 3 x 4 grid.

The design tool is set up a lot like Visual Basic and Visual C++, where the objects that you can use are on the left, and the design area, or "form" is in the center. In this case the form is the individual screen, and you can have multiple screens per app (just remember to include navigation).

Once you click and drag a component onto the screen, it shows up on the right side of the design app under Components. Under "Properties" you can view and modify the initial display properties of that component.

Now below I've basically created a screen with a 3×4 table (you can find this under "Screen Arrangement") and then I added 12 buttons with individual cat images for each "image" property of the buttons.

Once you start using the Blocks editor, all of these design properties can be modified. As you can see below, I defined the image of button 1 as a blank image (which I loaded in design mode as a grey image called "Image1″).

As you can see, everything is visual – there's no coding here. Under "My Blocks" I chose the "Screen1″ component and dragged the "Initialize" event to the center program area. You need to tell an event what to do when it takes place, so I dragged the Button1.Image property into the box, and then told it to make that property use "Image1″.
After about an hour of playing around – I finished programming the initialization of all of the buttons when my app first loads, as well as what to do when the user clicks on the first button.

As you can see, even an application like a matching game can require that you carefully consider every possibility. You can program for all possibilities by defining and programming component events. The example above can get complicated, so if you're just getting started, stick with something simple like the example Google provides when you first sign up. You can graduate from there when you're comfortable with the programming and testing process.
As you can see in the left navbar in the design tool, you have access to just about everything your Android can do – sensors, contact list, video players and much more.

So – here's my work of art, programmed, tested and then finally installed onto my phone in about an hour. I still need to program the rest of the buttons as well.

Needless to say, the fact that I could even get anything to run on my phone with about an hour's worth of effort is impressive. I thought it would be nearly impossible.
So, sign up to become a developer and try out the Google App Developer yourself. You may be surprised, you may find yourself creating some of the coolest applications imaginable. All it takes is a little bit of patience and some time to play around with the development tools.
Let us know if you were able to succeed in developing your own Android apps and what you think of the design and block editor tools in the comments section below!
Image Credit : Svet

Follow MakeUseOf on Twitter. Includes cool extras.