Hi just wondered if someone could offer some tips on using the relative sizing. For my layout I need to use relative sizing and a background images in a column. This has the effect of shrinking the image down dramatically. If someone could tell me which settings I need to adjust and to what within the column to display the background image at its full unaltered size that would be much appreciated.
Hi John ( @badbrains )
I assume your Column’s both Height and Width = Fill Container (default values when you selected Column and placed it into the Screen.
Next, the size of your Image is also important. Since it’s likely you’ll be using a portrait image, 700 x 1200 size has always worked for me even when a different/larger screen device is used. Too small looks pixelated in a larger screen (eg iPad Pro or an Android Tablet). Too large, takes up memory space and may slow down your app.
Then start off with Height | Relative Size and Width | Relative Size = 100%. Also, set the Image’s ResizeMode = Contain or Cover.
Lastly, do Live Test to have a look at the result and fine tune (if necessary) the Relative Size percentages until you’re happy.
Have a look at this (I’ll delete it in a month’s time to reclaim space for my projects). All the best.
https://x.thunkable.com/copy/5e0ec9eb9d74383f5f1efb3380a8de33
2 Likes
2 Likes
Hi Andrew
Thanks for taking the time to reply. The column size I need is relative 20% height in this case.
The problem I’m having is once the background image is set it is extremely small for some reason. When I set the column height at the same size using the absolute sizing the image fits correctly. But I realised that using absolute sizing to feign screen layout will mean that it appears incorrectly in a device different to the one I’m live testing on (I think?) sorry if I was unclear, I need to set the image as background for the column other than placing it as an image element inside the column as I need to be able to lay other elements over the image . Any ideas?
1 Like
Hi John,
-
You’re actually referring to the Screen’s BackgroundPicture.
-
You’re not placing an Image into a Column into a Screen.
-
You need the HeightProperties of the BackgroundPicture set as 20% but the result is that the BackgroundPicture appears extremely small. (But may not be wrong since its size is relative to the physical device screen resolution).
-
When you use pixels (How many pixels?) instead of percentage for the HeightProperties, the resulting BackgroundPicture appears correctly sized in the physical device that you’re currently Live Testing with.
-
However, the intended / target device for your app is actually another physical device (with a different screen resolution). Thus, you suspect it would not turn out correctly for the intended / target device.
If the above points are correct, I believe you already have the solution in No. 4 i.e. to use absolute sizing in pixels if you want your image to always appear the same size.
Let’s say your current Live Test physical device has a screen resolution of 1242 (W) x 2208 (H) pixels and your intended / target physical device has a screen resolution of 640 (W) x 960 (H) pixels … or vice versa.
So, 20% of 2208 = 442 pixels in Height and 20% of 960 = 192 pixels i.e. it will appear shorter (smaller) in your intended / target physical device … and taller (bigger) vice versa.
However, if you use absolute size in pixels; let’s say your BackgroundPicture is 300 (H) x 300 (W), you’re safe because no matter what the user’s physical device screen resolution is, for e.g., from iPhone 4 (3.5", 640 x 960) to iPad Pro 2018 (12.9", 2048 x 2732), your BackgroundPicture will always display 300 x 300. It will also display in an Apple Watch’s screen as 300 x 300.
Of course in an iPad Pro 12.9", with an absolute sized 300 x 300 pixels image, there would be a lot of surrounding empty space on the screen. So, some people prefer to use relative size in percentage for obvious reasons. See below my BackgroundPicture displayed in iPad Pro 12.9" and iPhone6 4.7" with relative size 60% (H) and 90% (W).
Best is to get hold (borrow or buy [investment as an app development tool]) of the intended / target physical device to Live Test.
1 Like
Hi Andrew
Thanks for your help. Up to now I have been always using absolute size but I had a sudden panic that this was going to only display correctly on a screen with the same dimensions as the iPhone 6 s that I use for live testing.
Looks like it is probably best for me to continue with absolute sizing for the time being as I will not be able to achieve the visual results I want otherwise.!thanks 
2 Likes
All the best John and happy creating!
2 Likes