Help me with fit UI to all devices perfectly and keeping borders!

Hello there, fellow developers. I need some help with scaling UIs. I need help to keep the UIs Aspect Constraint and keeping the UI’s border visible (I use UISizeConstraint to prevent it from scaling too small and I used UIBorder and UIStroke.)

The UI’s Properties:

The UISizeConstraint’s Properties:
image

Before (In my current device):

After (In Device Emulation):


As you can see, the UI is too big and the border is not visible.

Any help will be appreciated.

Try using a plugin to fit your UI to all devices.

Already use AutoScale to keep its Aspect Ratio but it shrinks to a very small size (I didn’t use UISizeConstraint) and the position changed while keeping its Aspect Ratio.

Convert to scale position and size using the same plugin.

Already. (3000 characteeeeeeerssa )

It looks like you didn’t added UIAspectRatioConstraint to the black frame.

Tried it but the position changed so I removed it.

I dont know how can it change position, but without it you are unable to keep aspect ratio. You’re 100% doing something wrong. Check if frame’s position is set to {0.5, 0, 0.5, 0} and anchor point to 0.5, 0.5

The position of the UI is 0.287, 0, 0.035, 0. The Anchor point is 0,0.

Then set them to right values.

What are the right values? (3000 charrrrrs)

Position = 0.5, 0, 0.5, 0
AnchorPoint = 0.5, 0.5

1 Like

Thank you so much for the reply it worked. Last question, what values do I need to apply on Anchor Point and Position if I want the UI Position to the Middle Left.

Like this:
image

Position = 0, 0, 0.5, 0
AnchorPoint = 0, 0.5

So both Position and AnchorPoint need to be the same to fix the issue?

You need to understand what is Position and AnchorPoint or you will always get the same issue.
Look on DevHub.

Oh I see. Thank you so much for the reply

1 Like