Building your First Mobile App: App Design

Let's begin by designing the user interface. Below is a hand-drawn diagram illustrating how the interface should look:

Sketch of the app

About the app

The application features a display containing an image accompanied by a button. When pressed, the button alters the visibility of the image and modifies the button's label text. As part of an advanced tutorial, participants will learn how to enhance their app by integrating sound effects upon interactions.

Desiging the user interface

Now, we will guide you through the process of building this interface using the MIT App Inventor platform. Follow these steps:

1. Create a new project and give it a suitable name.

2. Drag and drop an Image and a Button onto your screen, resulting in the following layout:

1. Adjust the components' positions to the center and middle of the screen:

   • Click on Screen1 in the Components tree.

   • Set AlignHorizontal and AlignVertical to Center in the Properties panel.

   • Optional: To use the device default theme, scroll down in the Properties panel and change the Theme to Device Default.

2. The Image component is a placeholder; upload an actual image:

   • Go to the Media panel, click Upload File, and select light_on.png from the media folder.

   • Click on the image icon or Image1 in the Components tree. In the Properties panel, click Picture, select your image file, and press OK.

   • To prevent the image from dominating the screen, set its height to a percentage value (e.g., 60%) in the Properties panel.

3. Customise the Button:

   • Click on the Button on the screen.

   • In the Properties panel, set the Width to Fill parent.

   • Change the Text property to Hide.

4. Congratulation! You have completed the design phase. Now, it's time to think about implementing the app logic.