Responsive Design: Drag a Canvas larger than screen size

Mar 18, 2018 karen's Blog

This is a guest blog by MIT Master Trainer Emile Wong

One day, when I put the keywords Responsive design in App Inventor in a web search, Google returned a page from MIT, other App Inventor Features references. The page suggested some important rules and common approaches to responsive design. The article also included a hyperlink to a forum post with an example which demonstrated that a Canvas could be dragged. The post provides a project aia file for download. I tried the downloaded project, and would like to share the mechanism behind it with others here. I created a simplified and modified application based on the downloaded project and explain it here.

Running the application

When the application runs, the screen is initialized, and a picture is displayed on the screen as in figure 1.
Figure 1 Initial screen
When the user touches the screen, a popup notification will be shown, and users have options by clicking the appropriate buttons as in figure 2.
Figure 2 When the screen is touched
When the user clicks on the Zoom In button, the picture will be enlarged 2 times its original size in both width and height. The picture will display only the center part of the picture as in figure 3.
Figure 3 Display the picture 2 times larger
The user can drag anywhere on the screen to view different parts of the picture as figure 4 and 5.
Figure 4 Dragged to the top left corner
Figure 5 Dragged to the bottom right corner
When the user clicks on the Help button in figure 2, a notification shows the instructions.
Figure 6 Show instructions

Design Overview

Figure 7 shows the outline of the Components used in the project
In the Designer, add the following components into the Viewer. On Screen1, change the default settings of the following properties.
Figure 8 Sizing properties of Screen Component
Upload a picture to Media as the applications asset which will be packaged with the application as in figure 9.
Figure 9 Upload a picture to display

Blocks Overview

Figure 10 Define the global parameters and prepare the initialization of the screen when app first runs

Global Parameters


Figure 11 Procedure ZoomIn
Figure 12 Procedure Help

Events and Actions

Figure 13 when PictureCanvas is touched, an event will occur
Figure 14 After an option button is clicked by the user, it will call the related procedure
Figure 15 Event for dragging the picture

How the application works?

When the application is initialized, the application creates a virtual working area that is 3 times larger than the actual device screen size. It uses a vertical arrangement as a Y_Controller, and a horizontal arrangement as an X_Controller. The canvas size will be the same as the screen size. It will be displayed at the center of the working area as in figure 16. The Canvas background is set to the picture name you want to display.
Figure 16 Initial screen layout
When the user chooses to zoom in the picture, the canvas width and height will be set to 2 times the screen size. The screen is not enough to display the whole picture. It can only display the center area of the enlarged picture. By adjusting the height of Y_Controller and the width of the X_Controller, the controllers can move the canvas around the working area. The application gets the start position and the current position when the user drags on the screen. The related dragged distance will be added or subtracted from Y_Controller and X_Controller as in figure 17.
Figure 17 The layout when zoomed in


The application demonstrates that Canvas and Arrangement components of App Inventor can be set to larger than the screen size. By controlling a virtual spacer on a virtual working area, the application can manipulate a canvas and the canvas can be dragged. By applying responsive design in the project, an application can be creative. Please also note that I can only run this application on a device and emulator with Android 8.0 Oreo, and I tested the app on a Android 7.0 emulator and an Android 4.4 device, but it does not work.