How to Avoid Notches on Modern Mobile Devices in Unity
When developing mobile games, there are times when it’s quite frustrating to get the UI layout right with all the different aspect ratios. This is especially true with modern smartphones and tablets with notches of different shapes and sizes.
The simplest way to make your game’s UI layout adjust itself to avoid screen notches and the iOS devices’ swipe indicator, a.k.a. the “Home” button, at the bottom of the screen is to use a Unity package called Safe Area Helper. It is free on the Unity Asset Store.
Safe Area Helper is an amazing tool for mobile game development as it can adjust the UI panels on the fly to conform with the safe area when the screen orientation changes. And it’s automatic!
How to Use Safe Area Helper to Deal With UI Elements Obstructed by Notches
Having your UI elements obstructed by random notches on users’ mobile devices is annoying. Luckily, most notched mobile devices have pretty similar designs and the notches usually take up around the same percentage of the screen.
The quickest way to get around this is through the combination of using a Unity package called Safe Area Helper and Panel UI elements.
Here is a quick summary of what I’ll be showing you in this guide. You can use the table of contents below to skip some steps like adding assets from the assets store or installing preview packages if you already know how to do those things. I want to make this guide as detailed as possible for beginners.
- Getting Safe Area Helper from the Unity Asset Store and installing it to your project.
- Installing Device Simulator (Preview version) on Unity Editor version 2020 and below. (version 2021 and above have it by default so no need to do anything.)
- Showing some examples of safe areas on some devices in the simulator.
- How to set up the UI canvas and enable Safe Area Helper.
Table of Contents
- How to Use Safe Area Helper to Deal With UI Elements Obstructed by Notches
- Other Alternatives For Dealing With Notches
- Conclusion
Installing Safe Area Helper Package
Let’s start by installing the necessary tools.
Safe Area Helper is a tool for automatically adjusting UI elements to avoid modern mobile devices’ notches (or some may refer to them as cut-outs).
Under the hood, it is using a Unity’s Screen class’ static property “safeArea” (Screen.safeArea) to get a rectangle area that doesn’t overlap with the notches on the screen of the device your game is currently running on, and then it automatically adjusts the base UI panel to be the same as the rectangle on the fly as orientation changes.
The package is available on Unity Asset Store for free so go ahead and add it to your Unity account here.
Once you’ve added the package to your assets, it should be available for you to download and install in Unity Editor now.
Open Package Manager window by going to Window > Package Manager. This is where you can find packages you own and other packages by Unity.
Change the package registry to My Assets to switch to the list of packages you own.
Scroll down to find or search for the package. If this is your first time downloading the package onto your machine, you’ll see a Download button. Click it to start downloading.
Once the download is finished, you should be able to see the Import button. Click it to open the Import Unity Package window.
You can exclude everything under the Demos folder as we only need the SafeArea.cs file. Or you can just import everything if you want to take a look at the demo scene that comes with it.
That should be all for this. But there is one more issue before we can start working with Safe Area Helper.
Installing Device Simulator
Device Simulator is a Unity package for simulating mobile devices’ screens. It can also simulate other aspects of a mobile device such as system languages, internet connectivity, and system info.
We will be using the simulator to preview what our games will look like on various types of screens.
Unity 2021 and newer come with the Device Simulator package pre-installed for every Unity project by default. If you’re using Unity version 2020 and older, you will have to install it via the Package Manager.
First of all, at the time of writing, Device Simulator for Unity Editor version 2020 and older are in their preview stage. To be able to find it in the Package Manager, you’ll have to enable viewing preview packages.
Open the Project Settings window (Edit > Project Settings…) and go to the Package Manager section. Under advanced settings, make sure Enable Preview Packages is enabled.
You should now be able to find the Device Simulator package in Unity Registry.
Once it is installed, you should be able to switch the game view in Unity Editor to the Simulator mode.
Examples of Safe Areas on Devices
In this guide, I will be using the scene above to demonstrate how Safe Area Helper works. The scene contains a few buttons, some texts, and sprites. All anchored to their respective sides and corners.
The canvas settings are as followed:
- Render Mode: Screen Space – Overlay
- UI Scale Mode: Scale WIth Screen Size
- Screen Match Mode: Match Width Or Height
- Match: 0.5
This will ensure the sizes of the UI elements will not scale weirdly when in portrait mode.
As you can see, the button on the left is getting clipped by the notch. This is not okay. We don’t want the notch to obstruct the view. In some cases, the notch may render some UI elements unable to interact or be read.
Therefore, we want a “safe area” for the UI elements to display away from those notches.
Unity’s Device Simulator has a wide selection of mobile devices for you to preview your game on. Some of them have notches or front camera holes on their screens.
The thing is, the Device Simulator knows where the safe area for each of those devices should be.
In the simulator view, there is a button named “Safe Area” that you can click to toggle the visualization of the safe area of every device.
Once enabled, the safe area on the screen is represented by a green-bordered rectangle:
Take the image above for an example. The safe area of the iPhone X is slightly away from the left and right side of the screen to avoid the notch, and slightly above the bottom edge of the screen to avoid the “Home indicator” (the black bar) which is present in all iOS-based touch devices.
Here is another example. As you can see, there is a front camera hole on the screen. In this case, the safe area only shifted slightly on the left as there is no need to adjust other sides.
The problem is, the simulator only shows you the safe area. It doesn’t adjust the UI elements for you. Why?
This is the correct behavior. It doesn’t know what should be adjusted. It doesn’t know if the background image should also be adjusted. Therefore, it leaves the decision to you, the developer.
As mentioned earlier, Unity’s Screen class provides a static property for getting the safe area of the device your game is currently running on. But that’s it. For the rest, you’ll have to manually do it yourself.
Fortunately, someone else already made a script for you, and it’s available for free on the Unity Assets Store.
Yes, it’s the Safe Area Helper package.
How to Properly Set Up The UI Canvas and Enable Safe Area Helper
First of all, you need to create a UI panel to act as the top-level UI container.
You can add a panel by right-clicking on the Hierarchy window and selecting UI > Panel.
This will create a panel object under the UI canvas.
By default, the panel will stretch and anchor to all 4 corners of the screen. If for some reason that’s not the case for you, set the anchor to the bottom-right preset to stretch the panel to match the canvas.
All panels come with a background by default. If you don’t want it, you can remove it.
Add some UI elements to it. Don’t forget to set their anchor properly so when the safe area changes, the elements will also shift correctly.
The reason we have to have a base panel is that the Canvas object itself cannot be resized. It will always cover the entire screen.
This is why we need a panel to act as the base. It’s going to be where we add the Safe Area Helper script to.
Add the SafeArea script to the top-level panel. The script file should be inside Assets > CrystalFramework > Utility. Drag and drop it onto the Panel object or add it via the Add Component button.
And that’s it! Try starting Play mode and the UI elements should stay within the safe area automatically.
The script will also update the safe area whenever the orientation changes.
If you don’t want the UI elements to shift on a certain axis, you can toggle off Conform X/Y in the inspector.
The Logging option, when enabled, will log the safe area’s details to the console window whenever the safe area changes.
Other Alternatives For Dealing With Notches
If all you want is for the UI to adjust and adapt to the safe area, the free Safe Area Helper should be enough.
And of course, if you feel like it’s missing some features you need, you can always create your own script or extend the SafeArea script.
But if you really need something more robust and offer more than just safe area adaptation, I highly recommend Universal Device Preview by Wild Mage Games on Unity Assets Store.
Universal Device Preview is an all-in-one toolset for testing and previewing your game accurately on devices.
It offers features such as:
- Safe area preview and auto adaptation. (Similar to the Safe Area Helper.)
- Preview your game on multiple devices at the same time inside Unity Editor.
- Simulate real-world physical screen size of devices.
- It also comes with a feature for generating images of your game inside a device.
- Including all features of Ultimate Screenshot Creator.
You can get all these features for $44.99 on Unity Assets Store. If you’re serious about making mobile games, I highly recommend it. It will save you a lot of time.
The link above is an affiliate link, meaning I get a percentage of the sales made via this link. You won’t be paying extra so don’t worry. It would really, really help me out so much if you purchase the product (or other products in the store) via my link.
Thank you.
Conclusion
Working and developing your game around mobile device notches of different shapes and sizes can be quite tiring.
Luckily, Unity has provided a convenient static property that is Screen.safeArea to tell us where the safe area away from those notches should be.
This helps lessen the effort needed by quite a lot, especially now that there is a free package created by a generous person to help with automatic safe area adaptation using the aforementioned static property.
I hope this guide has been worthwhile. And I’ll see you again next time!
