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

  • seattleandrew

    I’m pretty excited that I got my invite earlier this week. I’ve been having a lot of fun playing around with the App Inventor. Currently I’m working on making a character sheet app for D&D 4E (I know nerdy, but I figured it’d be fun to make) and I’m running into a problem of running out of room. Is there a way to set up a variable like [runThis] and when the app gets to that variable it will execute the blocks for that variable? This way I can keep my blocks more logical/organized.

    • Sean Riley

      Damn, I keep hoping someone will make one for Pathfinder. Guess I’ll have to bite the bullet and do it myself.

      If you aren’t following it you may want to check out the Google Group for App Inventor.

      • seattleandrew

        good idea on the google group, I’ve already been asking questions so what harm will one more do… and BTW a pathfinder thing would be awesome. Although I haven’t played the game, I think companion apps to these games are sweet!

  • http://Website jrbourque

    Would love to see a demo of 1 object moving another when contacted

    • http://Website foebea

      I am not skilled yet with app inventor, but basic procedural rules should translate really easily. From your message I presume you are refering by ‘object’ to image and it would be thus:

      if varMove == 1 { moveObject1(moveRules); varMove = 0′}
      if object2.touched == 1 { varMove = 1;}

      • http://Website foebea

        or better since this will be object oriented code:

        while object2.touched == 1 { varMove = 1;}

        and have it set back to 0 on release. There is probably something built in to handle this logic easily. I will check it out tonight and reply with exacts if I find it.

        • http://Website jrbourque

          Yes I did mean to move the pic lol, sorry I should have used a different word considering it means something else in java lol but thank you for that code helps a lot

  • http://Website Joe

    I would love the opportunity to tryt out App Inventor!
    I’ve filled out the request form several times at GoogleLabs and STILL have not gotten an invite.


    • http://Website aproposnix

      I’m actually surprised that there are still a lot of people without accounts. I got my less than two weeks after signing up (thats about 2 weeks after they announced it).

      I tried it weeks ago but gave up when I could not connect through my Linux desktop. I would like to see a good tutorial for development noobs like me. Believe it or not it was still confusing to me. Not as easy as it seems.

      • Nate

        I agree with you – I’m passionate about Android and developing but have the absolute vaguest concept of development. I’d love to see a tutorial about the basics – although I believe that Google provides several basic app tutorials to do just this.

        I haven’t gotten my invite yet but I don’t want to spam requests because I love Google and would hate it if they spammed requests to me. :-\

      • http://Website Joe

        I’ve been writing computer programs since the mid 60s… DOS Basic, Cobol, Visual Basic, Palm OS and would LOVE to try my hand at this. I want to recreate the old Milton Bradely “Stock Market” board game… I wrote it to run on my Palm Tx it was really fun.
        If anyone can suggest a way to get my e-mail address bumped up higher on the GoogleLabsGods approval list I would sorely appreciate it.


  • http://Website thpoul

    Your tutorials are really good. You should definitely keep them coming.

    I had some fun testing out the AppInventor but I’m a bit dissapointed from the size of the packed .apk files.

    For the record the TinyWebDB works nice while in development mode but when packed into .apk it stops fetching data.

  • http://Website durhamite

    can you post the images so I can follow along and recreate it? Really good tutorials

    • Clark Wimberly

      I did post the images.

      • http://Website Mark

        I cant find them ? anybody?

        • Clark Wimberly

          You guys need to read the article. Or hit CTRL + F and type in ‘images’.

  • Jeice

    Still haven’t got my invite yet. Pity, this looks like it would be fun to play with.
    Plus, I really want a app.

  • poke50uk

    heh – I was excited…

    I tried to make a bus timetable application.. I’m a coder so do know what I’m doing – but as I’m interested in tools design I thought I would give the program a go.

    At first – it was very nice, although I could have probably typed out the code a lot quicker it was still a not bad, well rounded experience.

    It then got to the interesting part… feeding in the bus timetables.

    There wasn’t a way to just look up the data in xml/read any file etc.. so I spent 2 hours typing out the timetables, but the issue didn’t stop there!

    To encourage “good code” they limit the physical size of your workspace.. meaning I couldn’t fit all my information in one table! Had to make several.. slowing down some of my searching and making my logic loop pass the size of the workspace!

    Ok.. so I finally was able to fix it all, although the app clearly wasn’t working the way it should (probably some bad logic but there is no easy debugging).. it looked nice enough on the phone so I packaged it..

    I open it up on the way to work – and it looks nothing like it did when connected via debugging! buttons moved everywhere! (btw – the placement tool is TERRIBLE, worse than Frontpage that came with Win98!) – so I have no idea what when wrong there.. seemed like every time I packaged it something else stopped working.

    So at the end of teh day – it didn’t save me time – or effort >_> Its probably good for soundboards but thats about it at the moment.. had such promise too…

    • Ian

      Did you have your phone hooked up to the editor while you messed with it?

      You get a live preview almost instantly with the app that shows on your device, which had helped me a lot when creating layouts for my app

    • http://Website Marco forte

      Lol man, im the exact same as you, so similar I could have wrote that comment myself. I’m past the design stage of my timtable but and have decidedto use lusts for my data qnd then parse through, but I now realize a major problem that would be simple to solve in my usual c sharp enviornment- my bus service has cica 150 routes and I have to copy and paste arond 1000 tinetable variations of those routes. I have got some thinking to do

  • http://Website Adam

    My idea is to make a sms app but I don’t know if I can because of the one screen limitation, or if I can work around it using the activity starter. I really know nothing about programming but I learn fast and have plenty of time so I would love to get the ball rolling. I’m stuck on the fact that after you pick a contact it goes back to the first screen instead of a text type page…but I heard you can make activity to go to another app you made so it can look like a second page and so on and so forth…any advice?

    • DG

      What you can currently do with appinventor is put all your pages in one, each wrapped by a parent container, and then make a function (calls it procedure in the builder) to hide and/or display them at leisure.
      There is only one screen available and there is no activity starter for sure.
      Of course, if we were talking coding, that’d be a very different matter.

  • hateem ahmed

    I was wondering how to create those button images.
    I got photoshop, but can not figure out how to make nice button images

  • paul beach

    thanks for the tutorials. any suggestions on how to design a simple decision tree that will ask a question (question image on a button?) after clicking the button give two or more possible answers or another question. I want to make a troubleshooting decision tree to walk someone through servicing an appliance.I’m in no way a programmer but having fun making the simple apps. any direction on the design of a tree would be much appreciated . thanks

  • Rohan Pillai

    Hi, I am new to App Inventor. I want to create a graphical display of the data that I receive from the phone’s Bluetooth. Is it possible using App Inventor? Thanks!