App Inventor 2
Programming mobile phones with Android
by App Inventor 2 - Juan Antonio Villalpando
- Initiation Tutorial App Inventor 2 -
Return to tutorial index
____________________________
53.- Resizing of screen components. Responsive design.
ip53_resize
- Presentation.
- We may find that we have an arrangement of elements (label, buttons, images, ...) in a small mobile perfectly located in our application, but to bring this application to a larger Tablet these items look very small or located at unwanted sites.
- We can make the items have some proportional to the screen size, as a mobile or a Tablet of larger or smaller.
- This can be done by taking the value of the width of the device (mobile or tablet) and creating all elements in proportion to the width. For example the height of a picture is 20% of screen height, or the High a button is 10% of screen height ... so the dimensions of the elements will be referenced to the width screen.
- Let's make an example code on this matter.
_________________
Design
_________________
Blocks
- The elements have a proportional to the screen dimensions.
- When the display is started, the two variables take the dimensions of this, then the elements are dimensioned in proportion to the size of the screen.
- The proportions are performed by a multiplication, the decimal separator is the point, for example 0.5, would be 50%.
- It is a bit tedious and not always successful way, but we can work with.
________________________
Responsive design
In August 2015 (nb145), App inventor adds "Responsive design" is something like what we have just seen, ie the elements are adapted proportionally to the size of the screen.
Both part of Design as part of blocks, we can use this possibility, a percentage of the screen size is set.
To use the classic method or the new Responsive, let the Properties Screen and part of Sizing chose Responsive , as shown in the following image.
One of the limitations of this resource is not functioning properly with Canvas and sprites.
Documentation.
__________________________________
|