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 :)

If this procedure helped you, please consider donating to the original developer or at least sending them a thank you.

Now that you are rooted, head here to learn some of the fun things you can do!

For all the devices we have rooting procedures for, head here.


Something Wrong? If you notice an issue with the procedure (broken link, steps out of date, etc.), use this form to let us know! Otherwise, if you just are having trouble with the procedure, reach out to us on Twitter, Facebook, or Google+.

  • Greegan

    No longer appears to work with the latest update?? :(

  • BTHOMAS1348

    WORKS GREAT FOR ME BUT I NEED TO KNOW HOW TO PUT IMAGES IN TO THE NEXT SCREEN AND MAKE IT A REALLY GREAT APP NEED HELP!!!!!!!!

  • Smack

    Thanks@00429c9b06b6d49121648557397e4ebe:disqus   A small addition on how to bring yourself back to home screen would help but I added a home button to each which would reshow the other screens

    • Penanko

      How did you do that?? Please tell me.  Thanks in advance

  • Lafymydog

    Thank you so much for your posting..^^

  • Juper0

    a video may be more than needed. but more picks along the way so i know i got the step by step right. otherwise, this is very helpful. thanks.

  • Qum

    Thanks man this has been a real help for me

  • Pingback: Google App Inventor for Android in Education | kieranhogg.com blog

  • http://twitter.com/AskYous Yousef

    is there anyway to copy screens already created? I’m tired of creating many different screens that have the same layout as the others.

    • http://www.facebook.com/profile.php?id=100000188276196 Force Meow

      Not that I’m aware of, but a more efficient way  to reuse elements of previous screens is to have two “screens” visible, and just reuse for instance, the “back to home screen” button in it’s own screen at the bottom of the new screen. 

      When looking at the app, there’s no sign these are two screens.

      so just give each element or group of elements you’d like to reuse its own screen, and add those elements screens to the buttton action as “xyz_screen=visible”

  • http://www.facebook.com/profile.php?id=100000188276196 Force Meow

    Is there a way to make a new screen appear at the top of the screen?

    I’m using some pretty long screens, and they appear at the bottom of the screen, requiring the user to scroll up to then read down.