Click here to Skip to main content
13,558,356 members
Click here to Skip to main content
Add your own
alternative version


21 bookmarked
Posted 14 Jan 2011
Licenced CPOL

Multiple Screens Using Google App Inventor

, 14 Jan 2011
Rate this:
Please Sign up or sign in to vote.
Making multiple virtual screens on your App Inventor project


Many developers started to play with Google App Inventor to develop simple applications, instead of writing lots of code. But one of the biggest problems encountered is the fact that you can't have multiple screens. So in this tutorial, you are going to learn how to virtualize screens in a very simple, useful and easy way.


Before reading this tutorial, you need to have some experience using the Google App Inventor, if you have finished the HelloPurr you can proceed, but remember that App Inventor Blocks Editor uses Java language, so it will be nice if you already got some knowledge in Java.

The Design Part

As App Inventor is a lot visual, let's start by adding two VerticalArrangement boxes like shown below. One called vScreen1, that will simulate the main screen and the other called vScreen2, that should emulate a secondary screen on your application:

So after you have done that, start putting some objects into both, for a test in this case, I've inserted a lot of stuff on both, and as you can see on the second one, I've inserted other alignment tools (works nice). After all, I got something like this:

Important: You should never forget to do this. On both VerticalArrangement tools, you should put the Width and Height properties as Fill Parent..., as shown below:

Important Step!

As you can see in the image, the values are from the second screen (vScreen2) and its Visible property is false, that's because we don't want it to be shown with the main screen (vScreen1) so when the application starts, it would be hidden.

That's all for the application design part, so let's dive into some code now...


Now let's go to the Blocks Editor to have some fun. Start by creating a new function for the button that will take the user for the second screen, on this tutorial, I'm using the function btGo2.Click. After this turn, the vScreen1 invisible, and then turn the vScreen2 visible, so now you the user would be in the second screen. If you want to make it more real, change the title of the Screen1 (the real application screen) to the title that you want for the new screen. Just like this:

btGo2 Code

But now the user is stuck on the second screen, as we added a Back button (btBack) on the second screen, we can change this code a bit to make it go back to the first one:

btBack Code

The full code will look like this:

Full Code


As you can see, it's very simple, but very useful. With this simple snippet, you can do multiple screens virtually. Don't forget that you can do this with infinity screens.


  • Original article


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Nathan Campos
Brazil Brazil
I develop for mobiles since 2005, using J2ME for those old color mobile phones(like the good Nokia ones), after this at 2006 I've started on WIndows Mobile development using VB and some C#, at 2007 I was totally focused on Windows Mobile development, developing things like Calendars, simple games and a fully-featured text editor. Aug 2008 I moved to Symbian S60 3rd development using Python and C++. After that I've started on the platform that I like most: Android. One week ago I bought my first Mac, so I was going to start on iOS development, but I saw that it's so much difficult(Objective-C is the problem)

You may also be interested in...


Comments and Discussions

QuestionMissing Images on the Multi Screen Tutorial Pin
Member 106494286-Mar-14 10:47
memberMember 106494286-Mar-14 10:47 
GeneralAppInventorBlocks Pin
Member 30576024-May-11 2:32
memberMember 30576024-May-11 2:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03-2016 | 2.8.180515.1 | Last Updated 15 Jan 2011
Article Copyright 2011 by Nathan Campos
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid