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:
- Click on Screen1 in the Components panel, and in the Properties panel, select Center from both the AlignHorizontal and AlignVertical drop-down lists.
- Since we are going to be adding many components to our home screen, we are going to walk you through a more complex method that requires an extra component. Go to Layout drawer and drag out the VerticalArrangement component onto the Viewer. Notice how it sits below the Image Component icon. Click on the Image Component icon and drag it into the VerticalArrangement box. In the Components panel, select VerticalArrangement and go to the Properties panel. In both the Height and Width options, select Fill Parent from the drop-down menu and click on OK for each. You will see the VerticalArrangement component expand to fill the screen. Still in the Properties panel, go to the AlignVertical and AlignHorizonal options and select Center from each drop-down menu. Notice how the Image component is now centered in the Viewer on Screen1.
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.