Aug 23 AT 3:16 PM Clark Wimberly 25 Comments

App Inventor: user experience, using graphics, saving data

Recently a big lot of us all got our first taste of App Inventor for Android, a drag-and-drop learning tool for budding Android developers. A couple days ago we posted a guide to building a simple Twitter client and today we’re going to expand into some more general instruction.

We’ll be exploring various areas of constructing a good user experience such as using images and screen arrangement tools to create a UI and using to a database to store or act on data collected from the user. To touch on a number of useful subjects, I threw together a silly little ‘Did I Leave My Oven On?’ app, which is basically a toggle switch that controls a database value. Normally, the data would be cleared each time the app was closed, but a database value can be saved from session to session, allowing you to store persistent data. Based on the database value, the toggle switch and app background will be set to the appropriate state (on or off). Finally, we’ll take a quick look at using screen arrangement components to nudge elements around on the screen, allowing some semblance of interface design.

block source

my block source

The video assumes you’ve followed a previous lesson and are familiar with basic concepts like the design window, placing components, and the blocks editor. If you get stuck, check out my blocks (to the left) and see where you went awry.

If you’re playing along at home, you can grab the images used in the video here. Inside you’ll find four images: toggle-on.png, toggle-off.png, oven-on-bg.png, and oven-off-bg.png. In App Inventor, when calling images you don’t need to provide a path or any label so it is important to be diligent when naming your images.

This video uses a number of new blocks in the editor, including logic control (if, ifelse) and interacting with a database (Store.Value, Get.Value) as well as some familiar blocks (set, text).

This time around things were a bit quicker and easily fit into one video, which you can catch below or on Vimeo, if that’s more your thing.

It seems like you guys enjoyed the first Google App Inventor tutorial and I’ve been enjoying recording them so I’ve gotta ask: anyone have any requests? Questions? Am I doing something incorrectly? Something awesomely? Let me know, this thing has been a joy to experiment with.

Clark is a developer living in Austin, Texas. He runs ClarkLab, a small web firm with his wife, Angie. He's a big fan of usability, standards, and clean design.

    Most Tweeted This Week