How to make Ui shrink with the screen size?

Help and Feedback Art Design Support
, ,
#1

Hello :wave:,

i want to make the left Ui at the left side of the screen (surrounded in Red Box) shirnk with the screen size of the screen (Like the ui at the right side of the screen) :

image
image1370Ă—989 36.7 KB

It kinda shrinks but not fully. It can still get out of the screen. (look at the difference between the left ui and the right ui in the video)

Here is the file:
Ui-Help.rbxm (10.8 KB)

Thank you for your help :happy3:.

#2

You can use UIAspectRatioConstraints to enforce a size ratio in all devices. You can place it under the first child of the ScreenGui since its children automatically get set to the right size (DISCLAIMER: IM NOT SURE ABOUT THIS INFORMATION). If your frame has a UITableLayout, it will override that element.

You can also use UITextSizeConstraints on texts to limit font sizes in case you need so.

#3

So basically what you’d want to do is similar to what we had accomplished with the rest of the UI in the previous post, allowing for certain objects to dynamically shrink/grow with the rest of the frame.

To start off with we’ve already got our UIFlex inside of “leftContent” that’s basically allowing us to keep the X at a steady 300 Pixels while the “rightContent” takes up the remainder of the space.

What your wanting to do in this case is keep the content in the X at a steady scale while filling the remainder of the space with the scroll content.

image
image331Ă—1130 10.2 KB

In order to do that you’d want to separate the content into two sections, the steady portion and the dynamic. The steady is going to be your content at the top the empty frame and your title while the dynamic parts will be your scrollframe.

So this would be before just as reference

image

To get started with updating it you’d want to create a new frame inside of “leftContent” you can call it whatever but in this case we’ll call them “topContent” then you can rename the frame with the scrollingFrame “bottomContent” or leave it as whatever.

Next put your “title” and the frame above “title” into “topContent”

You should have something that looks like this now

(make sure to hide the background of topContent since its just a holder frame)
image

Now to get into the actual scaling of everything add a UIListLayout into “leftContent” and you’ll see some changes going on with the UI but trust the process.

Were now going to update the properties of the UIListLayout

We are setting the offset padding to 6 Pixels since we want the title and the scrollframe to appear as one.

Padding: (0, 6)

HorizontalFlex: Fill

VerticalFlex: Fill

After you’ve applied these properties you’ll see the bottomFrame is now properly maxing out at the bottom so lets take our focus back towards the topContent to fix some of the issues there.

Inside the topContent add a UIFlexItem this will do what we’ve got inside of “leftContent” where it constricts the size of it so we have control over it.

Update the “topContent” size to {1, 0},{0, 150} and if you scroll up in the properties tab the “AbsoluteSize” should be (300, 150)

Once you’ve gotten that done add another UIListLayout into the “topContent” with these properties again

We are setting the offset padding to 12 Pixels, this is the default we’ve set for the other ones as well.

Padding: (0, 12)

HorizontalFlex: Fill

VerticalFlex: Fill

Once you’ve got all that setup you can add a final UIFlexItem into the “Title” TextLabel to allow for us to control its size.

I’ve also updated the size of the “title” to {1, 0},{0, 30}

image

image
image1822Ă—1158 14.9 KB

SettingsMenu.rbxm (10.9 KB)

1 Like
#4

bro wrote a chapter that will last till tomorrow. TYSM FOR YOUR DETAILED EXPLANATION!!! :happy4:

You earned a follower. :happy3:

1 Like