How to scale Unity UI objects for every screen
AI Summary
Making UI that works on every screen size is one of the most important parts of Unity UI design. In this guide, you’ll learn how to use anchors, stretching, and canvas scaling to make your UI adapt to different resolutions. We’ll fix a real game UI step by step, including health bars, menus, buttons, and text, so everything stays in place no matter the screen size.
The Problem with Fixed UI
We start with a simple UI (Health bar,Menu buttons,Location text Ect.)
Everything looks fine at one resolution.
But when we resize the game window, everything breaks and moves around.
Fixing Health and Mana Bars (Top Left Corner)
We want the bars to always stay in the top-left corner.
Steps:
- Select the bars group.
- Open the Anchor Presets.
- Set it to Top Left corner anchor.
Now the UI sticks to the screen corner even when resizing.
If elements still look messy:
- Put Health and Mana bars inside a parent group
- Let the parent control positioning
This keeps everything clean and organized.
Fixing the Pause/Menu Button (Top Right)
Next we fix the pause button.
Steps:
- Select the pause button.
- Open the Anchor Presets.
- Set it to Top Right corner.
Now it stays locked to the top-right side of the screen.
Fixing Bottom UI (Location Bar)
Now we fix the bottom UI element (location text background).
Steps:
- Select the background.
- Set anchor to Bottom Stretch.
- Hold Alt / Option while clicking to stretch it properly. Now it fills the entire bottom edge of the screen. To fix the text inside:
- Set text anchor to center
- Use Alt/Option + center anchor preset
Now everything stays aligned properly.
Fixing the Pause Menu Layout
Now we fix the full pause menu.
Background fix:
- Select background image
- Set anchor to Stretch (full screen)
- Hold Alt / Option to apply full stretch instantly
Now it always covers the screen properly.
Buttons fix:
- Select both buttons (Shift click)
- Set anchor to Horizontal Stretch
- Add margins:
-Left: 24
-Right: 24
Now buttons resize properly but keep spacing.
You can also resize the menu box freely, and everything inside adjusts automatically.
Canvas Scaling
Even with correct anchors, UI can still look too small or too big.
Click the Canvas and check:
- Canvas Scaler settings You can:
- Increase scale factor (e.g. 1.2)
- Or use Scale With Screen Size mode
This makes UI adapt to different resolutions automatically.
Quick Tips for Responsive UI
- Always use anchors instead of fixed positions
- Group related UI elements under parents
- Use stretch anchors for full-width elements
- Test UI at multiple resolutions
- Use Canvas Scaler for final adjustment
Conclusion
Creating responsive UI in Unity is all about using anchors and canvas scaling correctly. Once you understand how anchors work, you can make UI that automatically adapts to any screen size without breaking.
To go further, check out a master Unity UI course and the video provided in this guide to see real examples of responsive UI in action.
