Using Images and the Camera in App Inventor
In an earlier post, I mentioned that ImageSprites use images – and suggested I do a tutorial on images so here is a first look at using images in App Inventor 2.
For this tutorial, we create a very simple app that uses the camera to take a picture, or we can fetch a selected photo from the phone’s photo gallery. Either way, the image that is obtained is displayed on the screen.
First, create a simple user interface. To set this up, I used the VerticalArrangement layout and then added a button, an ImagePicker and an Image on to the Viewer:
The Image component is located in the User Interface section of the Palette, in the Designer.
The ImagePicker is located in the Media section of the Palette. Drag each to the Viewer window.
You also need to drag a Camera component to the Viewer; the Camera is also located in the Media section. Note that the Camera is an invisible component and will appear below your app’s user interface screen, as shown above.
After renaming the components, we should have a set of components like this:
For the Image1 component, the Properties look like:
Note that the text box field named Picture has the name of a .jpg image file entered into, in this example. Sorry for the ugly gibberish filename – I just grabbed a photo off of my own Flickr page, saved to my hard drive and then uploaded to App Inventor.
To upload a photo from your computer to the Image1 control, click on the Picture field – this displays a prompt:
The prompt shows the full name of the image I have already uploaded, and this file is already highlighted. Or, click on Upload File … at bottom to select and upload your own .jpg image file.
This uploaded .jpg becomes the default image initially displayed in the program. If you want, you could leave this blank but having something to show on screen makes the program a bit more interesting and helps the user to see where photos will be displayed.
Taking a photo is absurdly easy. When the button for taking a photo (btnTakePhoto) is clicked on (or rather, pressed with your finger), the Click event is raised – and all this event handled need do is call the camera’s TakePicture method:
Once the camera completes taking the picture, the AfterPicture event occurs. This is where we fetch the image (hover your mouse over the pink “image” within the AfterPicture block and select “get image”). Assign the image that was just taken (the get image) to the Picture property of the Image1 control. This copies the photo that was just taken, and displays it on screen.
We could stop here, but let’s take a look at grabbing a picture from the photo gallery on the phone. To implement this, we use ImagePicker. The ImagePicker is a control that displays the photo gallery, let’s you select an image from the photo gallery, and then returns that selected image to the app.
The ImagePicker displayed in the Designer is effectively a button that contains its own event handler for the Click event. Pressing the ImagePicker button on the main screen automatically enters the gallery where you select your photo. When the selection is complete, the ImagePicker’s AfterPicking event is raised and we add a tiny bit of code to process the image, merely copying the “Selection” property of the ImagePicker control (renamed here as impgSelectPhoto) to the Image control on screen to display the selected photo.
Running the App
When activating the camera, take a photo and wait a moment – you should see a “checkmark” at the bottom of the screen after the photo is processed. Tap the checkmark icon to signify you are done and you should be returned to the app and the photo you took should be displayed.
When selecting a photo from the gallery, wait for the gallery to appear, scroll through and select a photo. Tap the photo and wait for a moment – and control should return to the app and the selected photo will appear on the screen.
Note – if you have more than one photo gallery app registered on your phone (I have 3 such apps), Android will prompt you as to which of the gallery apps you wish to use.
There are additional features that are not shown here. For example, if your phone has a front facing and back facing camera, its possible to switch between the cameras.
Source code is available in the MIT App Inventor Gallery –> here