How can I make the size of a UI stay the same for all devices?
It looks like this now:
I would recommend using the Scale attribute of the Size property of your container along with SizeConstraint set to RelativeYY. This means that both scale values will respect the height of the parent container. On the first screenshot, it looks like you would want to set your size to about 0.2, 0, 0.2, 0.
The 0.2s both mean that you want the component to be 20% the size of the parent container on the respective axes (the first one is X, second is Y). Using the SizeConstraint property is typically more performance-friendly, although you can also use UIAspectRatioConstraint.
If you add a UIAspectRatioConstraint as a child to your component, set the following properties:
- DominantAxis = Height
- AspectRatio = 1 (since it’s a square)
- AspectType = ScaleWithParentSize
You can then set the Size property of your component to 0, 0, 0.2, 0 and the UIAspectRatioConstraint will force your component to have a width proportional to its height. The height is then multiplied by the aspect ratio (which in this case is 1 so the height remains unchanged)
Let me know if you have any more questions! UI scaling can be confusing sometimes.
EDIT: I made a few errors in writing this but I’ve corrected them. I haven’t used the SizeConstraint property very much but writing this actually taught me a couple things.
8 Likes