Next, we will add another image to lay over the background image. We used Illustrator and Photoshop to create some artwork and saved it as a .png
file. If you don't have these software programs, you can use free editors, such as Inkscape (Windows/Linux), Affinity Designer (Mac), or Gimp (multi-platform) to create artwork. You could make an image similar to ours or a new design, or find Creative Commons image online.
In the far left column in the Designer, in the User Interface palette drawer, choose the Image Component and drag it to the Viewer. You will notice that a small image component icon sits in the upper-left corner of the Viewer. We want to center it. There are two ways to do this:
Next we will change the name of the Image component. Go to the Components panel and select Image1. Once it is highlighted, click on Rename at the bottom of the panel to see a pop-up window where you can enter a new name, Pool Party Message
. Click on OK:
Note that App Inventor replaces the spaces with underscores, so the Image component name will now appear as Pool_Party_Message in the Components panel. Now, we will upload the actual image for the Image component. With Pool_Party_Message highlighted, go to the Properties panel and click on None under Picture to open the Upload File dialogue. Choose the image you want to use (we named our image in a similar way: PoolPartyMessage.png
) and click on OK. Notice that the image name appears in the Properties panel under Picture and in the Media panel, and the actual image is displayed over our background image on Screen1 in the Viewer, as shown in the following screenshot:
As a mobile apps user, you may have noticed that apps have some sort of navigation bar. We will build ours across the bottom of the screen by adding five buttons: Home, Info, RSVP, Guests, and Map.