LiveCode/RunRev how to adjust stack size according to display size - mobile

Question

i am new livecode app developer and developing a mobile app which needs to be multiresolutional and
fit according to display size. but when i use the image background it displays white space if display stretches beyond image size
is there any facility In RunRev to adjust view size as relative layout in android does.

Answer 1

To set the rect of an image object to the rect of the window, you can use
set the rect of img "Your Image" to the rect of this cd
I'm not sure if this is sufficient. For multiple resolutions, usually I make multiple stacks. You might be able to do this:
set the rect of this stack to the screenRect
set the rect of img "Your Image" to the rect of this cd
Let me know if this solves the problem.

Answer 2

There's a few issues to consider here.
orientation
aspect ration
pixel density
Plan A
To handle all three of these cases with one image I would suggest a square image. Make it twice the size you need for a medium density device in the size you want to support then import it into LiveCode. Set the resizeQuality to "good" (if you set it to "best" it might be a little slow) then set the lockLoc of it to true. Now divide the width and height by 2 so you end up with an image that is displayed at half it's size. This will keep the quality reasonable on a high res display. Remember to keep anything important centered on the image because the top and sides will be cut off depending on the orientation and aspect ratio.
Next step is a resizeStack script to ensure the image is resized proportionally (this script assumes the image is square):
on resizeStack
lock screen
if the height of this card > the width of this card then
set the width of image "background" to the height of this card
set the height of image "background" to the height of this card
else
set the width of image "background" to the width of this card
set the height of image "background" to the width of this card
end if
set the loc of image "background" to the loc of this card
end resizeStack
Plan B
Use a repeating pattern and set the backPattern of the stack. Much lower memory use, however, much less flexible in terms of the type of background you can use.

Answer 3

When resizing fields or buttons don't forget to also change the textSize in your resizeStack handler as well.
Scaled:
put "1.25" into pScaleFactor
set the textSize of field "your field" to round(the textSize of field "your field" * pScaleFactor)
set the textHeight of field "your field" to round(the textHeight of field "your field" * pScaleFactor)
or
Exact:
if the height of this card > 640 then
set the textSize of field "your field" to "24"
set the textHeight of field "your field" to "26"
end if