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
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
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
empty - The stack is resized (not scaled) to fit the screen. (default) This is the existing behavior.
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"
"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"
"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"
"noScale" - The stack is not scaled, but is centered on the screen instead.
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 [email protected] with your stack so we can have a look into this.
Kind regards
Elanor
Philip
Hi everyone,
Is there a difference between MainStack and Substack? On my MainStack it works perfectly but on the following Substack it doesn´t.
Elanor Buchanan
Dear Philip
It should work on substacks. Substacks are separate stacks that are owned by the Main Stack and because the fullScreenMode property is on a stack level you would need to set it on the substacks too. If you are not doing that that might be the problem.
Kind regards
Elanor