How to use Virtual Screens

Hey, everyone! Hope you all are having a great day so far! Today I would like to introduce you to the topic of using virtual screens as not many people know how to use virtual screens. To start off, I would like to tell you all that using virtual screens is much better than using regular screens, especially if you think you will be using more than ten screens as MIT App Inventor can not accommodate more than ten screens. In fact in @Peter ‘s post about General Tips and Tricks for App Inventor with a list by @Taifun mentions that you should use screens wisely and use virtual screens. Without any further adieu, let’s get started!

  1. Create a new project Screen Shot 2021-06-22 at 3.10.56 PM
  2. Drag and drop 2 of your choice of layouts/arrangements Screen Shot 2021-06-22 at 3.12.01 PM
  3. Make the arrangements fill parent for the width and height Screen Shot 2021-06-22 at 3.14.45 PM
  4. Add a button to the arrangement Screen Shot 2021-06-22 at 3.13.15 PM
  5. Go to the ‘Block’ section Screen Shot 2021-06-22 at 3.15.53 PM
  6. Drag and drop these blocks Screen Shot 2021-06-22 at 3.19.48 PM
  7. Continue making more virtuals screens for your app
  8. Now you know how to use virtual screens!

I hope I was able to help you to make virtual screens in MIT App Inventor! Thank you for your time!

6 Likes

Looks like exactly what I need, thanks going to try it and get back to you on me progress...Well tried it and used Vertical arrangment no workee, going to use horizontal...

I have issue, it opens the main screen which I color coded blue and the virtual screen which is pink doesn't appear. The blocks are the same as yours. Iam trying to use only one screen, with the other being the Virtual one, so I think I try this way

If the blocks are the same as posted above when you open the app you should see one arrangement with bgcolor blue - second arrangement with pink bgcolor is hidden. Once you press button second arrangement should be visible - pink color and first hidden. If it doen't work please show as your blocks

The correct way is to use Button1 to toggle between the Screens virtualScreens .

This example works:
SimpleVirtualScreens.aia (2.1 KB)

@Richael_Mehla you may want to adjust your tutorial.

Tim, the recommended Blocks do not work for me either. To show what is happening, I recommend placing a Button in HA1 that is red and one in HA2 that is blue.

simpleVirtualScreen

I also recommend you change your screen name; what you have is a etiquette Discourse reserved word.

4 Likes

I tried the .aia file and it worked but when i go from screen to screen the sizing is off. I want both virtual screens to take up the entire virtual screen its in. I hope this makes sense.

Set them to Fill Parent.

1 Like

i WILL try it this morning thanks :slight_smile:

so VS's are just one HA set to visible, and all the other HA's set to not visible, and...you can have more than 10 HA's..?

Yes

Yes, but check if you can reuse the same HA by changing its data values and file names, to avoid overloading the Blocks Editor and build processes.

Thanks...will do...