AppInventor2 (AI2) Code Snippets

This page is still under construction at present

What is App Inventor?

It is a graphical coding system using html and java for creating android phone/tablet apps

How do I get started?

Go Here:  http://appinventor.mit.edu/explore/

Me and App Inventor

I have been using App Inventor (AI2) for about 4 years now, driven mainly by some opportunities at my work to create communication apps for autistic children, and data recording apps for the staff. I am not a programmer, it is just a hobby/sideline (which my work are happy for me to pursue). AI2 can be frustrating at times – because it can’t do everything you want, the OS can be a bit slow, but the output can be great and just what you want, eventually! I have listed below some of the code snippets that I have used ( can’t claim to be the creator, that accolade goes to others far cleverer than me). These snippets save time, effort and help you get the best out of AI2. I hope you find them of use too.

Some Golden Rules

  • Plan out your app on a piece of paper first, seeking out the logic as you go
  • Build you app bit by bit, don’t try to do everything in one go
  • Save your Project regularly, and regularly download an aia file to your PC
  • Make checkpoints of your app when you reach certain milestones
  • If you can avoid using more than one screen, do so
  • You cannot rename Screen1, although you can change it’s title
  • If you find you have sections repeating themselves, revisit the code/blocks, try to write procedures so that you can reuse them, and you only write a pice of logic once
  • The same goes for buttons or images, can you recode to use just a few buttons or images instead of many. Code is cheap, screen assets cost!
  • You cannot build an AppInventor app any bigger than 5mb, so keep asset sizes down to a minimum
  • Test in your emulator of choice, and with a built app – behaviour can be different
  • Ask questions on the AppInventor Forum
  • Another great resource is Taifun

Index

Make a Splashscreen

Simulated Multiple Screens

List of Lists with CSV file

Make A Splashscreen

  • Start a new Project
  • Drag out a Vertical Arrangement and make it “fit parent” both ways
  • Drag out a second Vertical Arrangement below the first and make it “fit parent” both ways
  • In the first VA insert your background image, or images and text required
  • In the 2nd VA just drag out a label and type “This is the app” into it
  • Untick visible for the 2nd VA
  • Ensure “scrollable” is unticked for VA1
  • Drag out a Clock Timer from Sensors, set interval to 3000 milliseconds, leave timer as Always Fires
  • Move to the Blocks Editor
  • Drag out a Clock.Timer block
    • In it you need:
      • 1st VA visible = false
      • 2nd VA visible = true
      • Clock.Enabled = false
  • Test in Emulator
  • On load, 1st VA should display for 3 seconds to then be replaced by 2nd VA and “This is the app” message

Explanation: When the app opens, the timer is fired, and VA1 is displayed, after 3 seconds, VA1 becomes invisible and VA2 is displayed

Simulated Multiple Screens

I have already partially covered this in Make a Splashscreen above, but in its simplest form:

  • start a new project
  • drag out three vertical arrangements
  • drag a button into each VA
  • make all VAs fit parent both ways
  • Untick visible for VA2 and VA3
  • change the background colour if you want for more effect
  • Ensure “scrollable” is unticked for Screen1
  • Move to the Blocks Editor
  • Drag out the Button.Click block for each button
  • In Button1.Click add VA1.visible = false and VA2.visible = true
  • In Button2.Click add VA2.visible = false and VA3.visible = true
  • In Button3.Click add VA3.visible = false and VA1.visible = true
  • Open up your emulator
  • You should see VA1 and Button1. Click It.
  • You should see VA2 and Button2. Click It.
  • You should see VA3 and Button3. Click It.
  • You should be back to VA1 and Button1

The possibilities are endless, the amount of coding/blocks, complexity and size of app is significantly reduced against using more screens (as advised against)

List of Lists with a CSV file

As much for my own benefit as anything else, as I keep forgetting how to do this. You can build a list of lists using text blocks and the “list from csv row” blocks, but this hard codes things into the app. If you want a bit more freedom and ability to update the lists without updating the app (more on that later) it may be better to create a csv file and call this as a list of lists.

So here are the blocks required for a hard coded list of lists, using a button to fill out a label with the chosen item

loltextblocks

 

 

 

 

 

Here are the blocks for using a csv file to do the same thing, along with a view of the csv file

lolcsvblocks

 

 

 

 

 

lolcsv

 

 

 

 

 

The output of both to show that you get the same thing back

lolscreen

One thought on “AppInventor2 (AI2) Code Snippets

  1. Hmmm, sorry, never really got around to this. Best off searching the appinventor forums (google groups) or check out puravidaapps.com. I hope one day to find the time to post my efforts here. :)

Leave a Reply

Your email address will not be published. Required fields are marked *