Apple is so very clever with its designs. With the iPhone X, they found way to squeeze in a larger screen without increasing the phone dimensions. The screen nearly covers the entire front face of the phone. The “notch”, as it has come to be known, may have been a practical concession (they needed to put the camera and speaker somewhere, after all) or an intentional design choice – or maybe a little of both. However the notch was conceived, it is here to stay, and we developers need to “work around” it.
And it’s not only the notch that we have to work around. The iPhone X screen has round corners too. Not the old, boring, right angled corners that we’re used to. And the coup de gras is the task bar that now appears along the bottom of the screen, that allows the user to “swipe up” to minimize the app. This has made it more difficult to use bottom navigation in our apps because we have to make sure that the user doesn’t accidentally close the app when they try to click on one of our app’s buttons at the bottom of the screen.
We have recently added an API to help you work around these landmines. We’ve added the method
Form.getSafeArea(), that will load the “safe” bounds of the current form. If you are drawing components on the screen and want to make sure that they aren’t clipped by “the notch”, the corners, or the task bar, then you can use this API to create a safe play-pen for yourself.
We’ve also added
Container.setSafeArea(boolean) which you can use to ensure that the container renders its children inside the “Safe” area. The
Tabs component has been updated to that its tab buttons are rendered inside a “safe area”. When run on the iPhone X, you’ll notice a little bit of extra padding under your tab buttons that appear at the bottom of the screen.
// Tab 1: A safe area. Will render all children inside safe area. Container tab1Contents = new Container(); tab1Contents.setSafeArea(true); // ... omitted code - building the tab 1 contents. // Tab 2: A non-safe area. Children may clip "unsafe" areas. Container tab2Contents = new Container(); // ... omitted code - building tab 2 contents. tabs.addTab("Safe Tab", tab1Contents); tabs.addTab("Unsafe Tab", tab2Contents); form.add(BorderLayout.CENTER, tabs);