UI form changing on devices

Hello! I’m new to doing UI and I’ve come into a problem. I have square buttons in my game but on some devices like tablets, the buttons form change to a rectangle:

> Average Laptop:

> Samsung Tab A (2015):

I know I have to use something like UIAspectRatioConstraint but I have no idea how to use it…

By the way, I used scale for the sizes of the buttons, not offset.

1 Like

Yeah so if you need them perfectly squared, you’d need an aspect ratio constraint. But since they’re lined up together, you’ll have to make a frame holding all the buttons with a UI list layout or a UI grid layout (UiAspectRatioContraints work with UiGridLayout too)

1 Like

In order to fix this you can use a plugin to convert the size from offset to scale so it fits on every device!

I already said that I used scale, and, I have this plugin…

Then in that case if it’s still messing with the size then your gonna have to use User Input Service to check the if the user is on mobile or not. Then your gonna have to create two separate UIs 1 for mobile 1 for pc. So you can size it induvially for mobile and pc.

Nah the size isn’t the problem, it’s the objects form… It goes from a square to a rectangle but the size is the same

I understand. It’s getting squished.

You need to use UIAspectRatioConstraint objects.

For this you just make the icons’ size x and y offsets the same like 100x100 pixels/studs (the AbsoluteSize) then insert the UIAspectRatioConstraint;
Its default value is 1, keep it 1. The single icon should be the same ratio on all devices.

Yes lol, because if I use size, the screen isn’t square. So if I do something like {1,0};{1,0}, then it’s gonna consider the screen size as 1920x1080 for example and the button will be rectangle.

You can size it induvially for mobile and PC. So you can keep adjusting the size on mobile until it’s a square. And on pc you can keep the original size. Basically creating two separate UIs for mobile and PC

No need for that, you would have to make various GUIs for every single device then?!
It is just a simple object called UIAspectRatioConstraint nothing much

You can do the following:

  1. Set the buttons’ Size to be in Offset for both dimensions with the values you desire (Make sure x, y dimensions are the same).
  2. Insert a UIAspectRatioConstraint object for every button and keep it with its default value (1)
  3. Now you can convert the buttons’ Size into scale using the plugin you mentioned before
  4. Nothing more, you should now have scaled buttons with AspectRatio Constraints

No. You could make one that applies to all mobile devices.

This is inefficient. As I said before, UI Constraints can do the job without any problem.