|   FORUM      |     Tutoriales    |     KIO4 |      
   Start B4A (Basic4Android) App inventor 2 Arduino
   Elastix - VoIP Things of Windows Interesting Webs  Telecomunications

 


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

App Inventor 2
Programming mobi
le 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.

__________________________________

 

- My e-mail:
juana1991@yahoo.com
- Who I am. - Cookies. Texts and images propierty autor:
© Juan A. Villalpando
Not copy texts neither images.
We use our own cookies and third-party cookies on our websites to maintain the session and your preferences, customize your user experience and obtain website use statistics.
Si continúa navegando consideramos que acepta su uso. OK    Más información