How To Make An Image Sprite Randomly Spawn In Mit App Inventor

A reader asked, "How can I center an image on the screen in an App Inventor app?"

There is an easy way to do this and there is a more complicated method (using the Canvas and other graphics objects). In this tutorial, we show the easy way to center an image on screen!

Our app uses the camera to take a photo and then displays that photo on screen. A secondary feature of the app demonstrates how the "image object" in App Inventor is the filename where the image is stored. In this way, the "image object" can be stored in TinyDB – its not really the binary data representing the photo or image – it is, in fact, just the filename. (TinyDB only stores text).

User Interface View

To demonstrate image centering, we use the camera to take a photo (creating the image) and then a Show pictures button to display the image on screen.

When you press Take a picture, the app launches the Android camera app to take the photo. When done taking the photo, click on the "check mark" (as it appears on my Android 7 phone) at upper right of the screen. The camera app returns to our app, which displays the file name and location on our Android device where the JPG image file has been stored.

Press "Show pictures" to display the photo. The default image size is small – but centered! We will see how to show the photo at a larger size.

Designer View

In the Designer view, drag a couple of buttons over to the screen area. One should be labeled "Take a picture" and the other "Show pictures". A text label displays status information.

The key to centering the image is to use a layout. Here we add a VerticalArrangement and then drag an Image control inside the VerticalArrangement.

Select the VerticalArrangement, and then, under Properties set its AlignHorizontal property to "Center:3", as shown.

Also set the Width property to "Fill parent…"

Drag a Camera object over to the screen area, plus drag a TinyDB object over. The TinyDB object is not actually needed to make this work, but someone asked about using an Image in TinyDB. Since that is simple to do, I've added it in to this example.

Blocks View

When the Take A Picture button is pressed, we call the Camera's TakePicture method. To obtain the image, we need to add an AfterPicture event handler. When the AfterPicture event occurs, the parameter variable "image" contains the image (well, not actually the image, but a text string that contains the name of the file where the image has been stored.)

We do not need to store "image" into TinyDB; this is done for illustration only. We could store it into a global variable too, for this simple application.

Finally, to display the image, we fetch the store "image" (remember, its really just a filename) and assign it to Image1.Picture to display the photo in the image control.

You will note that the image displays centered on the screen due to our use of the VerticalArrangement's Center option (in the Designer View properties), but it displays initially as a small thumbnail image.

To display a larger image, go back to the Designer View and set the image properties of Height and Width, both to "Fill parent…" like this:

Then, in the ShowPicture event handler, add two blocks to set the image HeightPercent and WidthPercent to 75 (75 percent). You may use other values if you want. In this example, the image will now fill 75% of the width of the VerticalArrangement layout area.