How do I support different device screen densities?

Background

Modern mobile devices come in a variety of screen densities which is measured in the number of pixels that are packed into in an inch of the screen (PPI). The purpose of the higher density screen in to provide a crisper picture rather than more screen real estate. The iPad and iPad Retina are a good example of this. Apps look exactly the same on both devices, except on the iPad Retina, the app looks crisper and more pleasing for the user.

Most OSs now support multiple pixel densities, with there being a "natural density" and a notion of Hi-DPI.

For iOS, the screen is either retina or non-retina. The natural density is the non-retina resolutions. Retina screens are considered to be 2x the density of non-retina.

For Android, screens usually fall in to one of four density categories - low (0.75x), medium (1x), high (1.5x), extra-high (2x). Medium is considered to be the natural density. Some devices have a "TV" screen density, at 1.33x scale.

How LiveCode Solves this for you

In LiveCode 6.5 and above there are a number of features that are designed to help you support all these densities in your app.

  1. Density Scaling: You can now write your app at natural density and LiveCode will automatically scale everything up or down to meet the device density. For example, you can create an iPad app at the natural ipad density (1024x768) and LiveCode will do all the work to scale your app for the retina device. This feature is enabled by default.
  2. Density Mapped Images: LiveCode can scale most controls perfectly, such as graphics, text, players, buttons, scrollbar, etc. However, images have to be resampled whenever they are scaled up or down leading to loss of quality, especially when upscaling. To ensure that the images look sharp and crisp not matter the device your app is on we recommend including images to suit the densities of the devices you are targeting. LiveCode will automatically choose the image that best suits the device your app is running on.
  3. DeviceResolution: For those who wish to access every pixel available on HI-DPI devices they can do so using the deviceResolution property.

This article is focused specifically on how to support multiple screen densities. If you are looking to scale your app to fit the target device then please visit the article: How do I make my app scale to fit the screen on all devices?

Density Scaling

Density scaling is enabled by default for all apps build with LiveCode 6.5 and above. Simple create a stack at the screen resolution of the natural density of your target device and it will run on the low and high density versions of the device automatically.

For example:

To create an iPad app, create a stack that is 1024x768. It will automatically be scaled to 2048x1536 when running on an iPad with a retina screen.

To create an iPhone app, create a stack that is 480x320. It will automatically be scaled to 960x640 when running on an iPhone with a retina screen.

To create an Android app, create a stack at the natural density of the target device. It will automatically be scaled up to to the density of the screen of the device.

Density Mapped Images

LiveCode by default will seek high/low resolution version of images within your application. To take advantage of this feature you must:

  1. Used referenced images: LiveCode will only automatically seek high/low resolution versions of images for referenced images. By that we mean images whose filename property is pointing to a local image.
  2. Include multiple image files in the some location as the referenced image: LiveCode will search for low/high resolution images next to the referenced images.
  3. Name your images correctly: LiveCode will seek images based on their filename. The name convention is detailed below.

Image naming convention

  • <image>@ultra-low.<ext> - 0.25x
  • <image>@extra-low.<ext> - 0.5x
  • <image>@low.<ext> - 0.75x
  • <image>@medium.<ext> / <image>.<ext> - 1x
  • <image>@high.<ext> - 1.5x
  • <image>@extra-high.<ext> / <image>@2x - 2x
  • <image>@ultra-high.<ext> - 4x

Example

Take for example a simple iPad application with a large background image. The structure of the app might look something like this:

app.livecode

images/background.png - This image is 1024x768 pixels

images/[email protected] - This image is 2048x1536 pixels

The application would contain an image object with the filename set to "images/background.png". When run on a retina iPad, which has a screen density of 2, LiveCode would automatically substitute in the "@extra-high" version of the image, which is twice the density of the standard image.

Device Resolution

In the rare case that you wish to use all the pixels of the target device to layout your app, you can do by setting the 'useDeviceResolution' of the stack to true. This will override all the automatic scaling performed by LiveCode.

For example. With the default settings enable. LiveCode will report the screen size at it's natural device density, regardless of the actual device density. For example:

  • An iPad will report the screen height to be 1024
  • An iPad with retina screen will report the screen height to be 1024

However, if the 'useDeviceResolution' has been set to true for the same stack, the true pixel height of the stack will be reported:

  • An iPad will report the screen height to be 1024
  • An iPad with retina screen will report the screen height to be 2048

5 Comments

DRJ-UK

There is an error in the directory names in illustrative iPad example above - they should be named the same. The directory should be the same, either:

images/background.png (1024x768)
images/[email protected] (2048x1536)

or

image/background.png (1024x768)
image/[email protected] (2048x1536)

Fabricio Rocha

Why isn't this page directly shown in the index page for "How To - LiveCode Mobile Tasks"? I almost got crazy thinking "I am pretty sure I've read something about this here"! :)

Elanor Buchanan

Hi Fabricio, thanks for your comment. I have added this lesson to the Mobile Tasks section as well.

Kind regards

Elanor

Charles Szasz

How does the Hi-DP setting in LC affect desktop apps? I had one of my users try my Windows app with LC 6.1.3 and a higher version of LC that has the Hi-DP checkbox checked. The user reported no difference in viewing and using the apps!

Elanor Buchanan

Hi Charles,

The Hi-DPI setting allows you to control whether stack are automatically scaled to match the system display. This option was added to the Standalone Application Settings in version 6.7.0.

https://quality.livecode.com/show_bug.cgi?id=13118

Could you email [email protected] with screenshots of the 2 apps, the versions they were built with and the version of Windows they are running on and we can look into it?

Density mapped images should work on desktop platforms so if you use images in your stack, and you are not already doing so, this is worthwhile.

Kind regards

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.