Search Unity

  1. Check out the Unite LA keynote for updates on the Visual Effect Editor, the FPS Sample, ECS, Unity for Film and more! Watch it now!
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Improved Prefab workflow (includes Nested Prefabs!), 2D isometric Tilemap and more! Get the 2018.3 Beta now.
    Dismiss Notice
  4. Want more efficiency in your development work? Sign up to receive weekly tech and creative know-how from Unity experts.
    Dismiss Notice
  5. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice
  6. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

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

Discussion in 'Assets and Asset Store' started by Firemaw, Oct 15, 2018.

  1. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    18
    Icon516x389.png

    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 (coming soon)

    Requirements:
    * Unity 2017.2.1 or higher (needed for Screen.safeArea API)

    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!
     
    Last edited: Nov 11, 2018
    hungrybelome likes this.
  2. Goldrake

    Goldrake

    Joined:
    Feb 6, 2010
    Posts:
    140
    Hello,
    does it work for unity 2017.4?
     
  3. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    18
    Hi @Goldrake, yes it works on 2017.4. It’s compatible with 2017.2.1 and up (latest tested on 2018.2).
     
  4. ferretnt

    ferretnt

    Joined:
    Apr 10, 2012
    Posts:
    270
    Works fine on 2017.4 for me.

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

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    18
    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.
     
  6. MonsterPlanet1

    MonsterPlanet1

    Joined:
    Feb 3, 2017
    Posts:
    2
    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?
     
  7. CodeBombQuinn

    CodeBombQuinn

    Joined:
    Apr 17, 2018
    Posts:
    2
    I have an XR, and it seems to be the same as the X. This asset works great btw!
     
  8. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    18
    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.  
     
    hungrybelome likes this.
  9. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    18
    Asset store package has been updated to 1.0.2 which contains new SimDevice for iPhone Xs Max / XR
     
    hungrybelome likes this.
  10. MonsterPlanet1

    MonsterPlanet1

    Joined:
    Feb 3, 2017
    Posts:
    2
    Thank you very much!
     
  11. hungrybelome

    hungrybelome

    Joined:
    Dec 31, 2014
    Posts:
    181
    Thank you for this awesome tool!
     
  12. Firemaw

    Firemaw

    Joined:
    Aug 24, 2015
    Posts:
    18