How to center an image on the screen using 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

Continue reading

Advertisements

Can App Inventor have a button or control that rotates on screen?

A reader asked: Is there is a way to have a control, such as a button, rotate on the screen?

With a simple trick, the answer is Yes!

The trick is to use ImageSprites that are made to look like buttons. Then, instead of .Click event handler, as used on a Button, we use one of the “touch” events defined for the ImageSprite class. To rotate the sprite, change the sprite’s Heading property. Easy!

If you would like to learn more about ImageSprites, please read my online tutorial “Using ImageSprites for animated App Inventor Graphics”.

I’ve also written an inexpensive 227 page e-book all about graphics, animation and charts available from many online e-book outlets. You may find that text helpful to you as well.

Tutorial Video

The tutorial is shown here as a video – or page down for a written version of the tutorial.

User View

Watch this video to see what a rotating button looks like:

Designer View

Creating the user interface is the same as creating other App Inventor user interfaces – except we use a graphical drawing area called the Canvas and add an ImageSprite to the Canvas.

Continue reading

A “switch board” user interface panel for App Inventor apps

In the last post, we introduced some concepts for building “creative” App Inventor user interfaces that feature visually appealing user interface controls rather than the usual bland buttons.

In this post, we look at creating an array of toggle switches. Tapping a switch flips the switch from left to right, or right to left.

Concepts

In developing this user interface, we learn two concepts:

  1. We expand on the previous post and its use of images to create custom buttons.
  2. We see how a user interface control can be stored in a list and referenced like a variable within our apps.

Source code:

The User Interface

I called my app “Mission Control” because any good mission control panel needs lots of switches!

The user interface features 9 toggle switches in a 3 x 3 array. The purpose of this app is to demonstrate how to implement this type of interface – the app does not otherwise do anything interesting.

Tapping any toggle switch causes the switch lever to move to the other side of the switch. Here is a screen shot showing some toggle switches to the left and some to the right.

Screenshot_20160204-140323The Designer View

Continue reading