How to develop a Photo Booth Android app

27 Feb

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


11 responses to “How to develop a Photo Booth Android app

  1. John Smith

    February 27, 2015 at 4:15 am

    Photo Booth Android app – good work…

  2. blog online

    September 12, 2014 at 2:45 am

    It’s hard to come by knowledgeable people for this
    subject, but you seem like you know what you’re talking about!

  3. Replica New Balance

    August 31, 2014 at 4:00 am

    It’s amazing in favor of me to have a web
    site, which is beneficial designed for my know-how. thanks admin

  4. Warren M. Walker

    May 22, 2014 at 8:09 am

    I downloaded your aia and it runs perfectly on my tablet, everything is great, takes the photo, but when i upload the pic it only sends 63k and not the entire pic, help

  5. Android

    May 14, 2014 at 2:40 pm

    Great and nice blog. It’s also very interesting.

  6. Bernard

    March 11, 2014 at 1:31 am

    Nice Tutorial. I think you mean “Photo Booth” not BOOT:)

  7. Omer Rosenbaum

    March 2, 2014 at 4:54 am

    I managed to run the app successfully including changing the web1.url to the url where the php file is, but I have 2 problems.
    1. the file uploded cannot be opened as it is corrupted.
    2. only one file can be uploaded to the server. Is there a way to have a loop that will give a new name to each photo so the new photo that was uploaded will not delete the previous?

    • M. Hossein Amerkashi

      March 2, 2014 at 9:56 am

      You have to update your php file to save with different names.
      You’ll need to do some scripting for this.
      Re picture being corrupt, I’ll check into the script

      • Omer Rosenbaum

        March 2, 2014 at 1:09 pm

        Ok. I will try to build a loop so each image will get a new name.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: