Category Archives: Tips

Blocks Editing Tip: Arranging and collapsing blocks in the editor

As you develop your App Inventor program using the Blocks editor, do you find your blocks overlapping and crashing in to one another on the screen? You know, like this:

AIBlockMess

You can drag the blocks on the screen so they no longer overlap, but dragging each block is tedious (time consuming). But there is an easy way to automatically re-arrange the blocks.

  • Move the mouse pointer to any part of the white space outside the blocks
  • On Windows, right-click the mouse button
  • On Mac OS X, press Ctrl and click the mouse button

Continue reading Blocks Editing Tip: Arranging and collapsing blocks in the editor

Update: Reading and writing text files with App Inventor

I previously posted a short tutorial on writing to and reading from text files stored on an Android device, using an App Inventor app.

Unfortunately, as some comments noted, the file being created seems to disappear – the data is written and can be read back – but the file is no where to be found on the phone!

After some research, I now know where the file is – and also how to copy the file from the phone (or tablet) to your personal computer.  While the solution to finding and saving the file to your computer is ultimately easy, I need to update the tutorial and explain some things about the Android file system. You will also need to install a free app on your phone in order to copy the file to your computer.

I have posted an updated tutorial that explains the details and shows how to store your files in the right location, how to find them (they are hidden from most views), and how to copy them to your personal computer.

How to install the Tip Calculator on your phone

You have probably run your App Inventor apps through AI Companion. The AI Companion is a great tool for quickly loading the app you are developing on to your phone for testing. However, the AI Companion does not install the app on to your phone, like a regular app.

To install the app on your phone, use the Build menu “App (provide QR code for .apk)”. You will see a progress bar appear on your screen as App Inventor prepares the app for installation on your phone. Behind the scenes, it is creating a “.apk” file which is the type of file used for all Android applications.

AppInventorBuildOnce the app build process is finished, you’ll see a QR code displayed on your screen:

QRCodeTC5

 

If you are not familiar with QR codes – a QR code is a method of encoding data into a matrix. A smart phone camera takes a snapshot of the QR code matrix and software on the phone extracts the encoded data. In this case, the data is the URL or web address where a temporary copy of your .apk file has been stored. You’ll need to install a QR code reading app (available for free in the Google Play store) and use it to scan the code.  Then, follow the on screen prompts and icon to download the .apk file to your phone and then install the app on to your phone. Once installed, it will appear in your list of apps just like any other app.

If you do not wish to use the QR code method, you can also build and download the .apk file directly to your computer. Once the .apk file is on your computer, you could email the .apk file as an attachment – such as email it to yourself! Then, on your phone, fetch your email and download and install the apk file on to your phone.

 

App Inventor Tip Calculator version 5: Fully automated!

What the App Does

This is the fifth version of 5 app versions that implement a tip calculator – and the final version is pretty cool! This app is useful – I was recently traveling and used it on my smart phone to calculate restaurant tips – I will post a short tutorial on how to install this app on your phone.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 introduced an improved user interface to eliminate user data entry errors.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

In Version 5, we eliminate the “Calculate tip and total amount” button by making the calculation automatic. Each time we enter a digit or adjust the slider, the tip is calculated immediately. There is no need to press a button to do the calculation.  Just enter a bill amount and optionally adjust the slider to select a tip percentage.

The Tip Calculator User Interface

The new user interface eliminates the Calculate button and adds a single “Clear All” button as a quick way to reset the calculator. This sets the bill amount back to zero and the tip amount to 20%.

Here is a view of the app in operation – the bill amount of 23.45 has been entered on the keypad and the tip amount is 20%. The tip and total bill are shown at the bottom of the screen.

Each time any digit is entered – or the tip is adjusted – the tip and total is automatically calculated.

TipCalc5-Screenshot_2014-11-12-17-43-32

 

Continue reading App Inventor Tip Calculator version 5: Fully automated!

How to change button colors in App Inventor

You can change the colors of buttons (and some other components) in your App Inventor apps. Using some programming tricks, buttons can be made to change color continuously!

Here is a very short demo of a button whose color is continuously changing on the screen:

I will soon post a tutorial on how to do simple color changes and also how to do “tricks” like that shown in this video.

Be sure to keep checking back, like us on Facebook, Google+ and Twitter for more updates! Thanks!

Tip: Copy and Paste within the App Inventor Block Editor

This is not obvious but … you can select a group of blocks and press Ctrl-C (on Windows) and then press Ctrl-V (on Windows) to copy and paste your blocks.

Press Ctrl-X (on Windows) to delete  a selected group of blocks.  If you did not mean to delete those blocks, press Ctrl-V and paste them back!

Another trick is to select a block or blocks and then press right-click on your mouse (or Ctrl-click on Mac OS X) and then select Duplicate from the popup menu. Copy and paste should also work on Mac OS X using the standard Mac OS X keystrokes but I have not yet tested it there.

 

What type of App Inventor tutorials do you prefer?

I have created an online poll – see side bar at right of this post – to learn about what type of tutorials you prefer? Please click on your choice —> at right! 

  • Do you like printed or text examples, like these blog posts, to read?
  • Do you like having or using online video tutorials?
  • Would your prefer both?

Help me know what works best for the most readers by answering the simple poll at right – you do not need to log in or go through extra hurdles. Just click on one of the selections.

Thank you!

Using ListPicker for displaying and selecting from on screen lists

What is ListPicker?

ListPicker is a user interface component that makes it easy to display a list of items and have the user make a selection from the list. For example, let’s say we’d like to display six things on the screen and then have the user select an item from the list.

For simplicity, here is a sample ListPicker list showing six items labeled “A”, “B”, “C”, “D”, “E” and “F”.  Those items are arbitrary – your list could contain “Oranges”, “Bananas”, “Apples”, “Grapes” or whatever other text descriptions you would like to have. (The default color is white text on black but the color properties, as well as the text size, may be changed in the App Inventor Designer.)

Screenshot_2014-10-10-12-03-13

 

When this screen is displayed the user may touch an item in the list to select it.

Use ListPicker whenever you have a set of items from which the user is expected to make a selection. Example applications could include selecting a product from a list of inventory items, select a food item from a menu, select a name from a display of names and addresses and many more.

Learning how to use ListPicker is helpful for new App Inventor programmers as many online tutorials and example programs use ListPicker – but without explaining what it is or how to use it!  Becoming familiar with ListPicker will make those other tutorials easier to understand!

Example

When an item is selected an event is created, and your event handler can then identify which item was selected in this list.  To illustrate, let’s start with a simple app that displays a list of items when the “Click me to display a short list” is pressed:

Screenshot_2014-10-10-12-03-24

ListPicker does all the hard work for us – display the items on screen (as shown in the previous screen snap shot) and processing the selected element.

In the example above, “C” was selected.

How to Build the ListPicker Demonstration Application

Step 1 is to drag a ListPicker component from the Palette to the Viewer. Rename the control if you wish and change the text of the ListPicker control button to something useful 🙂 Here is the app after dragging the ListPicker component and changing the text (in the ListPicker properties) to “Click me to display a short list”:

LP-Designer

Step 2 is to place some items into the list. We do that by typing a comma separated list in the ElementsFromString property of ListPicker, as shown here:

LP-Properties

 

We have now added six items – A, B, C, D, E and F. We could enter longer text descriptions if we wished – for example “Oranges, Bananas,Apples” and so on:

LP-Properties2

Step 3 is to add an event handler for the list to process the list selection – this turns out to be really super hard – not! It is actually super easy! Click on the ListPicker component in the Blocks Editor and then drag the .AfterPicking event into your program:

LP-EventBlockListPicker handles all the details of the on screen selection. All that is needed is to fetch the item that was selected, store that in a variable, or, as in this example, display the selection in a label field on the app’s screen.

That’s it for the basic operation of the ListPicker. If you have many elements – too many to fit on one screen – the list automatically handles scrolling. Just use your finger to drag up or down the list. You can also change ListPicker properties such as the color of the list and more.

Of course there are many ListPicker features, but this is intended as a brief introduction.

But one feature we wish to mention is that you can add items to the list to display from within your program by putting your items in a list and assigning them as shown here:

LP-BlocksAddingThe ListPicker1.Elements property contains a programmatic list of items.  If you are not familiar with lists, please see Chapter 8 “Introduction to Lists” in my e-book “Guide to App Inventor 2:Tutorial – The fast and easy way to create Android apps”.

Using the WebViewer Control in App Inventor

Would it be neat if you could display pages from the web in your Android app? Well, you can!

And it is very easy to do in App Inventor.

In the Designer, drop a WebViewer control on to your app’s screen design area. The WebViewer control is located at the bottom of the user interface section of the Palette:

WebViewerControl

After dropping the control on to your user interface, select the control and set the Properties. In particular, set a default or initial web URL to display on the screen. Here, I have set the default URL to http://appinventor.pevest.com. Be sure to include the leading http://

WebViewerProperties

 

When your app runs, the WebViewer will automatically load the page at the HomeURL.

You can change this page, programmatically. Here, for example, in response to a button press, the URL is changed to my 3D blog.

WebChangeURL

Once this runs, the new page is read in to the viewer. Just like this!

Screenshot_2014-09-08-16-39-22