How do i make this kind of overhead rank with icons?

hey guyss
does anyone know how to make an overhead rank like this one?

i already made one with text labels, but i’m planning to add icons like the one

i’m just not sure which ui elements i should use to achieve those
i literally have no idea how to arrange them properly

any help or tips would be appreciated!!

2 Likes

arrange them using horizontal UIListLayout inside a frame above the text labels (or anywhere you want) and enable the frame’s AutomaticSize on the X axis

also i see there’s a verified badge on the example screenshot and you can do that using Unicode characters

3 Likes

hii i appreciite it however i dont get it since im still new to this :sob: but this is the setup that i made, i dont know how can i add them :sob:

I would add a new frame under your frame put a new listlayout and add an imagelabel/ textlabel to it so everytime you add an icon it automatically gets put in the right position.

For the ListLayout set the fill direction to horizontal and the horizontal and vertical alignment to center:
https://create.roblox.com/docs/reference/engine/classes/UIListLayout
https://create.roblox.com/docs/ui/list-flex-layouts

2 Likes

Add another frame in that frame, resize the frame to being horizontal or however you want it, add the UIListLayout in it,

change the Layout direction or whatever it’s called to Horizontal.

then add imagelabels in it set the size to 1,0,1,0 and constraint to RelativeYY

2 Likes

it works!! the only problem that im encountering is the sizes of these frames and the billboard gui, i dont get them as well :sob: im so badd at it aaaaa i hpe u can help this one too :sob: im asking too muchhhh

what do you want to achieve? same like the pic you attached?

2 Likes

yes plsss, like this


but all the sizes i made from the frames, billboard gui is so random, it bothers me :sob: its not in align, i just did it whenever the text already shows :sob:

in the size of billboard gui you should only change the Scale value and not the Offset.

and make the background transparency of image and frame to 1. otherwise your billboard gui looks good and alligned for me, or if theres anything i missed in the picture you sent me pls point it out

2 Likes

ill let you know ^^ if only you know how haappyy i am that im finally making m own overhead ranks!! :sob: i rlly rllyy appreciiiite ur helps!!

2 Likes

np your welcome. Have a good developing day

2 Likes

nice work
keep up the good job!
good luck with your classes lol