{"id":836,"date":"2015-08-17T21:23:23","date_gmt":"2015-08-18T04:23:23","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=836"},"modified":"2015-08-17T21:23:23","modified_gmt":"2015-08-18T04:23:23","slug":"example-of-the-new-app-inventor-responsive-design-feature","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2015\/08\/17\/example-of-the-new-app-inventor-responsive-design-feature\/","title":{"rendered":"Example of the new App Inventor “Responsive Design” Feature"},"content":{"rendered":"

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.<\/p>\n

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<\/a>, passed to us by reader David – thanks!<\/em><\/p>\n

<\/p>\n

How This Works<\/h2>\n

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:<\/p>\n

\"Screenshot_2015-08-17-20-42-18\"<\/a><\/p>\n

 <\/p>\n

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:<\/p>\n

 <\/p>\n

\"Screenshot_2015-08-17-20-41-06\"<\/a><\/p>\n

 <\/p>\n

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:<\/p>\n

\"Screenshot_2015-08-17-20-36-06\"<\/a><\/p>\n

 <\/p>\n

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:<\/p>\n

\"Screenshot_2015-08-17-20-44-06\"<\/a><\/p>\n

 <\/p>\n

Setting the Height and Width Properties<\/h2>\n

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

\"RDProperties\"<\/a><\/p>\n

 <\/p>\n

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

\"BlocksCode\"<\/a><\/p>\n

 <\/p>\n

Which produces this funny result when button 2 is pressed:<\/p>\n

\"Screenshot_2015-08-17-20-57-48\"<\/a><\/p>\n

 <\/p>\n

You could probably make a game based on control sizes \ud83d\ude42 Controls could grow bigger and smaller as you attempt to tap on each button!<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Continue reading Example of the new App Inventor “Responsive Design” Feature<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[21,22,28,31,63,65,151,157,176],"class_list":["post-836","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method","tag-app","tag-app-inventor","tag-appinventor","tag-apps","tag-components","tag-controls","tag-programming","tag-responsive-design","tag-software"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=836"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/836\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}