Panels and layout groups help organize UI elements neatly on the screen. They make your interface look clean and adjust automatically when things change.
Panel and layout groups in Unity
Start learning this pattern below
Jump into concepts and practice - no test required
1. Create a Panel: GameObject > UI > Panel 2. Add a Layout Group component to the Panel (e.g., Vertical Layout Group, Horizontal Layout Group, Grid Layout Group) 3. Add UI elements as children of the Panel 4. Configure the Layout Group properties like spacing, padding, child alignment
Panels are UI containers that hold other UI elements.
Layout Groups automatically arrange child elements based on chosen layout style.
GameObject > UI > Panel Add Vertical Layout Group component Set spacing to 10 Add Buttons as children
GameObject > UI > Panel
Add Horizontal Layout Group component
Set child alignment to Middle Center
Add Images as childrenGameObject > UI > Panel Add Grid Layout Group component Set cell size to (100, 100) Set spacing to (5, 5) Add UI elements as children
This script creates a Canvas, then a Panel with a Vertical Layout Group. It adds three buttons inside the panel. The buttons are arranged vertically with spacing and padding automatically applied.
using UnityEngine; using UnityEngine.UI; public class PanelLayoutExample : MonoBehaviour { void Start() { // Create a Canvas var canvasGO = new GameObject("Canvas", typeof(Canvas), typeof(CanvasScaler), typeof(GraphicRaycaster)); var canvas = canvasGO.GetComponent<Canvas>(); canvas.renderMode = RenderMode.ScreenSpaceOverlay; // Create a Panel var panelGO = new GameObject("Panel", typeof(RectTransform), typeof(Image), typeof(VerticalLayoutGroup)); panelGO.transform.SetParent(canvasGO.transform, false); var panelRect = panelGO.GetComponent<RectTransform>(); panelRect.sizeDelta = new Vector2(300, 400); panelRect.anchoredPosition = Vector2.zero; var panelImage = panelGO.GetComponent<Image>(); panelImage.color = new Color(0.8f, 0.8f, 0.8f, 0.5f); // light gray transparent var layoutGroup = panelGO.GetComponent<VerticalLayoutGroup>(); layoutGroup.spacing = 10; layoutGroup.padding = new RectOffset(10, 10, 10, 10); layoutGroup.childAlignment = TextAnchor.UpperCenter; // Create 3 Buttons as children for (int i = 1; i <= 3; i++) { var buttonGO = new GameObject($"Button{i}", typeof(RectTransform), typeof(Button), typeof(Image)); buttonGO.transform.SetParent(panelGO.transform, false); var buttonRect = buttonGO.GetComponent<RectTransform>(); buttonRect.sizeDelta = new Vector2(260, 60); var buttonImage = buttonGO.GetComponent<Image>(); buttonImage.color = new Color(0.2f, 0.5f, 0.8f, 1f); // blue var button = buttonGO.GetComponent<Button>(); // Add Text to Button var textGO = new GameObject("Text", typeof(RectTransform), typeof(Text)); textGO.transform.SetParent(buttonGO.transform, false); var text = textGO.GetComponent<Text>(); text.text = $"Button {i}"; text.alignment = TextAnchor.MiddleCenter; text.color = Color.white; text.font = Resources.GetBuiltinResource<Font>("Arial.ttf"); text.rectTransform.sizeDelta = buttonRect.sizeDelta; } } }
Always add UI elements as children of the panel with layout group to let it control their positions.
Use padding and spacing in layout groups to create space around and between elements.
Panels with layout groups help your UI adapt to different screen sizes automatically.
Panels are containers for UI elements.
Layout groups arrange child elements automatically in vertical, horizontal, or grid style.
Using panels and layout groups makes UI design easier and responsive.
Practice
Panel in Unity UI?Solution
Step 1: Understand what a Panel does
A Panel is a container that holds UI elements like buttons and text.Step 2: Identify its role in UI
It helps organize these elements visually on the screen.Final Answer:
To hold and organize UI elements visually -> Option BQuick Check:
Panel = UI container [OK]
- Confusing Panels with scripts
- Thinking Panels store data
- Mixing Panels with 3D objects
Solution
Step 1: Know how to add components in Unity Editor
You add components by selecting the object and using the Add Component button.Step 2: Find the correct menu path
Vertical Layout Group is under Layout components.Final Answer:
Select the Panel, then click Add Component > Layout > Vertical Layout Group -> Option CQuick Check:
Add Component menu = Select the Panel, then click Add Component > Layout > Vertical Layout Group [OK]
- Trying to add layout by dragging scripts
- Adding components via code in Update() unnecessarily
- Creating unrelated GameObjects
Solution
Step 1: Understand Horizontal Layout Group behavior
It arranges children side by side horizontally.Step 2: Effect of spacing property
Spacing adds fixed pixels between each child element horizontally.Final Answer:
Buttons will have 20 pixels space between them horizontally -> Option DQuick Check:
Horizontal Layout spacing = horizontal gaps [OK]
- Thinking spacing causes overlap
- Confusing horizontal with vertical arrangement
- Assuming spacing hides elements
Solution
Step 1: Understand Grid Layout Group spacing
The spacing property controls gaps between cells; negative values cause cells to overlap.Step 2: Identify cause of overlapping
Negative spacing directly pulls child elements closer together, leading to overlap.Final Answer:
Spacing is set to a negative value -> Option AQuick Check:
Negative spacing = overlap [OK]
- Thinking cell size too large causes overlap
- Blaming zero padding
- Assuming missing Image affects layout
Solution
Step 1: Understand responsive UI needs
Responsive UI adapts layout based on screen size changes.Step 2: Use Grid Layout Group with Content Size Fitter and scripting
This combo allows automatic adjustment of cell sizes and columns dynamically.Step 3: Why other options fail
Vertical or Horizontal Layout Groups don't support dynamic columns well; manual positioning is error-prone.Final Answer:
Use a Grid Layout Group with a Content Size Fitter and script to adjust cell size dynamically -> Option AQuick Check:
Grid + script = responsive columns [OK]
- Using fixed layouts for dynamic screens
- Manually moving buttons every frame
- Ignoring Content Size Fitter benefits
