Category Archives: Documentation

App Inventor to add “Responsive Design” features next week

MIT App Inventor upgrade coming next Monday – the upgrade will support apps running on devices with different size screens, such as a smart phone versus a tablet.

There’s one important rule when using App Inventor to create apps with responsive design:

Specify widths and heights of components as percentages of the screen width and height, rather than as fixed numbers of pixels.

For example, to make a button whose width is half the screen width, set the button’s width to be 50 percent rather than setting it to a specific number of pixels.

See Responsive Design in App Inventor

Please see the link for details on this upcoming change.

Apps written in Java and the Android SDK have access to additional methods of creating flexible design layouts, or even multiple layouts, for different screen sizes.

App Inventor 2 Tutorial Volume 2 is now available at Amazon

Volume 2 of the App Inventor 2 Tutorial is now available at Amazon as an e-book via this link: App Inventor 2 Tutorial Volume 2: Step-by-step: Advanced features including TinyDB.  The e-book will also be available from Google Play shortly.

Description

MIT App Inventor 2 is a fast and simple way to create custom Android apps for smart phones or tablets. Volume 2 in the series introduces debugging methods, explains additional controls not covered in Volume 1, introduces “agile” methods for developing a real world app, and provides sample code for using the TinyDB database.

The App Inventor 2 Tutorial series is targeted at adult learners (high school and up). App Inventor 2 provides a simplified “drag and drop” interface to layout your app’s screen design. Then implement the app’s behavior with “drag and drop” programming blocks to quickly assemble a program in a graphical interface.

Volume 1 of this series covered the basics of the App Inventor user interface Designer and the Blocks programming editor, plus basic “blocks” programming concepts and tools for arithmetic, text processing, event handling, lists and other features. Volume 2 builds upon Volume 1 to provide tips on debugging programs when the apps work incorrectly, how to use hidden editing features, and how to install your own apps on to your phone or tablet for general use. Code samples are provided for using the Notifier component for general use or for debugging, for user interface control tricks such as buttons that change color continuously or implementing the missing “radio buttons” component, using ListPicker and Spinner for list selections, and using the WebViewer to display web pages in your app. The book includes a large section on designing and building a sample real world application and finishes with a chapter on using the TinyDB database.

For readers of the blog, Chapters 4–8 are based on the tutorial already presented here. Chapter 2 and Chapter 9 on TinyDB are all new material.

Chapters

  • Introduction
  • Chapter 1 – App Inventor Tips
  • Chapter 2 – Debugging App Inventor Programs
  • Chapter 3 – User Interface Control Tricks
  • Chapter 4 – Designing and Building a Real World Application
  • Chapter 5 – Tip Calculator Version 2
  • Chapter 6 – Tip Calculator Version 3
  • Chapter 7 – Tip Calculator Version 4
  • Chapter 8 – Tip Calculator Version 5
  • Chapter 9 – Using the TinyDB database

(Volume 3 is now available – App Inventor 2 Databases and Files adds substantially more information on TinyDB, plus TinyWebDB and Fusion Tables and includes the full introduction to TinyDB).

AppInventor_Volume2Cover

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.

Using Lists in App Inventor

A frequent search topic on this blog is how to use lists. “Lists” are a way of storing a collection of data in App Inventor programs. Many other programming languages provide a number of methods for storing collections of data including arrays, records, even lists, and even something called “collections” (imagine that!)

App Inventor provides Lists, plus you can also use components like the TinyDB.

For a detailed description of using Lists, please refer to Chapter 8 – Introduction to Lists in my e-book “App Inventor 2: Tutorial”, available for $2.99 from Amazon. I hope to make this text available in additional e-reader formats during November.

Display “Warning” and “Alert” box messages in App Inventor apps

Whether you use Windows, Linux or Mac OS X applications, when the program needs to alert the user (you!) to an issue, the program displays a pop up dialog box with a warning or error message. You can easily create similar warning messages in App Inventor, as shown in this example screen:

Screenshot_2014-09-08-14-05-48

To create a pop up warning dialog, use the Notifier control that appears in the Designer’s Palette:

NotifyPalette

Drag the Notifier icon into the app user interface design – the Notifier is used as a non-visible component, just below the user interface:

NotifyDesignerView

Switch to the Blocks view, click on the Notifier1 block to view the available methods. A partial list of methods is shown here – the item circled in red is the one we will use in this example:

NotifierMethods

In response to an on screen button press (btnNotifyUser’s Click event), the app displays the dialog message:

 

NotifyBlockCodeThis block can be inserted anywhere a processing block is allowed such as the result of an if-then-else conditional block. You can also change the text or background color of the app to something more interesting than the “black and white” default colors shown in this example.

Notifier provides a quick and easy way to display short alert messages to the user of the app.

 

Writing to and reading from text files in App Inventor programs

Update: When the program is run in AI2 Companion, it behaves differently than when run as a standalone “build” .apk app.

The updated tutorial explains where – and why – the files you create may appear to be hidden on the phone – how to find them and how to transfer the files to your PC.

An earlier blog post described how to store data using TinyDB so that an app’s data can persist between uses of the program, or even to share data between screens in a program.

Another way to save data is to write the data to a file on your Android device. App Inventor has introduced a File control that lets us write text data to a file and then read it back, later. As we will see, the File control is not the easiest thing to use but with some work, the control can be used to store data from our program into a file. (Once data is in a file, you could, hypothetically, email the file to yourself to read it on a computer, or transfer it from an Android to device to another computer using a USB cable and mounting the device as a simulated hard drive. But that is beyond the scope of this blog post!)

Let’s start our exploration of the File control in the Designer. Beneath the Palette heading, find the Storage item. Within Storage, find the File control. Drag and drop the File control on to your app. The control is placed below the user interface as it is an invisible control.

FileIOControl

 

After dragging the File control, you’ll see something like this at the bottom of the user interface Designer:

File1ControlThe real work begins over in the Blocks editor. For this example, we have just a few user interface components:

  • btnAddItem – when pressed, it writes some items out to a text file
  • btnTestFetch – when pressed, it starts the process of reading the data from the text file back into the program
  • txtBoxResult1 and txtBoxResult2 – a couple of text boxes that can be used to display the values read from the file.

In the Blocks editor, we will set up some blocks to write text to the file. We will start with a simple example:

FileIOSimpleEx

btnAddItem.Click is an event handler and you should already be familiar with the concept of event handlers. The new features are those in purple, which reference the File1 control. Assuming you are implementing this in your own app, you should find the File1 control, probably at the bottom of the list of Blocks, at the left side of the Blocks editor.

The first purple item above, AppendToFile, writes a piece of text to the file indicated at the filename component. Writing to the file is the easy part!

When our app’s TestFetch button is pressed, the code initiates a read operation by reference ReadFrom and giving it the name of the file to read the data from. But at this point, the data has not yet been read!

When the data has actually been read, an event occurs and we need to add an event handler for GotText to process the data that has been read in to the app.

In the example above, the original text is read back from the file and placed in an on screen text box to illustrate success.

Writing and reading a single line of text is easy. But writing and reading a series of data elements is a bit more complex. There are several possible ways to handle this but I have chosen to use the mechanism.

But before we get started, let’s add a piece of code to help us during development: let’s always start with a clean data file by deleting the old file (if any) first. We can do this by adding the following code to the screen’s Initialize event:

FileIOSimpleDelete

Find your screen’s name in the Blocks list and then click the mouse over the screen name. You should see the Initialize event handler appear in a pop up list – drag that initialize block over to the Blocks editing window.

Let us now take a look at writing a list – or list of lists to the text file. You’d best be familiar with lists (see volume 1 of my App Inventor 2: Tutorial) before starting on this.

FileIO-Lists

 

For this example, we want to store a typical name/address combination. This means storing several items for each individual record – in our example, we have two individuals but this could be easily expanded to support more.

The first block creates two lists (at far right) – one list per person to combine the name and address.

These two lists are converted to the “CSV” (comma separate values) format and the two CSV values lists are combined into a table. Think of this as being something like this:

  1. Alice Smith, 1234 Main St, Portlandia, USA
  2. Bob Smithy, 1234 Rural St, Portlandia, USA

Think of this as being like a spreadsheet with rows and columns, if you prefer. All those blue list processing blocks are converting our text input at right, into two CSV rows, combining those into a list, and then converting to a table. That’s a lot of work but its just a way of storing our more complex data into the file.

At the bottom block, the data read from the file is converted from text back in to table list format. And after this is done, individual list elements can be referenced. Since this table has two rows, index position 1 and index position 2 refer to first and second name records. Since each row is itself a list, we could also select the individual items from each name/address record if we wanted (but that is not shown in this example).

App Inventor’s new File control is helpful but remains cumbersome to use, as shown by the effort to read and write complex records.  It works only with text (which is how most of App Inventor works) and it reads the entire file all at once, rather than reading a line at at time. This limits the total size of the file that we can likely handle (maximum size is not known).

Where is testfile2.txt stored on your phone?

On my Nexus 5, there is a visible folder named AppInventor, and within that folder, there is a folder labeled data. This is where testfile2.txt is located.

This location also corresponds to /storage/emulated/0/AppInventor/data, a folder on the phone. You’ll need a file explorer app – or connect your phone to a PC using a USB cable and mount the phone as an external hard drive – to see the file structure on the phone.

To Learn More About App Inventor Databases and Files

My 322 page e-book provides extensive guidance on App Inventor databases and files, including TinyDB, TinyWeb, Fusion Tables and text files.

Learn about all my App Inventor guide books, including sample chapters – here!

  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
    Buy from: Amazon, Google Books, Kobo Books