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 🙂
thanks for your post
i had the same idea and i was not sure it works.
thanks for your confirmation !
hey nice write up,but im still learning my way around app inventor. could u do a video walkthrough? thanks man
hey i followed your tutorial to the T but its not working for me, it never goes to the other screens when the button is clicked and i have it exactly as it is in the picture…a video walkthrough showing how you got yours to work would be nice 🙂
Nice, but still a video would be nice 😉 good work
Works brilliantly on my HTC Wildfire, thanks for the info.
Hmmm, I had thought about this solution when I first realized AI had this major limitation.
I didnt read the entire tutorial but Its pretty much what I had in mind. Still, it just seems like too much work lol
Or maybe I’m just being lazy, nice tutorial regardless.
I remember doing similar stuff with websites and making things visible depending on the situation
Lol it is too much work when Google should have added multiple screen support in in the first place.
The program is still in beta form you cant expect it to have everything but would it really be that hard to make multiple screens
Everybody had the same idea but nobody wrote such a great, easy and clear tutorial :):):) Thanks a lot, works great on my HTC Desire HD!
Your article really awesome !! It’s really help me to make multi-screen application easily
I have found these solution a few day. now your solution make me a way to do complexity stuff more
absoultely thanks !! :))
Hi, great tutorial! But could you tell me how I choose one of the screens(or table sets) to be visible from start? As it is now both sets show until i click one of them.
There is a very easy fix to this. In the blocks editor, go to Screen1 in My Blocks and choose the block that says when Screen1.Initialize. In the “do” part of the block, add in the “screens” and the true and false blocks at the ends like you did earlier. Whichever is “true” as you can imagine, is the one that will be visible when the app starts up. I hope this solves your problem as it has solved mine!
There is a very easy fix to this. In the blocks editor, go to Screen1 in My Blocks and choose the block that says when Screen1.Initialize. In the “do” part of the block, add in the “screens” and the true and false blocks at the ends like you did earlier. Whichever is “true” as you can imagine, is the one that will be visible when the app starts up. I hope this solves your problem as it has solved mine!
I did it differently. In the Designer I just unchecked “Visible?” on all the screen arrangements I wanted to be secondary. I thought that was easy. Also, you should probably change step 2 for “Changing Screens” to read, “Click on My Blocks, Button #, then drag out when Button clicked.”
how can I go back to the main screen?
Use the Screen Initializer block, then inside put the ClearScreen Procedure AND under it set whatever “screen” you want to be visible to true. e.g. “Screen1.Visible->true”
Use the Screen Initializer block, then inside put the ClearScreen Procedure AND under it set whatever “screen” you want to be visible to true. e.g. “Screen1.Visible->true”
Hi, this is really a great tutorial. I’m facing however the same problem as Simon; when I start my app, all the ‘screens’ are listed underneath each other (you can scroll all screens from startup). I think there should be a way to get pass this problem. I thought maybe it is possible to set the timer at the beginning; showing the startup for only one second and then passing to the next ‘screen’?! But I dont’t know how to set the timer for this first screen without touching any buttons (I’m not experienced in programming :-)). Hope someone can help! Cheers
Hi, I had the same problem as you but I found a way to get one showing when the app starts up. In the blocks editor, go to my blocks and then Screen1. Choose the whenScreen1.Initialized, and for the do part of the block, drag your “screens” there and put the false and true blocks there. The true “screen” is the one visible when the app starts up. As for scrolling (I don’t know if you want this to but here’s how), in the app inventor in the browser (not blocks editor), there is simply a checkbox for “Scrollable” in the properties for Screen1. You can uncheck that if you don’t want your app to be scrolled around in. I hope this helps!!
Hi, I had the same problem as you but I found a way to get one showing when the app starts up. In the blocks editor, go to my blocks and then Screen1. Choose the whenScreen1.Initialized, and for the do part of the block, drag your “screens” there and put the false and true blocks there. The true “screen” is the one visible when the app starts up. As for scrolling (I don’t know if you want this to but here’s how), in the app inventor in the browser (not blocks editor), there is simply a checkbox for “Scrollable” in the properties for Screen1. You can uncheck that if you don’t want your app to be scrolled around in. I hope this helps!!
Use the Screen Initializer block, then inside put the ClearScreen Procedure AND under it set whatever “screen” you want to be visible to true. e.g. “Screen1.Visible->true”
Use the Screen Initializer block, then inside put the ClearScreen Procedure AND under it set whatever “screen” you want to be visible to true. e.g. “Screen1.Visible->true”
Hi, this is really a great tutorial. I’m facing however the same problem as Simon; when I start my app, all the ‘screens’ are listed underneath each other (you can scroll all screens from startup). I think there should be a way to get pass this problem. I thought maybe it is possible to set the timer at the beginning; showing the startup for only one second and then passing to the next ‘screen’?! But I dont’t know how to set the timer for this first screen without touching any buttons (I’m not experienced in programming :-)). Hope someone can help! Cheers
Hi, this is really a great tutorial. I’m facing however the same problem as Simon; when I start my app, all the ‘screens’ are listed underneath each other (you can scroll all screens from startup). I think there should be a way to get pass this problem. I thought maybe it is possible to set the timer at the beginning; showing the startup for only one second and then passing to the next ‘screen’?! But I dont’t know how to set the timer for this first screen without touching any buttons (I’m not experienced in programming :-)). Hope someone can help! Cheers
Thanks for the tutorial! It works like you said it should which is great! Except when I start the app of mine, all of the screens are displayed. Do you have a fix to it or do I have to ignore it? But thanks for telling us (or at least me) how to get multiple screens!
Thanks for the tutorial! It works like you said it should which is great! Except when I start the app of mine, all of the screens are displayed. Do you have a fix to it or do I have to ignore it? But thanks for telling us (or at least me) how to get multiple screens!
did you set the arrangements to “fill parent” in size???
Mighty awesome. Thanks, it’s working great. With one exception. Has anyone figured out a way to make the back button take you to the previous screen instead of exiting the app?
I dont think the beta version of app inventor recognizes that button yet since if you use this tutorial you still only have one main screen in designer. Hopefully they will add that in future versions.
Cool, did it and it works. Only thing is that darn back button. Scrapping app inventor. Just downloaded eclipse…fingers crossed.
yea how to I get bet to selecting the screens? Ever time I hit the back button the app closes. Please help.
I would like a video please!!
brilliant thanks. been wrestling with this for some time now.
Thank you very much!!
No longer appears to work with the latest update?? 🙁
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!!!!!!!!
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
How did you do that?? Please tell me. Thanks in advance
Thank you so much for your posting..^^
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.
Thanks man this has been a real help for me
is there anyway to copy screens already created? I’m tired of creating many different screens that have the same layout as the others.
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”
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.