LiveCode LessonsHow To - LiveCode Mobile Tasks LiveCode Mobile TasksHow do I make my app scale to fit the screen on all devices?

How do I make my app scale to fit the screen on all devices?

In this lesson we'll look at how to make your app fullscreen on all devices it runs on. There are two main approaches to this:

1) Let LiveCode scale your final stack using the fullscreenmode property introduced in LiveCode 6.5.

2) Scale everything on your stack manually.

This lesson will focus on option 1. There is a lesson dedicated to resizing all the assets of a stack to fit the device here.

The fullscreenmode property was added in LiveCode 6.5. When set on the stack, it will scale all the controls of a stack to fit the device based on the fullscreenmode setting you've used. The aim of this feature is to make it quick and easy to develop an app and have LiveCode scale it to the fit the target device. This feature will work for any stack and all objects.

Create a new stack and add some controls

Create a new stack and add some controls

This new stack contains:

1) An image

2) A round graphic

3) A label with text

4) A background rectangle graphic with a gradient and border set

I've also made our stack an non standard aspect ratio (square) to exaggerate the effect of the fullscreenmode mode.

To make the most of this feature we would recommend creating a stack with an aspect ratio similar to that of the devices you plan to target. Somewhere between 4:3 and 16:9 would so your device scale well on most devices.

Setup the fullscreenmode property for this stack

In the stack script add the following code:

on preOpenStack

set the fullscreenmode of me to "exactFit"

end preOpenStack

NOTE: 'of me' refers to the object that owns the script. In this case, we are working in the stack script, so 'me' resolves to the stack. The fullscreenmode is a property of the stack.

Setup your stack to run on a device or simulator

Setup your stack to run on a device or simulator

For the purposes of this lesson, I'm using the iPhone simulator.

Notice I've set this stack up to run on both iPhone and iPad and hidden the status bar so that we can see the full effect of the fullscreenmode property.

The following screenshots show the effect of:

1) No fullscreenmode

2) fullscreenmode set to "exactFit"

3) fullscreenmode set to "letterbox"

4) fullscreenmode set to "noBorder"

5) fullscreenmode set to "noScale"

Each scale mode is useful in different circumstances.

fullscreenmode set to empty

fullscreenmode set to empty

empty - The stack is resized (not scaled) to fit the screen. (default) This is the existing behavior.

fullscreenmode set to "exactFit"

fullscreenmode set to "exactFit"

"exactFit" - Scale the stack to fill the screen. This stretches the stack if the aspect ratio of the screen does not match that of the stack.

fullscreenmode set to "letterbox"

fullscreenmode set to "letterbox"

"letterbox" - Scale the stack, preserving the aspect ratio, so all content is visible. Some blank space may remain if the screen and stack aspect ratios do not match.

fullscreenmode set to "noBorder"

fullscreenmode set to "noBorder"

"noBorder" - Scale the stack to fill the screen, preserving the aspect ratio. If the stack and screen aspect ratios do not match, the left / right or top / bottom extremes of the stack are not visible.

fullscreenmode set to "noScale"

fullscreenmode set to "noScale"

"noScale" - The stack is not scaled, but is centered on the screen instead.

4 Comments

Yan Carlos Marín Osorio

I'm trying to get my application to the size of any mobile device, I'm using the following code but does not work, if I put it on a device with smaller or larger size patanlla stack, the stack never takes the size of the device .

on preOpenStack
    environment if () = "mobile" then
       September the fullscreenmode of me to "exactFit"
       September the acceleratedrendering of me to true
    end if
end preOpenStack

Could you tell me what is wrong or how I should do? thank you very much

Elanor Buchanan

Hi

The line of code you have doing the check is not quite right, try

on preOpenStack
if the environment is "mobile" then
set the fullscreenmode of me to "exactFit"
set the acceleratedrendering of me to true
end if
end preOpenStack

Kind regards

Elanor

Susan Nguyen

'Set the fullscreenmode to "letterBox" 'works like a charm on my landscape cards for iPhone when they need to be resized for iPhone 6, but not at all for the portrait cards, including the opening card. Am I missing something?

Elanor Buchanan

Hi Susan

It should work for all cards, does it not do anything for the portrait cards or do they just look wrong? It might be easier to email support@livecode.com with your stack so we can have a look into this.

Kind regards

Elanor

Add your comment

E-Mail me when someone replies to this comment