Many modern smartphones include a notch or camera cutout that uses part of the screen.

You should update your apps to extend appropriate content or backgrounds into this area.

In Umajin Editor, this is done by positioning and sizing components to go past the top of the page. About 10 mm should be enough distance to cover most notches.

If your app can be used in landscape as well, then you may need to extend components to the left as well, when the notch or cutout will be on the left instead of the top.

Notes

• All phones typically have an off-page area already, which is the status bar. So even if you don’t care about notches, your app should still have a minimal off-page background.
• Presently, the status bar icons/text are always set to white, so you should make sure any background component you place in the notch area(s) are contrasting enough to see the status bar against.
• If your app does not have any content in the notch area, and has a light/low contrast background color, then a grey background will be automatically placed behind the status bar, to ensure the icons are visible.