How to Create Multiple Screens with Google App Inventor - App Inventor Tutorial - Multiple Screen Displays

The easiest way going about creating the "multiple screens" effect is to create screen arrangements that fill the parent in height and width. I'll be showing you how to control these windows throughout this tutorial. Ill use an example phony application that i'll call "Trapped." Throughout this tutorial I will be showing you how to setup four different virtual screens and how to access them by coding proper visibility.

The default screen is called "Screen1," but we will be adding different screen arrangements that give the appearance of multiple screens. The first step to creating multiple screens is to have a basic understanding of App Inventor.

Create your Screens

We will need to create four different screen arrangements, which should be properly titled based on what the screen will contain.

1. Create a vertical screen arrangement and immediately rename it to "Home." Set the height and width to "fill parent." Filling the parent will allow your virtual screen to take up the whole display area of the device.
2. Repeat step 1 three more times, but rename the screen arrangements to: Settings, Play, and Hiscores.
3. When you try testing your application or view it in the visual editor, you'll notice that each screen arrangement created will be stacked onto one another to create a large scrollable screen. This is fine, i'll explain what to do further in the tutorial.
4. Select the Home screen arrangement that you created in the first step. Drag three buttons to the visual editor. Your buttons will automatically stack on top of each other since we chose to use vertical arrangements. Unless you want to creatively organize your screens, vertical arrangements are the way to go.
5. Rename the three buttons to: Play, Settings, and Hiscores. For visual quality, set the width of each button to "fill parent." Select each of the buttons and set the "text" box in the properties box. Type in what you want each button to say. I use the same text that I called the buttons. While you're editing the buttons make sure that the enabled box is checked in the properties column.
6. Your visual editor column should display your Home screen with the three buttons. The visual column should also be showing your other screen arrangements as well.
7. If you're actually wanting to make a usable application instead of learning how to use multiple screens, click on your other screen arrangements and add components that you'll be needing.
8. Once you're done adding components to your screen arrangements, go back and click each arrangement to set the "visible" box to unchecked in the properties column.

Congratz! You're done with the basics of the visual editor for the tutorial. If you want to go back and add components or anything to your screen arrangements, all you have to do is check the visible box for that arrangements to be displayed.

Coding Your Multiple Screens

Using the blocks editor to customize your screen visibility is vital to the creation of your virtual screens. In this part of the tutorial I'll be showing you how to control your screens by switching the visibility property of your arrangements when a certain event happens.

1. Open up blocks editor and allow it to fully load. I like to use the emulator for testing, but you can choose to use a device or nothing at all.
2. Your editing window is most likely blank, unless you've worked on coding before. Click on "My Blocks" in the upper left column of the editor. You'll notice that each of your screen arrangements and components will be listed.
3. Clicking on one of your components in the list for your blocks will show you the code blocks that you can use for that particular component. Click the Screen1 block drag the block that says "When Screen1.initialized" to the editing area. Anything you put in this block will be done when the application launches. Click the block that you titled your home screen arrangement and drag the block that says "set Home.Visible to" into the "Screen1.initialized" block. Click a blank stop in the editing area and choose: logic, then true. This makes it so that your home screen is showed at the beginning of the application launch.  Since we already disabled the visibility of the other screen arrangements, you don't need to add anything else to this block. More complex applications will often initialize variables that they will be storing into their database. 
4. Click the playButton component. There will a block that says "When playButton.Click." This literally will do what you want done when the button is clicked. Drag the block to the editing area to begin the process. You want all screen arrangements to not be visible when you're displaying a new screen. Select the Home screen arrangement from your blocks and drag the same block from the previous step, but set the visibility of Home to False instead of True. Make sure that the event of setting Home.Visible to false is in your "When playButton.Click" block. Go to your blocks and choose the component that you named your Play screen arrangement to. Drag the "Set Play.Visible to" block into the "When playButton.Click" block. This creates an event with an action for your button. When you click the button, it will hide the home screen and display the Play screen. Anything that you want done on the play screen must be added to this block.
5. Repeat step 4 for your other two buttons.

Congratz! You have officially created multiple screens for your application! More in-depth applications don't only use buttons to control the screen visibility, but changes the screen arrangements visibility when a certain action is done. For example, you can add an if-statement that looks like this: "If x > 3, then Set play.Visible to false & Set gameOver.Visible to true." This hides the previous screen and displays a new screen without having to manually hit a button.

If you like this tutorial, follow ModdedLife on HubPages and find out when we add more tutorials! Goodluck!