Notch Detection on iPhone X, XS, XR etc...

[troylyndon]

With the iPhone’s ‘notch’ now present on their 3 new phones, as well as last year’s iPhone X, detection of the ‘notch’ is necessary.

Prior to these new phone announcements, I set a new variable notchFlag=1 if either of these two conditions exist. But instead, we need code that will compare the safeArea properly so that notchFlag can be set to account for any current or future iPhone notch. Can someone familiar with the safeArea parameter who has a real iPhoneX help with this?

1. if system.getInfo(“environment”)==“simulator” and display.viewableContentWidth=1125 and display.viewableContentHeight=2436 then  --this only accounts for current iPhoneX simulator model

and

2. if system.getInfo(“platform”)==“ios” then
        local archInfo=system.getInfo(“architectureInfo”)
        if (string.find(archInfo,“iPhone10,3”,1,true) or string.find(archInfo,“iPhone10,6”,1,true) then
              --this works for iPhoneX, but what about XS and XR?

[Icy_Spark]

As new devices appear this way of looking for the notch will not work as you rightly say.

Maybe it’s best to attack it in a different way.

My code is laid out in a way that it I don’t need to set up any flags, I just calculate the top of screen y position and  safe top y position.  From there I think of two things.

1:  Positioning of elements.  Simply take the safe top position and work with that.  It will cover all devices including notched devices. 

2:  Take account of the notched area.  For instance you might have a menu bar at the top of the device.  Just extend the menu bar to the top of screen to fill that area.  

ie.

local xcenter = display.contentCenterX local ycenter = display.contentCenterY local screenw = (display.contentWidth-(display.screenOriginX\*2))   local screentop = display.screenOriginY local safetop = display.safeScreenOriginY   local notchheight = safetop-screentop local menubar = display.newRect(xcenter,screentop,screenw,notchheight+24) menubar.anchorY = 0 local menutitle = display.newText("Menu Bar",xcenter, safetop + 12, native.systemFont,14) menutitle:setFillColor(0)

Give it a run on the simulator.  You will see a nice thick menu bar for iPhone x going into the notched area whereas all other devices will have the thinner 24 pixel high menu bar.  

Effectively on a normal device the safe top and screen top are at the same y positions so the notchheight will be 0.

On any device with notches, these figures will be different so we can account for them like with the example above.

[nick_sherman]

Can’t be long before apple come out with something really stupid, like a circular screen or screen with different tiers.

[rob]

I would not write any specific device detection code or any conditional hacks. Just use our API’s as they are designed:

– fill the screen:

local background = display.newRect(display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight)

– Position an object at the center - top of the screen:

local score = display.newText( "000000", display.contentCenterX, display.safeScreenOriginY - 25, native.systemFontBold, 40 )

– Position a close button at the top right of the screen:

local closeButton = display.newImageRect( "closebutton.png", 30, 30 ) closeButton.x = display.safeActualContentWidth + display.safeScreenOriginX - 15 closeButton.y = display.safeScreenOriginY - 15

– Position a tabBar a the bottom of the screen (50 px high)

tabBar.x = display.contentCenterX tabBar.y = display.safeActualContentHeight + display.safeScreenOriginY - 25

These are not tested, so you would want to thoroughly test them on your test device suite. Not only do these cover the notch for you a status bar as well.

Rob

[troylyndon]

@Rob, will your code above properly put a close box in the upper right of an iPhone X, to the upper-right side of the notch, or will the top of the close box appear aligned with the bottom vertical position of the notch?

This is the reason I am using a notchFlag, because in this way, I can be aware of what should use the space in the upper left and upper right.

[rob]

It will position it below the notch. Apple does not want UI elements in those areas. That’s the touch zone to pull down the command center and notification center.

Rob

[troylyndon]

@Rob, perhaps it was a mistake by Apple, but they approved my new game app yesterday with the close box in the far upper-right of an iPhoneX. I can tell from our database that a single person played and approved the game. I know this request is a pain, but can you refer me to any Apple guidelines stating that UI elements should not go in that region? All I have found is this: https://developer.apple.com/design/

[rob]

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. People use swipe gestures at the bottom edge of the display to access features like the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.

Rob

[troylyndon]

@Rob, thank you - I understand. I will use the code you mentioned above and market it as Solved.

[Icy_Spark]

As new devices appear this way of looking for the notch will not work as you rightly say.

Maybe it’s best to attack it in a different way.

My code is laid out in a way that it I don’t need to set up any flags, I just calculate the top of screen y position and  safe top y position.  From there I think of two things.

1:  Positioning of elements.  Simply take the safe top position and work with that.  It will cover all devices including notched devices. 

2:  Take account of the notched area.  For instance you might have a menu bar at the top of the device.  Just extend the menu bar to the top of screen to fill that area.  

ie.

local xcenter = display.contentCenterX local ycenter = display.contentCenterY local screenw = (display.contentWidth-(display.screenOriginX\*2))   local screentop = display.screenOriginY local safetop = display.safeScreenOriginY   local notchheight = safetop-screentop local menubar = display.newRect(xcenter,screentop,screenw,notchheight+24) menubar.anchorY = 0 local menutitle = display.newText("Menu Bar",xcenter, safetop + 12, native.systemFont,14) menutitle:setFillColor(0)

Give it a run on the simulator.  You will see a nice thick menu bar for iPhone x going into the notched area whereas all other devices will have the thinner 24 pixel high menu bar.  

Effectively on a normal device the safe top and screen top are at the same y positions so the notchheight will be 0.

On any device with notches, these figures will be different so we can account for them like with the example above.

[nick_sherman]

Can’t be long before apple come out with something really stupid, like a circular screen or screen with different tiers.

[rob]

I would not write any specific device detection code or any conditional hacks. Just use our API’s as they are designed:

– fill the screen:

local background = display.newRect(display.contentCenterX, display.contentCenterY, display.actualContentWidth, display.actualContentHeight)

– Position an object at the center - top of the screen:

local score = display.newText( "000000", display.contentCenterX, display.safeScreenOriginY - 25, native.systemFontBold, 40 )

– Position a close button at the top right of the screen:

local closeButton = display.newImageRect( "closebutton.png", 30, 30 ) closeButton.x = display.safeActualContentWidth + display.safeScreenOriginX - 15 closeButton.y = display.safeScreenOriginY - 15

– Position a tabBar a the bottom of the screen (50 px high)

tabBar.x = display.contentCenterX tabBar.y = display.safeActualContentHeight + display.safeScreenOriginY - 25

These are not tested, so you would want to thoroughly test them on your test device suite. Not only do these cover the notch for you a status bar as well.

Rob

[troylyndon]

@Rob, will your code above properly put a close box in the upper right of an iPhone X, to the upper-right side of the notch, or will the top of the close box appear aligned with the bottom vertical position of the notch?

This is the reason I am using a notchFlag, because in this way, I can be aware of what should use the space in the upper left and upper right.

[rob]

It will position it below the notch. Apple does not want UI elements in those areas. That’s the touch zone to pull down the command center and notification center.

Rob

[troylyndon]

@Rob, perhaps it was a mistake by Apple, but they approved my new game app yesterday with the close box in the far upper-right of an iPhoneX. I can tell from our database that a single person played and approved the game. I know this request is a pain, but can you refer me to any Apple guidelines stating that UI elements should not go in that region? All I have found is this: https://developer.apple.com/design/

[rob]

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

Avoid explicitly placing interactive controls at the very bottom of the screen and in corners. People use swipe gestures at the bottom edge of the display to access features like the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area. The far corners of the screen can be difficult areas for people to reach comfortably.

Rob

[troylyndon]

@Rob, thank you - I understand. I will use the code you mentioned above and market it as Solved.