MetroMail Responsive Email Template
icon 2    November 29th,2013
main image
How to Support Different Screen Densities

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 is 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 here.

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.<ex> - 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


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



images/background.png (1024x768)

image/background@extra-high.png (2048x1536)


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

About The Author


Ben Beaumont is Product Manager for RunRev Ltd.

section image
LiveCode 6.5 Ships
Resolution Independence means LiveCode takes care of scaling
read more
section image
Friday: It's Not Black
Find a good deal this Friday without suffering in the crush
read more
section image
Make My App Scale
How to make your app fullscreen on all devices it runs on
read more
section image
Screen Densities
Learn how to effortlessly support differing screen densities
read more
You Stay Classy San Diego
In less than 12 months time we will be in San Diego and we are very excited to get there. We hope you will join us there, check out for more
Featured Extensions
section image
Externals for iOS: barcode reading, recording video, document interaction, twitter, MapKit, action sheet, contextual menu and more
read more
section image
Animation Engine
Movement any-which-way you want it . Animation Engine offers you functions and handlers to move objects, exactly as you desire.
read more
Connect With Us
RunRev © Copyright 2013 . All Rights Reserved
RunRev © Copyright 2013 . All Rights Reserved