Making “pretty” App Inventor user interface controls

In the real world, “user interfaces” look like electric light switches, push buttons or control knobs, temperature dials on ovens, volume controls on radios and so forth. We can mimic these types of controls for our touch screen Android apps. We do not have to rely on the boring desktop-like clickable button or checkboxes in the App Inventor user interface palette.

A previous tutorial showed a trick to make the color of a button vary continuously. This tutorial shows how to use our own images, instead of the boring button, together with a bit of code to bring these buttons to life.

User Interface View

Below is a sample “toggle switch”. Press the switch icon once and the toggle moves to the right; press it again and the toggle moves back to the left.

toggleswitch1

toggleswitch2

Here is a slide switch. Press the slide switch once and the switch position moves to the right and the switch illuminates in green. Press the slide switch again and the switch returns to the left.

switch1

switch3

Here is a concept for a raised momentary push button. Pressing the button changes the appearance of the button while your finger is on the button – to look like the button is pressed in.

UI1

UI2

The Designer View

Creating the interface requires dragging the usual button control from the Palette into the Designer View area. But the normal button image is replaced with our custom graphics.

Designer

Components

To set the graphic image, select the button in the Designer View. Then, in the Properties for the button, look for Image and click on that to display a pop up dialog box of options. The default image is “None”. Initially the list of images is empty – select Upload File to locate your .jpg or .png graphic item to use for a button and upload the images to App Inventor.

In this example, all of the images to be used in this demonstration app have already been uploaded.

SetImage

Below the Components area of the screen, you should see a box labeled “Media”, like this:

Media

This box also displays all of the media files you have loaded in to your project. You may upload files using the Upload File… button; however, you will still need to select the uploaded file to set the image for your individual buttons.

You may notice that I have uploaded two graphics for each button. One graphic, say with the toggle switch, shows the button with the toggle on the left and a second graphic shows the toggle on the right.  When the toggle switch “button” is pressed, the event handler alternates the toggle switch graphic from the left to the right or right to left.

Blocks View

To enable the button images to flip back and forth requires some code to reset the button’s image property.

For the toggle switch, we need a variable, ToggleSwitch, to keep track of which image is displayed. I have used a binary value that is either true or false.  A true value means the switch is presently to the left; a false value means the switch is to the right.

In the button’s Click event handler, if ToggleSwitch is true, then we set the button’s image property to the graphic that shows the switch to the right and set the value of ToggleSwitch to false.

Otherwise, we do the opposite – if ToggleSwitch is false (the else block below), then we set the image back to the one showing the toggle switch to the left and set the value of ToggleSwitch to true.

ToggleSwitch

The Slider Switch is handled identically to ToggleSwitch except we use the variable SlideSwitch and the images of the slider switch button.

SlideSwitch

Lastly, the push button is handled in a somewhat different way. The goal is that while the button is pressed, the button should look like it is in the down position. Once the finger is removed from the button, the image should look like a button in the up position.

This feature is implemented by processing the TouchDown event and then setting the image to the picture showing the button in the down position.

TouchDownWhen the finger is removed, a TouchUp event occurs. In the TouchUp event handler, the button’s image is reset to the image of the button in the up position.

Download Source

This .zip file contains the App Inventor .aia files and the graphic images. I drew these images using Affinity Designer software and I assert no rights to the images – feel free to use them anyway you wish.

Right-click your mouse (on Windows) or Ctrl-click (on Mac OS X) and choose the save as option in your browser: PrettyButtons.zip

Unzip the file and upload the .aia file to your App Inventor account.

————

I will be making some additional user interface components and will post here on this web site. Hopefully, with the simple example above, you can begin creating some components of your own!

7 thoughts on “Making “pretty” App Inventor user interface controls”

  1. can you pls post how to remove those square box frame background on the buttons, it make the design ugly

    1. I as traveling for a couple of days. Home now.

      In the Designer View, click on the button and then go over to Properties in the right column.

      At Shape, you can select Default, rounded, rectangular or oval.

      A related issue is spacing between buttons. What I do is insert extra vertical or horizontal layouts between the buttons and sent their Height or Width property to a small value like 1 percent, or 3 pixels. This inserts some extra space.

      Ed

Comments are closed.