How to keep app from extending into notch area

Solar2D General Questions/Discussion
#1

It’s been a while since I last touched my game and I want to update it for notch support. I thought I could achieve this by just setting the status bar to be visible again, but at least in the iphone x simulator, my game extends into the notch area and the contents of the status bar are just overlaid on top of that. I feel like there should be an easy way to turn on the status bar and have the game content start below that. I tried searching google but couldn’t find anything. Am I missing something simple or was this never possible in the first place?

For phones with a notch, is it possible to turn on the status bar and have it either:

 

  1. Have a black background overlaid on top of the app, which hides any content that goes underneath it, or

  2. Push all rendered content below the status bar

 

As an example, on my Galaxy S10 I can choose a setting to make the app only render below the bounds of the hole punch camera, or render fullscreen including the camera area.

#2

https://docs.coronalabs.com/api/library/display/getSafeAreaInsets.html

https://docs.coronalabs.com/api/library/display/safeScreenOriginX.html

https://docs.coronalabs.com/api/library/display/safeScreenOriginY.html

#3

Yes I’ve seen this but it doesn’t answer my question about the status bar.

#4

The problem with the safe area api, as it understand it, is all it does is give you offsets for where it’s ok to put UI elements. I don’t just need to position UI elements. I have content that comes in from the top off screen, and it would look sloppy if there was a black void above the playable area of my game that still has content flying through it. That’s why my question mainly focuses on the status bar. I thought there would be a way to have the status bar completely hide any content that extends into the notch area.

#5

The simple answer, which you already partly ignored, is to add every important display object within the safe area and extend the game’s backgrounds and other non essential UI elements to the full screen area.

i.e. is it necessary that the user sees something and can touch it without issues? If so, then use safe area. If not, then use the full area.

#6

I probably should have worded my title differently. I mainly want to know, is it possible to turn on the status bar and have it either:

  1. Have a black background overlaid on top of the app, which hides any content that goes underneath it, or

  2. Push all rendered content below the status bar

As an example, on my Galaxy S10 I can choose a setting to make the app only render below the bounds of the hole punch camera, or render fullscreen including the camera area.

#7

For 1), I don’t think you need to create any black rect (unless you want to extend the area) since the status bar is in front of everything, i.e. all display objects should fall behind it.

For 2), you can use the safe area API in conjunction with https://docs.coronalabs.com/api/library/display/topStatusBarContentHeight.html. With https://docs.coronalabs.com/api/library/display/safeScreenOriginY.html, you know where the status bar would start and just add the height of the status bar to it and treat that as the start of your screen/playable area.

#8

@Spyric, thank you for the help. I see now that my solution of using the status bar to essentially hide the notch goes against the Apple guidelines. I also need to support the navigation bar at the bottom of the screen so the safe area api is definitely the way to go.

On a side note, do you have any suggestions for working with notch support on Android? I made separate thread for that.