Restrict Unity UI to an iPhone X or other Mobile Device's Safe Area

PinToSafeArea.cs

using UnityEngine;

/// <summary>
/// Resizes a UI element with a RectTransform to respect the safe areas of the current device.
/// This is particularly useful on an iPhone X, where we have to avoid the notch and the screen
/// corners.
/// 
/// The easiest way to use it is to create a root Canvas object, attach this script to a game object called "SafeAreaContainer"
/// that is the child of the root canvas, and then layout the UI elements within the SafeAreaContainer, which
/// will adjust size appropriately for the current device./// </summary>
public class PinToSafeArea : MonoBehaviour {

    private Rect lastSafeArea;
    private RectTransform parentRectTransform;

    private void Start() {
        parentRectTransform = this.GetComponentInParent<RectTransform>();
    }

    private void Update() {
        if ( lastSafeArea != Screen.safeArea ) {
            ApplySafeArea();
        }
    }

    private void ApplySafeArea() {
        Rect safeAreaRect = Screen.safeArea;

        float scaleRatio = parentRectTransform.rect.width / Screen.width;

        var left = safeAreaRect.xMin * scaleRatio;
        var right = -( Screen.width - safeAreaRect.xMax ) * scaleRatio;
        var top = -safeAreaRect.yMin * scaleRatio;
        var bottom = ( Screen.height - safeAreaRect.yMax ) * scaleRatio;

        RectTransform rectTransform = GetComponent<RectTransform>();
        rectTransform.offsetMin = new Vector2( left, bottom );
        rectTransform.offsetMax = new Vector2( right, top );

        lastSafeArea = Screen.safeArea;
    }
}

Tnx this helped a lot. The wording of your explanation was a little hard to understand. Could you maybe change it to the following so others will be able to understand it more easily?

/// Resizes a UI element with a RectTransform to respect the safe areas of the current device.
/// This is particularly useful on an iPhone X, where we have to avoid the notch and the screen corners.
///
/// The easiest way to use it is to create a root Canvas object, attach this script to a game object called "SafeAreaContainer"
/// that is the child of the root canvas, and then layout the UI elements within the SafeAreaContainer, which
/// will adjust size appropriately for the current device.

Tnx this helped a lot. The wording of your explanation was a little hard to understand. Could you maybe change it to the following so others will be able to understand it more easily?

Sounds good to me! Done! Thanks for the suggestion. (And I'm glad you found it useful!)

I think there is an error in your code and top is swapped with bottom. You're offsetting from top using yMin, which is offset from the bottom.

With the help of @Xaverix 's comment, I found that by doing a slight adjustment, the function works perfectly. Here's the fixed lines of code (line 33,34):

var top = -(Screen.height - safeAreaRect.yMax) * scaleRatio;
var bottom = safeAreaRect.yMin * scaleRatio;

2018 (when this was published) is now 5 years ago, crazy

Using it in 2024. Funny that unity doesn't have a SafeArea component after those years. Shame on you Unity!
Thanks!

Using it in 2024. Funny that unity doesn't have a SafeArea component after those years. Shame on you Unity! Thanks!

Haha! Glad it continues to be useful. :)

Thank you! Simple and just works