MIT App Inventor introduced today their new “responsive design” features so that apps can work “better” on different sized screens. Using these new features, you can create a single app that should run on both a smart phone and a tablet, yet still display proportional user interface controls. Prior to this, your nicely designed smart phone app could end up having very small buttons or text boxes when run on a tablet; now, these components will resize as needed.

The name “responsive” comes from the ability of the app to “respond” to the size of the device and to change the size of controls so they maintain a similar size on each device. The terminology “responsive web design” also refers to web sites that are designed to work with different sized mobile device screens – here is a link to a great article about responsive web site design, passed to us by reader David – thanks!

How This Works

Here is a screen with 2 buttons and 1 text box. Each component has its vertical and horizontal width set to “Automatic”. This is a screen shot from an app running on a Nexus 7 tablet:

 

We can change the button properties to specify a width in percent, rather than automatic or a “Fixed” (one size only). Here, button 1 is changed to a 30% width and button 2 is changed to a 50% width – note how the 50% sized button uses up half the screen width:

 

 

Here is the same app running on a Nexus 5 smart phone – note that the relative sizes of the buttons are the same on the smart phone as they were on the Nexus 7 tablet above:

 

Both the height and width may be set as a percentage – in this example, the width of button 1 has been set to 75% and the height has been set to 15%, creating a taller button than the normal button size:

 

Setting the Height and Width Properties

Select a control and then refer to the Height and Width properties for the component. In this example, the width is set to 50% of the parent (which could be a vertical or horizontal layout):

 

These properties may also be set programmatically. For example, this blocks code changes the size of a button while the app is running!

 

Which produces this funny result when button 2 is pressed:

 

You could probably make a game based on control sizes 🙂 Controls could grow bigger and smaller as you attempt to tap on each button!