How to integreate this UI panel into Unity in the most "pro" way?

[szlekjacob]

Hello there

I’m working on a game and have to integreate this rewards panel into Unity, so it’s responsive and auto-adjusting:

The way that it’s supposed to work is that each reward might get disabled, and the rest auto-adjusts to the center. And my question is: what is the best way to achieve the most professional and cleanest result in such a case?

They way I’ve approached it is that I’ve created a holder of all the rewards and added Horizontal Layout Group and Content Size Fitter to it.

Here is my hierarchy:

The rewards themselves have Vertical Layout Group for holding smaller text such as “Cash”, etc. always in the center of the number above it:

The plus signs have Layout Element added to them to force custom spacing:

And ok, I kinda did it:

But… The moment I change the values for sth bigger, this is what happens:

And this is where I’m not sure that this is “professional”. I don’t know how to tackle this issue. How can I make it stay within the popup, but still keep the proportions of everything (sizes, spacing, etc.). I know that it’s the “fault” of Content Size Fitter that it’s stretches, but if I don’t use it, it’s even worse:

And this is where I’m lacking the experience of a seasoned tech artist - I don’t know how to get out of this issue without comproizing the least amount of things while still keeping elegance and functionality.

At least when I’m disabling certain elements, it’s nice and responsive:

How would you tackle that? Do you have any advice for me?
Thank you so much for help

[xucian]

so the only issue is that your background image doesn’t “keep up” its child elements growing?
or do you want to keep the main panel fixed size and make the font smaller?

I think it’s the second case, did you try TMPro’s “auto size”? you won’t be able to keep the same font size for all of your text, but if you really want to do that, you’d need to add some C# magic to it (add a script that detects when the main panel goes out of bonds (you can also just update it manually once the text changes) and reduce the font size by 1 in a loop, applying LayoutRebuilder.ForceRebuildLayoutImmediate each time, until it’s in the bounds).

or, instead of setting the font, you can just scale down the whole thing, this might even be cleaner.

so in your image here:

@szlekjacob

But… The moment I change the values for sth bigger, this is what happens:

you’d detect “how big the content is compared to what it should be” (let’s say it’s 1.2x bigger) and then apply an inverse scale to it (scale = scale / 1.2)
I think you’ll like it this way as it keep spacing and all consistent, and you can also have any elements there, not just text