Hello! I have a quick question about UI design. There may be a simple answer to this (I don’t design UIs much).
I am working on a sidebar in my game, and these icons look stretched on different devices. I’ve been using the emulator to test it out.
Before any of you ask, I am using scale to position and size the icons, I am not using offset.
Laptop
Phone
Tablet
Console
As you can see, it looks stretched on different devices. How should I fix this?
You could add a UIAspectRatioConstraint to the buttons.
1 Like
Here, you should use offset, or, if the icons are square, utilize UIAspectRatioConstraint.
You can also try making a frame to encase all of the UI’s, then use UI grid layout with a UIAspectRatioConstraint as a child to the grid layout, so you wouldn’t have to put a constraint in every icon, it will also solve some spacing issues that you might have when just using UIAspectRatioConstraint in each icon individually.
Many UI Designers face this problem, use a UIAspectRatioConstraint, and mess around with the property AspectRatio
in order to prevent the icons from being stretched out on different devices.