As you can see it’s not perfect yet.
Now let’s look into the TextButton’s properties
TextBounds? What’s that?
TextBounds is the width and the height of the text.
Here is a line with a length 36 pixels (the first number in text bounds)
How is that relevant?
Since we want to put the icon on the left side of the text.
We can use the TextBounds to get our desired position for the icon The Middle of Text - Half the width of the Text = Left side of the Text
Therefore we need to put our icon 18 px to the left of the middle of the text
The AnchorPoint is set to 1, 0.5 because if we used 0.5, 0.5 it would give us this at the end
As @RuizuKun_Dev said, yes. The UIListLayout instance can get the job done in a technical way. When using instances of different sizes, it may mess up the arrangement. Though the image will be beside the label, it won’t be beside the “actual text” which is the main point of the post. So, your method will mostly get 10-15% of the work done.
Before replying, always think why the OP didn’t choose the easier method. Is it because he doesn’t know? Is it because it’s complicated? Is it because that method won’t get it done?
So, please before telling something to somebody, be 100% sure about your answer and then reply.
But then you were not smart enough to use a root instance like a frame, a Textlabel under this frame with automatic size on x+y + size on 0,0,0,0
Then the icon with the size you want
Put the UiListLayout index type on “Name”
Rename the icon “0_icon”
And the Textlabel “1_icon”
Your method is correct as well. But, in your method a root is required for this process. Where in his process, he got it done with just the label and the icon.
I’m not trying to be rude or anything, but just saying since the OP showed us the easiest possible solution he had, I’m being as honest as possible. Though, your process is a bit more easier than his, the root instances later on may cause lag on (potato-styled) low-end devices.
Yes it also works, i have also used ListLayout (months ago) do the exact same thing except it triggers me to use an container frame, because it feels unnecessary when i use my tutorial.
If you think about it…
You can see that adding a Frame, TextLabel, ImageLabel and ListLayout while also setting automaticSize and the 3 properties of the ListLayout that needs to be changed (CellPadding, HorizontalAlignement, FillDirection and IndexType) might be a lot steps.
In contrast to your method, mine requires fewer steps…
Add a textLabel and a ImageLabel, set the AnchorPoint of the Image to 1, 0.5 and set the position to {0.5, 0, 0.5, 0} and finally setting The X Offset of the Position to -(padding+(textBounds))
It might seems “overcomplicated” but the only the hard thing here is the math really.
I now use UI Frameworks (Eon releasing soon), it’s better and easier to do this method in UI Frameworks. You can even achieve the AutomaticSizing Behaviour using TextService:GetBoundsAsync
Lastly, what if you want to add something else (as an example to the right side of Frame)? The Frame has ListLayout and the behaviour applies to all the children of Frame, You can’t insert it on the TextLabel because it doesn’t covers the whole frame and if it did the icon would be off.
I am not forcing you to use my method or anything, do whatever you want, it’s your choice.