How to make UI fit all screens

[AstraMiny (astrastinks)]

Hello I made my own player list so I can add some feature’s I wanted

Anyway since I don’t want to handle the scrolling frame’s content size. I use automatic canvas size which only work’s for offset positions. But using offset positions for my UI make’s it all weird and janky on mobile phone’s.

I’m pretty sure using a UIList would fix this problem but I can’t use that because it eliminates a feature I have. (tweening)

Picture of UI properties

Actual Player Icon

Scrolling frame properties

Video

Any help would be appreciated.

[ZacAttackk]

Do use UIList! You can still animate your UI, you just need to set it up a little differently. A lot of perceived UI design problems/limitations regarding size and position can be solved by nesting UI objects into frames or other related classes.

Fixing the Size Problem

@AstraMiny

I use automatic canvas size which only work’s for offset positions. But using offset positions for my UI make’s it all weird and janky on mobile phone’s.

I understand your problem here - using scaled size with a ScrollingFrame can cause the items in the list to grow/shrink when the canvas size changes. You’re using offset size to avoid this, but since mobile screens are much smaller, they appear WAY too big compared to PC.

I suggest you go back to using scaled size, but set the SizeConstraint to RelativeXX. This means that your Frame is sized relative to the width of its parent. In example {1, 0, 0.2, 0} will make the Frame 1/5th the height of its width.

Using UIList + animating
To order things in the UIList like a leaderboard, set the SortOrder to Name. Then, when a player’s score updates, loop through the UI items and set the name to the player’s ranking (use string.char(65 + number) - this turns a number into a keyboard character, starting at A).

I made a simple mockup of what you have - all that’s physically different is that I have put the listed UI items within an invisible “holder” frame. The holder frames are sized {1, 0, 0.2, 0} with XX ratio. The UI inside also has the same ratio and size for this animation.

From there you can tween the Y size of the holder frame to push the items below smoothly, and tween the position of the UI inside the holder frame to ‘sweep in’.

local ts = game:GetService("TweenService")

local item = script.Item:Clone()
item.Parent = list
item.Name = "C"
item.Size = UDim2.new(1,0,0,0)
ts:Create(item, TweenInfo.new(0.65, Enum.EasingStyle.Quad, Enum.EasingDirection.Out), {Size = UDim2.new(1,0,0.2,0)}):Play()
item.UI.Position = UDim2.new(1,0,0,0)
ts:Create(item.UI, TweenInfo.new(1.5, Enum.EasingStyle.Back, Enum.EasingDirection.Out), {Position = UDim2.new(0,0,0,0)}):Play()

[AstraMiny (astrastinks)]

Thanks a bunch.

Never realized how badly I overcomplicated this whole problem.