Why does this still look stretched on different devices?

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.