[RELEASED] Safe Area Helper for "notched" phones (iPhone X, Google Pixel 3 XL, etc.)

Safe Area Helper will help you quickly develop and simulate the Safe Area of a notched mobile device such as the iPhone X or Google Pixel 3 XL!

For a detailed breakdown about how the Safe Area works on mobile devices, I have also written a companion "How To" article online, Updating your GUI for the iPhone X and other “Notched” Devices

Features:
* Simple drag-and-drop component to apply Screen.safeArea to your Unity GUI components
* Convenient options to conform to Safe Area on X- or Y-axis only
* Simulate the iPhone X Safe Area within the Editor in all orientations - quickly iterate your UI and save time without having to build to a physical device or Xcode Simulator
* Convenient debug toggle button to switch between normal and Safe Area modes at runtime
* Easily add an unlimited number of your own simulated devices

Simulated devices included:
* iPhone X, Xs, Xs Max, XR
* Google Pixel 3 XL

Requirements:
* For iOS: Unity 2017.2.1 or higher (needed for Screen.safeArea API)
* For Android: Unity 2018.4.1 or 2019.1.2 or higher with API level 28 (needed for Android cutout support)

Screenshots contain examples of correct and incorrect implementations of the Safe Area for demonstration purposes only. (No graphical assets are included in the package.)

Download it now from the Asset Store!

 

Hello,
does it work for unity 2017.4?

 

Hi @Goldrake, yes it works on 2017.4. It’s compatible with 2017.2.1 and up (latest tested on 2018.2).

 

Works fine on 2017.4 for me.

Does anyone have the rect values for Pixel 3 XL or any other Android devices handy?

 

I haven’t been able to find any values for the Pixel 3 XL yet. Was hoping they would release the AVD for Android Studio soon! Would love it if anyone can post the safe area coords here so I can add them to the package.

 

Thank you! Asset working is awesome!

I have some question.
Apple introduced new resolution devices, iPhone XR and iPhone XSMax. They have another safe area zone?

 

I have an XR, and it seems to be the same as the X. This asset works great btw!

 

Thank you @MonsterPlanet1 and @CodeBombQuinn for the feedback! Much appreciated and glad its worked well for you both!

@MonsterPlanet1 - I have done a thorough investigation into the new iPhone X model variations - Xs, Xs Max and XR - using the Xcode Simulator. For the most part, they are pretty much the same. The full screen aspect ratios remain the same across the board: ~19.5:9. In terms of their safe areas, the iPhone X and Xs are identical. The Xs Max and XR are pretty close, but do have a very slightly larger safe area (less than 1% difference). For the sake of completeness and thorough testing, I will add these to the package and publish it within the next couple of days. If you can't wait, here are the normalised safe area ratios for the iPhone Xs Max (of which the ratios are identical to the XR):

Code (CSharp):

1.  
2. Rect[] NSA_iPhoneXsMax = new Rect[]
3. {
4.     new Rect (0f, 102f / 2688f, 1f, 2454f / 2688f),  // Portrait
5.     new Rect (132f / 2688f, 63f / 1242f, 2424f / 2688f, 1179f / 1242f)  // Landscape
6. };
7.  

 

Asset store package has been updated to 1.0.2 which contains new SimDevice for iPhone Xs Max / XR

 

Thank you very much!

 

Thank you for this awesome tool!

 

Thank you for the feedback @hungrybelome !

 

Shout-out for the dev for making this assets. Saved my team a tons of extra work for the forsaken notch thingy.
Just import it and it work like a charm.
But still there something might off for that one of my device (Iphone 7 plus) is making very weird layout. Checking the layout that safe area return rect with value width = 1242 and heigh = 2208 altho iphone 7 doesn't have safe area and original are 1080x1920. Currently it's only effect that device (we don't have much iphone lying around) Any idea of this situation?
Thank you

 

Hi @Kultie_Kaopiz thanks for the kind words! I have tested the safe area on a regular iPhone 7 but not the iPhone 7 Plus. I'll take a look on the Xcode simulator to try and see what's going on. What is your version of Unity and iOS?

 

Hi @Kultie_Kaopiz I ran it through the Xcode Simulator with iPhone 7 Plus in iOS 12.1. I couldn't see any errors with the safe area occurring. It always stayed at full screen with 1242x2208 or 2208x1242 pixels. I can suggest a couple of things to check:

(1) the safe area script is on a panel that is not stretched to full screen (Anchor 0,0 to 1,1; Pivot 0.5,0.5);

(2) the safe area script is on a child whose parent is not stretched to full screen.

Either of the above can cause the safe area code to do weird things.

Some versions of Unity 2017 also have bugs related to the safe area not showing correctly on startup for some devices (search the Issue Tracker for details), but are generally related to the X-series so shouldn't affect the 7 Plus.

 

Hello!
i'm experiencing a bug on the device. Everything works fine in editor, but the panel that has the script and all its children were out of the screen ( i could not even see them).

Attached is my canvas settings

 

NVM, I attached SafeAreaDemo to the object

 

@Firemaw thanks for the suggestions, the problem is resolved now when i only calculate the safe area once at the initial scene and user that for all of other scene.

 

Good to hear you were able to resolve the problem @Kultie_Kaopiz

 

It's working very well except for one scenario. When enabling the status bar from Player Settings for iOS devices, the safe area overlaps the status bar on non-iPhone X devices in portrait mode.

I have tested this on iPhone 5S, iPhone 6 Plus, iPhone 8 Plus, iPad Mini 2 and iPad Pro 12.9. All devices exhibit this behaviour, except the 8 Plus (no idea why, the 6 Plus is the same aspect and resolution). Even stranger, the safe area will suddenly jump into place below the status bar right after showing a Unity Ad.

Edit: Unity 2018.3.7 on macOS 10.14.3

 

Hi @JohnnyFactor, is it a problem where the device is not starting up with the safe area, but it will activate correctly after an ad playback or an orientation change (portrait -> landscape -> back to portrait)? I do recall a bug in 2017, which was fixed, where this was a similar case. Maybe that bug has resurfaced? https://issuetracker.unity3d.com/is...rait-mode-until-screen-orientation-is-changed. It would be worth logging your case to the Issue Tracker as I believe it might be to do with Unity Screen.safeArea code itself.

 

Ok after some proper testing, it seems this is a problem with iOS 11. It works on iPhone 8 Plus and iPad Pro 12.9 (both iOS 12.1.4) but not on the other devices (iOS 11.4.1).

I have no idea how to troubleshoot this so I have submitted a bug report (case 1135203).

 

Thanks @JohnnyFactor, could you link the report here so I can give it an upvote?

 

Thanks for your support but I won't do that. I'm not keen on sharing my entire bug report communication history-- complete with my plain text email address-- on a public forum. Maybe I should report that as a bug.

Update: I tracked down this bug to Player Settings-->Orientation. When set to anything other than 'Auto Orientation', it seems to bypass the screen inits and doesn't see the status bar. I set it to 'Auto Orientation' and unchecked the landscape options.

 

Hi. I dont know if I'm the only one but on my XRMax the safe area is not taking all the available space, or at least thats what I feel like. I inserted a red layer on the safe area so you can see it better.
Is this normal?

 

Trying the demo with the emulator and it's the same... there's still space on top and bottom....

 

Hi @pistoleta could you describe the issue in more detail please? Your screenshots look correct to me. The safe area will never expand over the notch (top) or Home indicator (bottom) in portrait mode on the iPhone XR. There are also two slightly different safe areas for iPhone X models using the sim toggle hotkey (described at the bottom of the article linked in the original post).

 

Okay if you say so, but I thought the safe area would be more accurate, on top theres a 1% that could still be used, but I guess this is good enough. Thank a lot for your great asset and for answering my question.
Regards

 

Hello @Firemaw I found a bug in the Safe Area Helper code when the device orientation changes. It is related to how Unity updates their Screen.safeArea, Screen.height and Screen.width across different frames.

I have a use-case in the app I developed where it changes from one Scene in Landscape into another that forces Portrait. With this, Unity updates the Screen.safeArea in 2 frames (first is Landscape, and second is Portrait), and updates the Screen.height and Screen.width in 3 frames (first is Landscape resolution, then is Highest Width/Highest Height, then it finally becomes Portrait resolution). Therefore, this causes the Safe Area Helper anchor calculations to be wrong.

I fixed this by also checking for the last resolution, instead of just the last safe area. The code is as follows:

Code (CSharp):

1. void Refresh ()
2. {
3.     Rect safeArea = GetSafeArea ();
4.  
5.     if (safeArea != LastSafeArea
6.         || LastScreenSize.x != Screen.width
7.         || LastScreenSize.y != Screen.height)
8.    {
9.         LastSafeArea = safeArea;
10.         LastScreenSize.x = Screen.width;
11.         LastScreenSize.y = Screen.height;
12.         ApplySafeArea(safeArea);
13.     }
14. }

This happens in an iPhone X with iOS 12.2, built with Unity 2018.3.1. Also, I have animated orientation rotation turned off.

 

Thanks @henriqueranj I will investigate and look into including this in the next release. When you say you are "forcing" portrait mode in the second scene, how are you doing that?

 

Forcing is probably not the best word for it, I just tell the app to go in Portrait through code. Here's the code I use (the Coroutine is due to some issues we had with properly locking the app to a portrait/landscape in iOS):

Code (CSharp):

1.  
2.        private IEnumerator SwitchAfterFrame(bool isPortrait) {
3.             _isPortrait = isPortrait;
4.             Screen.autorotateToLandscapeLeft = Screen.autorotateToLandscapeRight = !_isPortrait;
5.             Screen.autorotateToPortrait = Screen.autorotateToPortraitUpsideDown = _isPortrait;
6.             // force orientation to portrait or landscape
7.             Screen.orientation = _isPortrait ? ScreenOrientation.Portrait : ScreenOrientation.LandscapeLeft;
8.             // then set it back to auto rotation so user can have orientation freedom within landscape or portrait
9.             yield return new WaitForEndOfFrame();
10.             Screen.orientation = ScreenOrientation.AutoRotation;
11.             _switchRoutine = null;
12.             yield return null;
13.         }
14.  

 

The Pocophone F1 is not recognised as having a notch - how does one add our own "custom" safe areas for custom devices?

EDIT:
See you are using Screen.SafeArea - and it may be related to this bug: https://issuetracker.unity3d.com/is...t-work-with-portrait-or-landscape-orientation

Sorry for hijack

 

Hello, would you say this is normal?
We are using the Safe Area helper as instructed, (the red area on the editor shows the SafeArea container), but whenever we deploy on a iPhone XR this gap on the top takes place, when we deploy on a iphone6 for example the orange bar is completely on the top, why the notch devices still have such a big gap? Is there something that can be done? like detecting the device using ios.Device.generation and add offsets depending on the device? is my only option?
Thanks for your help

 

Hi @ThatMunk, there are several devices that manufacturers released with notches during Android 8.1. However, since official OS support came in Android 9.0, it was up to individual manufacturers whether they would support cutouts in 8.1 (see https://developer.android.com/guide/topics/display-cutout).

Other than upgrading the device to 9.0 (if possible), I'm not sure how you would deal with this issue in Unity. You could try one of these suggestions by editing your Android manifest, but I have not tried them myself:
https://forum.unity.com/threads/fullscreen-game-for-phones-with-screen-brove.560617/#post-3726268
https://issuetracker.unity3d.com/is...-black-bar-instead-of-rendering-in-fullscreen

 

Hi @pistoleta, this is intended by Apple, as their specification for the screen safe area does not go right up to the edge of the notch on the iPhone X series, but also has an intended gap and margin area. See https://developer.apple.com/design/...ivity-and-layout/#layout-guides-and-safe-area

In order to activate the safe area simulator in the Editor, you need to attach the SafeAreaDemo.cs script to an object in your scene and press the 'A' key at runtime to cycle through sim devices.

 

Hello, I’m very new at this but I’m attempting to navigate my way through development of an AR app on an XS Max.

I came across this handy asset while learning UI stuff, but I’m only a couple of days into Unity and quite frankly have no idea how I should use it. Can someone explain what I should be doing here, assuming I have almost zero foundational knowledge of the program?

For context, I’ve built an image tracking app that works. All I need now is a simple screen space UI and I’m trying to implement a visually identifiable safe area in which to place my UI elements. I’m starting with nothing but a functional ARkit example, I don’t even have my project set up specifically for the XS Max I’m using as I’m still not sure how to accomplish that task.

That being said, will this asset help me? How do I use it? Any advice on how this tool might help me configure my project correctly for the device I’m using? Is there any ‘how-to’ documentation?

Cheers!

 

Hi @grizsk this asset is for creating UI that conforms to the notch on iPhone X and other similar devices. You can find an article about it in detail here: https://connect.unity.com/p/updating-your-gui-for-the-iphone-x-and-other-notched-devices.

For an AR app, you will need to focus on a different kind of programming and asset. I would suggest using Unity's AR Foundation instead of ARkit, as it will work cross-platform with Android AR phones as well. There are several tutorials around if you search for them.

 

Hi! amazing asset! this detect the device automatically? Thanks!

 

Hi @gferrari yes it will detect the device automatically as long as you have the correct version of Unity (see store page description)

 

It work amazing! thanks for this!

 

@Firemaw Asset says it supports 2017.2.1 or higher, but can only be downloaded on Unity 2019.1.8 or later. Can you fix?

 

Hi - I encountered a major problem in your code and documentation that caused my team a day or two of headache.

Your SafeAreaDemo.cs deletes the entire GAMEOBJECT that it is put on. But your blog post says this:

"it will destroy itself" implies that the script will destroy itself, as in it's monobehavior, not it's entire GameObject.

Because it's destroy(gameobject) was being called on device only, and Unity makes it extremely hard to debug on device (for iOS anyway), it took us so much time to figure out what was causing our UI to disappear.

Please fix to only destroy the monobehavior itself! Or put a bold, colored warning in the Usage file and the blog post.

Other than that, thank you for developing this

 

Hi @ThatMunk and @Firemaw, I can confirm that Screen.safeArea is saving out the notch on the Pocophone F1. However, the safe area isn't totally correct, as the Pocophone F1 has 'long' rounded screen corners that are still blocking UI at the home button side.
It's apparently not possible to detect rounded screen corners on Android devices (https://stackoverflow.com/questions/50104945/find-if-screen-has-rounded-corners), so I added this code for the Pocophone F1:

Code (CSharp):

1. #if UNITY_ANDROID
2.             // After using Screen.safeArea, some Android devices (e.g. Xiaomi POCOPHONE F1) have long rounded corners that are still blocking UI at the home button side.    
3.             if (SystemInfo.deviceModel == "Xiaomi POCOPHONE F1")
4.             {
5.                 // Landscape.
6.                 if (Screen.width > Screen.height)
7.                 {
8.                     // Add some extra pixels (the same amount as the device's safe area for the notch) so that the rounded corners don't block the UI.
9.                     float safetyPixels = Screen.width - safeArea.width;
10.                     // Rounded corners (home button) on the right.
11.                     if (Screen.orientation == ScreenOrientation.LandscapeLeft)
12.                     {
13.                         Debug.Log("Landscape Left");
14.                         safeArea.width -= safetyPixels;
15.                     }
16.                     // Rounded corners (home button) on the left.
17.                     if (Screen.orientation == ScreenOrientation.LandscapeRight)
18.                     {
19.                         Debug.Log("Landscape Right");
20.                         safeArea.x += safetyPixels;
21.                         safeArea.width -= safetyPixels;
22.                     }
23.                 }
24.             }
25. #endif

I suppose there're other Android devices with the same long rounded screen corners (or other issues). Let's maybe start a list with exceptions?

 

Hi there,

I just wanted to let you know that I'm not able to install the plugin on 2018.3.8f1(IOS) despite the Screen.safeArea API being available.

 

Hi @eshan-mathur @mobearhug , yes sorry the latest version I will resubmit with 2017.2.1 as well, my apologies.

EDIT: The package has now been updated with min version 2017.2.1

 

Hi @eshan-mathur, it's recommended to put the SafeAreaDemo.cs file on an empty GameObject floating outside the hierarchy, not on your canvas. I can update the script though to only destroy the script as a failsafe for people who don't do this.

 

I am having an issue with the safe area, both simulated and on-device in landscape mode on an iPhone X/XR. In both Screen.orientation == ScreenOrientation.LandscapeLeft and Screen.orientation == ScreenOrientation.LandscapeRight, there seems to be "notch space" on both sides of the screen, when the camera is clearly only on one side. Is this a known issue, and is there any known workaround, or am I doing something wrong?

 

This from the dev by email:

With regards to your question, it is in fact due to Apple’s standards that the safe area is symmetrical in landscape regardless of which side the notch is on. You can see this if you check out their design guidelines.

Case closed.

 

Yeah the failsafe would be great. Maybe with a log warning. Also, does your documentation have that recommendation anywhere? I didn't see it, but might have missed it.

 

Hi @eshan-mathur yes it's described that the object it's attached to will destroy itself in the linked Unity Connect article.