The right way to wrap your UI inside the safe area — Unity

If you have been working with unity for a while and notched devices (damn you apple for introducing notches) you probably know about how to over come the issue of wrapping you content inside the safe area of a device.

This post is targeted towards newbies who wants to wrap their content (specially UI) inside the safe area for their games in unity.

What is safe area?

Safe area is basically a set of pre-defined reference points which represents different padding for different mobile devices from all four corners.

This screen shot shows the safe area for an iPhone device represented by the yellow box. You can clearly see here how the UI content gets out of the safe area and if something is behind the notch the user won’t be able to see the content just as seen in the screen shot below. We have our button hidden behind the pill shape of the camera on a different device.

Simple solution for android:

For android the simple solution is to just go into the settings and turn off the “Render outside the safe area” option.

Go to “Edit” => “Project Settings” => “Resolution and Presentation” and turn off the Render outside safe area option.

The result (For android):

The result you will be getting for this on an android device would be something like this.

Everything wrapped inside the safe area. This includes your gameplay content (background elements of the game like skybox etc.)and UI.

Problem:

The only problem with this solution would be that you will end up having a black bar on top of your mobile device which might end up being a bad sign for the user’s experience in the game.

What you want still want to show the user is the part of the gameplay elements (a part of the sky) but not the UI so it does not get influenced by the notches/punch holes of the devices.

Final Solution:

So what we need is to take the full advantage of the screen while maintaining the user’s experience to interact with the game’s UI.

All you need is a script for the making restricting the UI into the safe area.

using UnityEngine;
public class SafeArea : MonoBehaviour
{
private RectTransform _rectTransform;
private Rect _safeArea;
private Vector2 _minAnchor;
private Vector2 _maxAnchor;

private void Awake(){
_rectTransform = GetComponent<RectTransform>();
_safeArea = Screen.safeArea;
_minAnchor = _safeArea.position;
_maxAnchor = _minAnchor + _safeArea.size;
_minAnchor.x /= Screen.width;
_minAnchor.y /= Screen.height;
_maxAnchor.x /= Screen.width;
_maxAnchor.y /= Screen.height;
_rectTransform.anchorMin = _minAnchor;
_rectTransform.anchorMax = _maxAnchor;
}
}

You just need to attach this script to the canvas game objects of your game.

What does this do 😒 ?

It will restrict the maximum and minimum anchor position of the canvas’s Rect Transform inside the device’s safe area. And that’s it.

Now you can leverage the full screen to show the users you game play elements while maintaining the user interaction with UI elements.

This is how your UI will look if you just set the Rect Transform to the top center.

And this is how it will look like once the max and minimum anchors are restricted inside the safe area of your device:

Cheers!