Anchoring and responsive UI in Unity - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Unity UI anchoring code?

Consider a UI Button anchored to the top-right corner of the Canvas. The Canvas size is 800x600 pixels. The Button's RectTransform has anchors set to (1,1) for both min and max, and its anchoredPosition is (-50, -30). What will be the Button's position relative to the Canvas?

Unity

RectTransform buttonRect = button.GetComponent<RectTransform>();
Vector2 anchorMin = buttonRect.anchorMin; // (1,1)
Vector2 anchorMax = buttonRect.anchorMax; // (1,1)
Vector2 anchoredPos = buttonRect.anchoredPosition; // (-50, -30)
Vector2 canvasSize = new Vector2(800, 600);
Vector2 buttonPos = new Vector2(canvasSize.x * anchorMin.x + anchoredPos.x, canvasSize.y * anchorMin.y + anchoredPos.y);
Debug.Log($"Button position: {buttonPos}");

A Button position: (50, 30)

B Button position: (750, 570)

C Button position: (850, 630)

D Button position: (-50, -30)

💡 Hint

Remember that anchor (1,1) means top-right corner, so position is relative to top-right.

The anchor at (1,1) means the position is calculated from the top-right corner of the Canvas (800,600). Adding the anchoredPosition (-50,-30) shifts the Button 50 pixels left and 30 pixels down, resulting in (750,570).

🧠 Conceptual

intermediate

Which anchor setup makes a UI element stretch horizontally but stay fixed vertically?

You want a UI Panel to stretch across the full width of the Canvas but keep a fixed height and vertical position. Which anchorMin and anchorMax values achieve this?

A anchorMin = (0, 0), anchorMax = (0, 1)

B anchorMin = (0.5, 0), anchorMax = (0.5, 1)

C anchorMin = (0, 0.5), anchorMax = (1, 0.5)

D anchorMin = (0, 0), anchorMax = (1, 1)

💡 Hint

Stretch horizontally means anchors span full width (0 to 1) on x-axis, but fixed vertical means anchors share the same y value.

Setting anchorMin.x=0 and anchorMax.x=1 stretches the element horizontally. Setting anchorMin.y=anchorMax.y=0.5 fixes vertical position and height.

🔧 Debug

advanced

Why does this UI element not resize with the Canvas?

A developer sets a UI Image's anchors to (0.5, 0.5) for both min and max, and sets its sizeDelta to (200, 100). When the Canvas size changes, the Image stays the same size and position. Why?

Unity

RectTransform imageRect = image.GetComponent<RectTransform>();
imageRect.anchorMin = new Vector2(0.5f, 0.5f);
imageRect.anchorMax = new Vector2(0.5f, 0.5f);
imageRect.sizeDelta = new Vector2(200, 100);

A Because anchors are fixed at center, sizeDelta controls size, so it won't resize with Canvas.

B Because sizeDelta is ignored when anchors are equal, so the element has zero size.

C Because anchors must be set to (0,0) and (1,1) to enable resizing.

D Because the Canvas Scaler component is missing, so resizing is disabled.

💡 Hint

Anchors at the same point fix the element's position and size relative to that point.

When anchors are the same, the UI element's size is controlled by sizeDelta and does not stretch. So it keeps fixed size and position regardless of Canvas size.

📝 Syntax

advanced

Which code correctly sets a UI element to stretch fully in both directions?

Select the code snippet that correctly sets a RectTransform to stretch horizontally and vertically inside its parent Canvas.

A

rect.anchorMin = new Vector2(0.5f, 0.5f);
rect.anchorMax = new Vector2(0.5f, 0.5f);
rect.sizeDelta = Vector2.zero;

B

rect.anchorMin = new Vector2(0, 0);
rect.anchorMax = new Vector2(0, 0);
rect.sizeDelta = Vector2.one;

C

rect.anchorMin = new Vector2(1, 1);
rect.anchorMax = new Vector2(0, 0);
rect.sizeDelta = Vector2.zero;

D

rect.anchorMin = new Vector2(0, 0);
rect.anchorMax = new Vector2(1, 1);
rect.sizeDelta = Vector2.zero;

💡 Hint

Stretching means anchors at opposite corners and sizeDelta zero.

Setting anchorMin to (0,0) and anchorMax to (1,1) makes the element stretch fully. sizeDelta zero means no extra size offset.

🚀 Application

expert

How to keep a UI element anchored to bottom-left but scale with Canvas size?

You want a UI Text element to stay anchored to the bottom-left corner of the Canvas but also scale its size proportionally when the Canvas size changes. Which approach achieves this?

A Set anchorMin and anchorMax to (0,0), use sizeDelta for base size, and add a script to scale sizeDelta based on Canvas size.

B Set anchorMin to (0,0), anchorMax to (1,1), and set pivot to (0,0) to stretch and scale automatically.

C Set anchorMin and anchorMax to (0,0), set sizeDelta to zero, and rely on Canvas Scaler to scale automatically.

D Set anchorMin and anchorMax to (0.5,0.5), and use layout groups to control scaling.

💡 Hint

Anchors at (0,0) fix position; scaling size requires manual adjustment or layout control.

Anchors at bottom-left fix position. sizeDelta controls size but does not scale automatically. To scale size with Canvas, a script must adjust sizeDelta based on Canvas size changes.

Practice

1. What is the main purpose of using anchors in Unity UI?

easy

A. To keep UI elements positioned correctly on different screen sizes

B. To add animations to UI elements

C. To change the color of UI elements dynamically

D. To load external images into UI elements

Solution

1. Step 1: Understand what anchors do

   Anchors define how UI elements stay positioned relative to their parent when screen size changes.

2. Step 2: Identify the main purpose

   Anchors help keep UI elements in the right place on any screen size, making UI responsive.

3. Final Answer:

   To keep UI elements positioned correctly on different screen sizes -> Option A

4. Quick Check:

   Anchors = correct UI position on all screens [OK]

Hint: Anchors fix UI position for all screen sizes [OK]

Common Mistakes:

• Thinking anchors add animations
• Confusing anchors with color changes
• Believing anchors load images

2. Which of the following is the correct way to set anchors in Unity's RectTransform component?

easy

A. rectTransform.anchorMin = new Vector2(0, 0); rectTransform.anchorMax = new Vector2(1, 1);

B. rectTransform.position = new Vector3(0, 0, 0);

C. rectTransform.sizeDelta = new Vector2(100, 100);

D. rectTransform.localScale = new Vector3(1, 1, 1);

Solution

1. Step 1: Identify how to set anchors

   Anchors are set using anchorMin and anchorMax properties of RectTransform with Vector2 values.

2. Step 2: Check the options

   rectTransform.anchorMin = new Vector2(0, 0); rectTransform.anchorMax = new Vector2(1, 1); correctly sets anchorMin and anchorMax to (0,0) and (1,1), which means stretch to full parent.

3. Final Answer:

   rectTransform.anchorMin = new Vector2(0, 0); rectTransform.anchorMax = new Vector2(1, 1); -> Option A

4. Quick Check:

   anchorMin and anchorMax set anchors [OK]

Hint: Use anchorMin and anchorMax with Vector2 to set anchors [OK]

Common Mistakes:

• Using position instead of anchors
• Confusing sizeDelta with anchors
• Trying to set anchors with localScale

3. Given this code snippet in Unity:

rectTransform.anchorMin = new Vector2(0.5f, 0.5f);
rectTransform.anchorMax = new Vector2(0.5f, 0.5f);
rectTransform.anchoredPosition = new Vector2(100, 50);

Where will the UI element appear relative to its parent?

medium

A. Positioned at the bottom-left corner of the parent

B. Stretched to fill the entire parent

C. Centered in the parent with an offset of (100, 50)

D. Positioned at the top-right corner of the parent

Solution

1. Step 1: Analyze anchor values

   Both anchorMin and anchorMax are set to (0.5, 0.5), which means the anchor is at the center of the parent.

2. Step 2: Understand anchoredPosition effect

   anchoredPosition moves the element relative to the anchor point, so (100, 50) offsets it right and up from center.

3. Final Answer:

   Centered in the parent with an offset of (100, 50) -> Option C

4. Quick Check:

   anchor at center + offset = position [OK]

Hint: anchorMin = anchorMax centers; anchoredPosition offsets from center [OK]

Common Mistakes:

• Thinking anchors stretch element
• Ignoring anchoredPosition offset
• Assuming anchors at corners

4. What is wrong with this Unity UI anchoring code?

rectTransform.anchorMin = new Vector2(1, 1);
rectTransform.anchorMax = new Vector2(0, 0);
rectTransform.anchoredPosition = new Vector2(0, 0);

medium

A. anchorMax cannot be set to (0, 0)

B. anchorMin values must be less than or equal to anchorMax values

C. anchoredPosition cannot be zero

D. RectTransform cannot have anchors set programmatically

Solution

1. Step 1: Check anchorMin and anchorMax relationship

   anchorMin should be less than or equal to anchorMax on both axes; here anchorMin (1,1) is greater than anchorMax (0,0).

2. Step 2: Understand consequences

   This causes invalid anchor setup and can lead to UI layout errors or unexpected behavior.

3. Final Answer:

   anchorMin values must be less than or equal to anchorMax values -> Option B

4. Quick Check:

   anchorMin ≤ anchorMax required [OK]

Hint: anchorMin must never be greater than anchorMax [OK]

Common Mistakes:

• Setting anchorMin greater than anchorMax
• Thinking anchoredPosition can't be zero
• Believing anchors can't be set in code

5. You want a UI button to always stay 20 pixels from the bottom-right corner of the screen, regardless of screen size. Which anchor settings and properties achieve this?

hard

A. anchorMin = (0, 0), anchorMax = (0, 0), anchoredPosition = (20, 20)

B. anchorMin = (0, 1), anchorMax = (0, 1), anchoredPosition = (20, -20)

C. anchorMin = (1, 1), anchorMax = (1, 1), anchoredPosition = (-20, -20)

D. anchorMin = (1, 0), anchorMax = (1, 0), anchoredPosition = (-20, 20)

Solution

1. Step 1: Set anchors to bottom-right corner

   Bottom-right corner corresponds to anchorMin and anchorMax both at (1, 0).

2. Step 2: Set anchoredPosition for offset

   anchoredPosition is relative to anchor; to move left and up by 20 pixels, use (-20, 20).

3. Final Answer:

   anchorMin = (1, 0), anchorMax = (1, 0), anchoredPosition = (-20, 20) -> Option D

4. Quick Check:

   Anchors bottom-right + offset (-20,20) = correct position [OK]

Hint: Anchor bottom-right (1,0), offset negative x, positive y [OK]

Common Mistakes:

• Using wrong anchor points for bottom-right
• Setting positive x offset moves right off screen
• Confusing top and bottom anchors