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

Continue reading How to center an image on the screen using App Inventor →