Can not get the following UI (see Image) correctly in Unity Editor in World Space (LayoutGroup, LayoutElement, ContentSizeFitter, ...)

[AndreasStiller]

I want to create a canvas that scales with its content. Here are some descriptions in case the image is not clear enough. This is also my approach so far.

Canvas: max. width 300, max. height 250, should be in world space

Background Image: should be behind everything else and scale with its content

VerticalLayoutGroup: contains the three elements header, content and button and should help order its elements

Header: max height 25, flexible width (depending on the Content Elements), contains TextMeshPro Text and should have max 2 lines

Content: should resize/scale depending on its content which has a fixed size, content 1 and 2 have fixed size (maybe i should use a vertical layout group here too?), depending on if this is larger than the header, the header should also resize its width

Button: should have a fixed size of 50x15 with a text inside

Image:

Could someone please help me implement this UI?
I would appreciate it a lot. Thank you in advance!!

[SteenPetersen]

@AndreasStiller - I can try give you some idea of how to achieve this, I’m doing this from memory so your milage may vary.

Step 1: Canvas

Firstly, create a Canvas in World Space and set its max width to 300 and max height to 250.

Step 2: Background Image

Create an image gameobject as a child to the canvas. Set it to scale with its content. This will act as your background.

Step 3: VerticalLayoutGroup

To your canvas, add a VerticalLayoutGroup. This will allow your header, content, and button to be placed vertically in order.

Step 4: Header

Create a Header object with a TextMeshProUGUI child. Set the header’s max height to 25 and allow it to have a flexible width.

Step 5: Content

Create a Content object. It should resize depending on its child content. For your fixed size elements, consider using another VerticalLayoutGroup for better organization. Make sure the width of the header adjusts depending on this object.

Step 6: Button

Finally, add a Button object to the canvas. Set its size to 50x15 and put your desired text inside.

Remember, in Unity, the child elements will automatically adjust to the constraints set by the parent when using a layout group. Also, you might need to play around with the layout group’s Child Force Expand and Child Control Size options to get the exact behavior you want.

Here is some pseudo code, to give you an idea of how to work with it:

// Create Canvas
Canvas canvas = new GameObject("Canvas").AddComponent<Canvas>();
canvas.renderMode = RenderMode.WorldSpace;
RectTransform canvasRectTransform = canvas.GetComponent<RectTransform>();
canvasRectTransform.sizeDelta = new Vector2(300, 250);

// Create Background Image
Image backgroundImage = new GameObject("Background").AddComponent<Image>();
backgroundImage.transform.SetParent(canvas.transform);

// Set Background to scale with its content
// Use a script to scale backgroundImage based on its child content.

// Create Vertical Layout Group
VerticalLayoutGroup verticalLayoutGroup = canvas.gameObject.AddComponent<VerticalLayoutGroup>();

// Create Header with TextMeshPro Text
GameObject header = new GameObject("Header");
header.transform.SetParent(canvas.transform);
TextMeshProUGUI headerText = header.AddComponent<TextMeshProUGUI>();
headerText.text = "Your header text here";
// Set constraints for header here

// Create Content
GameObject content = new GameObject("Content");
content.transform.SetParent(canvas.transform);
// Set constraints for content here

// Create Button
GameObject button = new GameObject("Button");
button.transform.SetParent(canvas.transform);
RectTransform buttonRectTransform = button.AddComponent<RectTransform>();
buttonRectTransform.sizeDelta = new Vector2(50, 15);
TextMeshProUGUI buttonText = button.AddComponent<TextMeshProUGUI>();
buttonText.text = "Your button text here";

Please note that you may need to adjust this code and write additional code (like scaling the background image) to meet your specific needs. Unity’s UI can be a bit complex to get right, especially when dealing with flexible content. I hope this helps! If you need further clarifications, please let me know.