Anchoring and responsive UI in Unity

Introduction

Anchoring helps UI elements stay in the right place when the screen size changes. It makes your app look good on all devices.

You want buttons to stay at the bottom corners on any screen size.

You need a score display to stay at the top center no matter the device.

You want images to resize or move correctly when the window changes size.

You want text to stay readable and well placed on phones and tablets.

Syntax

Unity

RectTransform.anchorMin = new Vector2(xMin, yMin);
RectTransform.anchorMax = new Vector2(xMax, yMax);

anchorMin and anchorMax define the rectangle's anchors relative to the parent, values from 0 to 1.

Setting both anchors to the same point fixes the UI element to that spot; different values stretch it.

Examples

Anchors set to bottom-left corner. The UI element stays fixed there.

Unity

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

Anchors set to top center. The UI element stays at the top center.

Unity

rectTransform.anchorMin = new Vector2(0.5f, 1);
rectTransform.anchorMax = new Vector2(0.5f, 1);

Anchors stretch the UI element to fill the parent area.

Unity

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

Sample Program

This script anchors a UI button to the bottom right corner of its parent canvas. It stays 20 units away from the edges even if the screen size changes.

Unity

using UnityEngine;
using UnityEngine.UI;

public class ResponsiveUIButton : MonoBehaviour
{
    public RectTransform buttonRect;

    void Start()
    {
        // Anchor button to bottom right corner
        buttonRect.anchorMin = new Vector2(1, 0);
        buttonRect.anchorMax = new Vector2(1, 0);
        buttonRect.pivot = new Vector2(1, 0);

        // Set position 20 units from bottom and right edges
        buttonRect.anchoredPosition = new Vector2(-20, 20);
    }
}

Important Notes

Always set the pivot point to control how the UI element moves relative to its anchors.

Use the Canvas Scaler component to help UI scale nicely on different screen sizes.

Test your UI on different screen resolutions using Unity's Game view to see how anchoring works.

Summary

Anchors fix UI elements relative to their parent, helping with responsive layouts.

Use anchorMin and anchorMax to set where the element stays or stretches.

Combine anchors with pivot and anchoredPosition for precise control.

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