Google App Inventor: How to Create Multiple Screens for Your App (As Best We Can)

 

So one of the major pains with Google AppInventor is that fact that (at the moment) you cannot create multiple screens. Well, there is a little trick to get around that flaw without too much trouble. The concept here is to create screen arrangements then make ones visible when we need them to show up and invisible when we want to show another “screen”, this create the illusion that the app changed to a different screen. Let’s get started.

I. Before You Begin

1. You need to have AppInventor installed, of course.

2. You need to be able to connect to your phone with the blocks editor so we can see the screen changes on the phone and make sure they function the way we want (as we can’t see the screen changes in the AppInventor very well).

3. Have done a few of the Google Tutorials from getting started with AppInventor to get familiar with the Palette, Components, Designer, and Blocks Editor.

II. Create a MultiScreen App – Designer

1. Have AppInventor and the Blocks Editor open and have your phone connected and showing the app demo on it’s screen.

2. Open a New Project and name it whatever you like (we will use MultiScreenTest for ours).

Make Our First “Screen” –

3. In the Designer window, take a Screen Arrangement (Table Arrangement works best, but you can use any depending on your needs) and drag it to the screen window. It will now show up in the window and in the Components section of the Designer.

4. In the Components section of the Designer, click on the new ScreenArrangement that showed up and click Rename. Name it to something that will help you identify what “screen” this is going to be.

*Tip – It’s always a smart idea to name components with what they are first then the name (I.e ScreenSplash, ScreenLogin, ScreenThankYou or ButtonLogin, ButtonLogin2, etc. ). This is good to do because it will keep all of the components organized in the Blocks editor and you won’t have to second guess what kind of component you are working on.

5. In the Properties window for the Screen Arrangement, we are going to setup how ever many columns and rows we need.

6. Then in the Properties window for the Screen Arrangement, change the width and height to both be Fill Parent (this way the screen arrangement takes up the whole screen on the phone).

7. Now, we drag whatever elements we want from the Palette section into those columns and rows on the screen.

We now have our first “screen”

8. Next, we will pretty much do the same thing for the next “screen”.

Make Our Second “Screen” –

1. In the Designer window, take a Screen Arrangement (Table Arrangement works best, but you can use any depending on your needs) and drag it to the screen window. It will now show up in the window and in the Components section of the Designer.

2. In the Components section of the Designer, click on the new ScreenArrangement that showed up and click Rename. Name it to something that will help you identify what “screen” this is going to be.

*Tip – It’s always a smart idea to name components with what they are first then the name. I.e. all of the screen arrangements I’m going to name them Screen and then whatever I want to call them (ScreenSplash, ScreenLogin, ScreenThankYou or ButtonLogin, ButtonLogin2, etc. ). This is good to do because it will keep all of the components organized in the Blocks editor and you won’t have to second guess what kind of component you are working on.

3. In the Properties window for the Screen Arrangement, we are going to setup how ever many columns and rows we need.

4. Then in the Properties window for the Screen Arrangement, change the width and height to both be Fill Parent (this way the screen arrangement takes up the whole screen on the phone).

5. Now, we drag whatever elements we want from the Palette section into those columns and rows on the screen.

We now have our second “screen”

6. Next, we will pretty much do the same thing for the next “screen”.

Make Our Third “Screen” –

1. In the Designer window, take a Screen Arrangement (Table Arrangement works best, but you can use any depending on your needs) and drag it to the screen window. It will now show up in the window and in the Components section of the Designer.

2. In the Components section of the Designer, click on the new ScreenArrangement that showed up and click Rename. Name it to something that will help you identify what “screen” this is going to be (I’m using this Screen Arrangement as a splash screen so I named it ScreenSplash).

*Tip – It’s always a smart idea to name components with what they are first then the name. I.e. all of the screen arrangements I’m going to name them Screen and then whatever I want to call them (ScreenSplash, ScreenLogin, ScreenThankYou or ButtonLogin, ButtonLogin2, etc. ). This is good to do because it will keep all of the components organized in the Blocks editor and you won’t have to second guess what kind of component you are working on.

3. In the Properties window for the Screen Arrangement, we are going to setup how ever many columns and rows we need.

4. Then in the Properties window for the Screen Arrangement, change the width and height to both be Fill Parent (this way the screen arrangement takes up the whole screen on the phone).

5. Now, we drag whatever elements we want from the Palette section into those columns and rows on the screen.

We now have our third and last “screen” for this example.

6. You can do this as many times as you need to add as many “screens” as you need to your app.

III. Create a MultiScreen App – Blocks Editor

ClearScreen Procedure –

1. Now comes the fun part. We have to use the Blocks Editor to tell the app to display our “screens” at the appropriate time. Open the Blocks Editor and let’s begin.

2. First thing we are going to make is a Procedure called ClearScreen. This will basically make all the Screen Arrangements we have in our app invisible whenever the Procedure is called. This is a time saver so we don’t have to make each individual Screen Arrangement invisible every time we want to change screens.

3. In the Blocks Editor, click on Built-In at the top left, then click Definition and pull a Procedure block out onto the Block Editor screen (not to be confused with the ProcedureWithResult block). Rename it to ClearScreen.

4. Click on My Blocks at the top left and look for your first Screen Arrangement (if you named them Screen— then they will be easier to find) and click on it.

5. Look for the the Set Nameofthescreenarrangement.Visible To block, drag it out and click it inside the Procedure block.

6. Once it clicks in and is still highlighted, begin typing False on your keyboard until you see false come up on the screen. Once it does select it to add the False to the end of the Nameofthescreenarrangement.Visible block.

7. Next, repeat steps 4 through 6 for all the other Screen Arrangements you’ve created.

8. Now, whenever you call the ClearScreen procedure later on in the code it will automatically make all the screens invisible, allowing us to then make whatever screen we want visible afterwards.

Changing Screens –

Now, whenever you want to change screens just set the button (or whatever action you want to initiate the next screen to come up) to call the Procedure and then set the Screen Arrangement you want to show up to visible. Here’s an example of how to do that:

1. In the Blocks Editor, select My Blocks at the top left, then click on the Button you want to initiate the screen change.

2. Find the block that says “Nameofthebutton”.Click and drag it out into the Block Editor screen.

3. Click on My Definitions and select the call ClearScreen procedure we created earlier, drag it out and click it into the “Nameofthebutton”.Click block so it is the first thing called when someone clicks the button.

4. Next, find the Screen Arrangement under My Blocks you want to make visible after clicking that button and click on it.

5. Look for the the Set “Nameofthescreenarrangement”.Visible To block and drag it out and click it inside the “Nameofthebutton”.Click block (Important: Make sure it is AFTER the ClearScreen Procedure, otherwise it won’t work properly).

6. Repeat this in all the buttons or actions that you want to initiate a screen change. Done!

It should look like this when done:

Hope that helps everyone make some more complex apps!

If you guys would like a video example for this procedure, let me know in the comments 🙂

Join 90k others & subscribe to my weekly, not annoying newsletter for more tech!

* indicates required