Monthly Archives: February 2014

How to develop a Photo Booth Android app

In this tutorial, we will develop a Photo Booth app. I’ll show you how you can develop an app that allows you to accomplish the following tasks. The app will be developed using MIT App Inventor

  • Take pictures using your smart phone,
  • Saving picture onto canvas
  • Display the last 4 pictures on your device
  • Select one of the pictures and get the picture name
  • Post / transmit a selected picture to a PHP server

What will be covered in this tutorial?

  • Camera — allows you take, save picture
  • Canvas – for displaying pictures onto canvas (4 canvases will be used)
  • Notifier – for displaying messages
  • Web – for posting the picture to a PHP server
  • Button, Label, TextBox, Arrangements

We will be working toward the design shown in figure blow:


Below figure is showing you, at high level, how the components are arranged in our design editor. It also shows you the non-visible components (e.g. Camera, Web, Notifier). that are used in the sample app.


For the layout, we use Vertical and horizontal screen arrangements to contain the four canvases. After a camera picture is taken, one of the canvas background images is changed to show the image.  To keep the canvases spaced properly, we use Label component with its Text background set to None. Using this approach, the Label serves as a spacer and puts spacing between our canvas components. The figure below shows this layout:



This tutorial assumes you know the basics of App Inventor. For additional tutorials, please see HERE.

App Inventor Blocks

The layout includes 4 canvases. The canvases are used to show the pictures that are taken. Once a picture is taken, it will be saved and shown onto first canvas. The second picture will be saved onto second canvas. This will continue through all four canvases and then we rotate back again to first canvas. To keep track of which canvas should be used, we declare and use a global variable as shown below. We also set the default value to zero


To take a picture, we are using a Button component, btnTakePicture with Text of ‘Take Picture’. Once btnTakePicture is clicked, we start the device camera using the Camera component. Figure below shows the block for invoking the device camera:


Once the camera lens opens and picture is taken, the Camera.AfterPicture will be triggered. In this event, the global variable canvasNum is increased by 1. This will allow us to rotate the image and save, as background, to Canvas1 through Canvas4. When the canvasNum is over 4, we rotate it back to 1 so that we can save the picture back to Canvas1. A procedure named setPictureInCanvas is used to set the image as background of one of the canvases. The figure below shows the relevant blocks for this logic:


We provide ability for user to select an image that is already displayed on the canvas. Once the canvas is touched, we retrieve its background image and display its image name in a text box. The blocks for this logic are shown in figure below:


Once an image is selected, and its name displayed in TextBox (txtPictureToPost), we allow the user to tap on a Button (btnPostImage) to transmit / post the selected image using Web component. The Web component URL is set to point to PHP script on the server. The blocks for the Web and invoking the PHP script is shown in figure below. On each post, if successful, it will store the file, on the server, as myPhoto.jpg.


PHP Code:

The following is the PHP code that needs to be saved onto your server and invoked using the blocks shown in the above figure.

/* FileName: tempSaveFile.php
* Simple PHP script to save image file.
* Note: This simple PHP requires much update for data validation

$dataToWrite = $_REQUEST['fileName'];
$fileName = "myPhoto.jpg";

file_put_contents($fileName, $dataToWrite);


Download source / apk

  • Click HERE to download .apk
  • Click HERE to download source



Posted by on February 27, 2014 in Uncategorized


How to develop location based Android App

In this tutorial, I’ll show you how you can develop an app that allows you to record list of addresses and view the address on the Google Maps. I will also show you how to view your current location on the Google Map. The coding will be done using MIT App Inventor.

What will be covered in this tutorial?  In this tutorial, you’ll learn the basics of:

  • List manipulation – creating lists, appending items to lists
  • ListPicker – adding items to lists, persisting to database
  • LocationSensor – detecting current location for displaying on Google Maps
  • ActivityStarter – used to start-up Google Maps for current or predefined address
  • Notifier – displaying messages
  • TinyDB – persisting data (lists) into database
  • Misc. – text manipulation, basic validation

We will be working toward the design shown in Figure-1 blow:




Figure-2 below is showing you, at high level, how the components are arranged in our design editor. It also shows you the non-visible components (e.g. TinyDb, ActivityStarter, LocationSensor, Notifier). that are used in the sample app. It also shows you the ListPicker. Please note that ListPicker can be dropped anywhere in the design editor because using the blocks, we set that hidden.




Assumption: This tutorial assumes you know the basics of App Inventor. For additional tutorials, please see HERE.

App Inventor Blocks

We define 2 global variables.

  • tagAddress  a variable is a constant and will be used, as a tag, for storing / retrieving data from our database.
  • listLocations – a variable that be used to store / manipulate list of addresses

We now create a procedure that can be invoked when the app is started (initialized). The procedure sets up the initial state of some of the components. Some of these settings could have been done from the design editor, but for demo purpose and clarification, we are using a procedure. In the procedure, we also check our database to find out if there are any stored addresses. If no data, then we just use an empty list.



Viewing stored locations

We use a button, btnViewLocations, that user can tap to view all user-specified addresses in a ListPicker. If validation goes through (e.g. address list not empty), this button will invoke our ListPicker.Open to display the addresses. The ListPicker component has been set to not-visible (see our init procedure in top figure). The blocks for the clicked event of this button is shown below. When button is clicked, we check to see if our listLocations contains any data. If not, display error message, otherwise we open our ListPicker using ListPicker1.Open block:




Adding new addresses:

To add a new address, we have dropped a button (btnAddLocation ‘Add Location’). We also use a button (btnCancel ‘Cancel’) to cancel the process of adding.  We also use a button btnAddLocatoinhelp ‘Location Help’) to display what type of addresses can be entered. The blocks looks like below:




When btnAddLocation is clicked, we make our address data entry visible (using screen arrangement), allowing user to enter address. If user clicks on cancel, we make the arrangement hidden again. Using this approach, we keep the screen simple and avoid the clutter. We also provide a button (btnSubmit ‘Submit’), allow user to indicate that they want to store data. The data entry arrangement looks like below:




When user taps on btnSubmit ‘Submit’ button, we perform basic validation to ensure data has been submitted. If validation does not pass, we display error message. Otherwise, we invoke a procedure that appends the new address to our list. We also store the updated list into our database. Once address is added, we hide our arrangement again.  Blocks below shows how this logic is done:




When user selects an address from the opened ListPicker, we display the address in the device and allow user to tap on btnViewMap ‘View on Map’ to see the selected address on the Google Map. Figure-8 shows the blocks for ListPicker.AfterPicking and Figure-9 shows how it is displayed on the device or emulator.







When the btnViewMap ‘View on Map’, we validate to ensure that an address already has been selected. If not, display error message otherwise we use blocks shown in Figure-10 to show address:




The above blocks will open the map and the output will be like image below:




Viewing current location on the map

We have dropped in a button, btnMyLocation ‘My location on the map’ that can be clicked to view current location on the map. It will use LocationSensor to get the current address and will use blocks shown in Figure-12 to show current location on the map:




Download source / apk

  • Click HERE to download .apk
  • Click HERE to download source



Posted by on February 27, 2014 in Uncategorized


Developing an Android Flashlight app

Ever wanted to develop an Android Flashlight app? If so, take a look at the video below that shows you how to develop a Flashlight app the quick-&-easy way.

Interested in AiLiveComplete? please see HERE for details and more information.

Download source / apk 

  • Click HERE to download .apk
  • Click HERE to download source (NOTE: This was designed in Ai1LiveComplete classic version)



Posted by on February 20, 2014 in AiLiveComplete, android


Quickly retrieve Android device info

Ever wanted to add capability to your Android app to retrieve device specific information such as API level or device model / manufacturer?

If so, watch YouTube below to see how this could quickly be accomplished using KitchenSink component in AiLiveComplete!

Interested in AiLiveComplete? please see HERE for details and more information.

Leave a comment

Posted by on February 15, 2014 in Uncategorized


AiLiveComplete – Horizontal & Vertical Scrolling – Part I

Check out the video below to see the components in AiLiveComplete that enables you to quickly add in horizontal and vertical scrolling capability:

Interested in Ai2LiveComplete? please see HERE for details and more information.

1 Comment

Posted by on February 9, 2014 in Uncategorized


Android app – Using FileManager component

In this posting I show you how to use AiLiveComplete FileManger component to write a file to:

  • Write a file to folder
  • Read file from folder
  • Retrieve directory listing

The FileManager is component that can be used to view directory structure, view folder files, write a file to a folder and read a file from a folder.

The image below are the blocks (logic) that is needed to accomplish above task:


Interested in Ai2LiveComplete? please see HERE for details and more information.


Posted by on February 4, 2014 in AiLiveComplete

%d bloggers like this: