How do you handle different screen resolutions in mobile apps

[Richard Gaskin]

Matthias Rebbe wrote:

 > Especially on Android, where so many devices with so many screen
 > resolutions are available, how do you handle all these resolutions in
 > your mobile apps?


This is the central question all developers have, whether making native 
or web apps, ever since mobile platforms were first popularized nearly a 
decade ago.

We're not alone.  Far from it.  EVERYONE has this question.

So how do they handle it?

Web designers generically refer to it as "responsive design", as in 
responding to whatever screen dimensions or orientation the user may 
have at the moment.

In web development, the common method is to make at least two layouts 
based on a maximum screen width, where one is for full-sized screens and 
the other is for handheld devices: e.g., if less than 600px the layout 
is slimmed down and elements placed differently to fit comfortably on 
screen.  Depending on the layout and features, a web developer may use 
other screen widths to determine layout specifics for in-between devices 
like "phablets", or for different orientations if the nature of the app 
requires doing something more than flowing content downward.


In web development, layout is governed by properties set via CSS, and 
are triggered automatically with page rendering.

In LC, layout is governed by setting properties via LiveCode Script, and 
are triggered on a resizeStack handler.


So the good news is: none of this is much different from what we've been 
doing for decades with resizable windows.  If you're comfortable moving 
and resizing controls for normal resizable windows on the desktop, you 
have the background needed to do the same to accommodate any window 
size, including the small single-window layouts of mobile.


It gets even better: in the very early days of LiveCode for mobile, we 
had to think about pixel density and work that into our scripts, greatly 
complicating the arithmetic.  But many years ago the core team did an 
excellent job of liberating us from the many different pixel densities 
available on mobile platforms.  Now, LC's resolution independence 
automatically accounts for the device's pixel density, allowing us to 
write our control placement scripts once using logical pixels, and LC 
does the work with the OS to translate that into physical pixels 
automatically.


So in short, look at your UI, determine which controls may need to be 
resized or moved, and put that code into a resizeStack handler.

And since resizeStack is among the messages available on the desktop as 
well, you can test your layout code easily as you go, right in the IDE.


Moving and resizing controls is usually not the hard task for any LC 
scripter familiar with LC basics.  The harder task can be deciding which 
controls need adjusting, and how.

For that, look at the apps on your phone.  Switch orientation, noting 
which controls are resized, which are moved, etc.

Then use the LC Script you already know to do that with your controls in 
your app.



Example
-------

Consider a very common UI we've all seen, a message form:

   --------------------------------------------------------
   |   -------------------------------------------------- |
   |   | field "To"                                     | |
   |   -------------------------------------------------- |
   |   -------------------------------------------------- |
   |   | field "Body"                                   | |
   |   |                                                | |
   |   |                                                | |
   |   |                                                | |
   |   |                                                | |
   |   -------------------------------------------------- |
   |                                         -----------  |
   |                                         |   Send  |  |
   |                                         -----------  |
   --------------------------------------------------------


To adjust those controls for all practical sizes snd orientations on 
every desktop and mobile platform LC supports:

on resizeStack x,y
    set the rect of fld "To" to 20,10,x-20,40
    set the rect of fld "Body" to 20, the bottom of fld "To", \
        x-20, y- 50
    set the bottomRight of btn "Send" to x-10,y-10
end resizeStack


--
  Richard Gaskin
  Fourth World Systems
  Software Design and Development for the Desktop, Mobile, and the Web
  ____________________________________________________________________
  Ambassador at FourthWorld.com                http://www.FourthWorld.com