Panel and layout groups in Unity - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Unity UI layout code?

Consider a Unity UI Canvas with a Vertical Layout Group component on a Panel. The Panel has three child buttons with heights 50, 60, and 70 respectively. The Vertical Layout Group has Child Force Expand Height set to false. What will be the height of each button after layout?

Unity

using UnityEngine;
using UnityEngine.UI;

public class LayoutTest : MonoBehaviour {
    public VerticalLayoutGroup layoutGroup;
    public RectTransform button1, button2, button3;

    void Start() {
        // Assume buttons have preferred heights 50, 60, 70
        Debug.Log($"Button1 height: {button1.rect.height}");
        Debug.Log($"Button2 height: {button2.rect.height}");
        Debug.Log($"Button3 height: {button3.rect.height}");
    }
}

A Button1 height: 180, Button2 height: 180, Button3 height: 180

B Button1 height: 60, Button2 height: 60, Button3 height: 60

C Button1 height: 50, Button2 height: 60, Button3 height: 70

D Button1 height: 0, Button2 height: 0, Button3 height: 0

💡 Hint

Think about what Child Force Expand Height does when set to false.

When Child Force Expand Height is false, each child keeps its preferred height. So the buttons keep their original heights 50, 60, and 70.

🧠 Conceptual

intermediate

Which layout group automatically arranges children horizontally with spacing?

In Unity UI, you want to arrange child elements side by side with equal spacing. Which layout group component should you use?

A Vertical Layout Group

B Grid Layout Group

C Content Size Fitter

D Horizontal Layout Group

💡 Hint

Think about the direction you want the children arranged.

The Horizontal Layout Group arranges children side by side horizontally with spacing and alignment options.

🔧 Debug

advanced

Why does the panel not resize with its children?

You have a Panel with a Vertical Layout Group and several child buttons. You want the Panel to resize vertically to fit all buttons. You added a Content Size Fitter to the Panel with Vertical Fit set to Preferred Size. But the Panel height stays fixed. What is the likely cause?

A Content Size Fitter does not work with Vertical Layout Group.

B The Panel's RectTransform has a fixed height set, preventing resizing.

C Child Force Expand Width is set to true on the Vertical Layout Group.

D The buttons have no Layout Element components.

💡 Hint

Check the RectTransform size settings on the Panel.

If the Panel's RectTransform has a fixed height (e.g., set sizeDelta.y), the Content Size Fitter cannot resize it. You must allow the height to be flexible (e.g., set to 0 or use anchors) for Content Size Fitter to work.

📝 Syntax

advanced

Which code snippet correctly adds a Horizontal Layout Group to a GameObject in Unity?

You want to add a Horizontal Layout Group component to a GameObject named panel via script. Which code snippet is correct?

Unity

using UnityEngine;
using UnityEngine.UI;

public class AddLayout : MonoBehaviour {
    public GameObject panel;
    void Start() {
        // Add Horizontal Layout Group here
    }
}

A panel.AddComponent<HorizontalLayoutGroup>();

B panel.AddComponent(new HorizontalLayoutGroup());

C panel.AddComponent<HorizontalLayoutGroup>;

D panel.GetComponent<HorizontalLayoutGroup>();

💡 Hint

Remember the syntax for adding components in Unity.

The correct syntax to add a component is gameObject.AddComponent<ComponentType>(). Option A uses this correctly.

🚀 Application

expert

How to create a responsive UI panel that adapts to different screen sizes?

You want to create a UI Panel in Unity that automatically adjusts its size and layout to look good on phones and tablets with different screen sizes. Which combination of components and settings is best?

A Use a Canvas Scaler set to Scale With Screen Size, add a Vertical Layout Group to the Panel, and Content Size Fitter with Vertical Fit set to Preferred Size.

B Use a Canvas Scaler set to Constant Physical Size, add no layout groups, and set fixed sizes for all UI elements.

C Use a Canvas Scaler set to Scale With Screen Size, add a Horizontal Layout Group to the Panel, and disable Content Size Fitter.

D Use a Canvas Scaler set to Constant Pixel Size, add a Grid Layout Group to the Panel, and fix the Panel size manually.

💡 Hint

Think about scaling and flexible layouts together.

Using Canvas Scaler with Scale With Screen Size ensures UI scales on different devices. Vertical Layout Group arranges children nicely, and Content Size Fitter lets the Panel resize to fit content dynamically.