Notch — basics, adapting interface for screen cutout

What is Notch?

Notch (cutout, "bangs", monobrow) is an area at the top of a smartphone screen where the front camera, earpiece speaker, proximity and ambient light sensors are located, and for iPhone X and newer — the infrared Face ID camera, dot projector, and flood illuminator (TrueDepth camera system). The notch was introduced to increase the usable screen area while retaining all necessary sensors — instead of a top bezel, the display extends upward around the cutout.

Dimensions: the standard iPhone notch is approximately ~34 mm wide (~209 pt in portrait orientation for 6.1-inch models) and ~5 mm high (~30 pt). On the sides of the notch remain "ears" — small screen sections to the right and left of the cutout. The right "ear" typically shows the time, battery indicator, and Wi-Fi; the left shows the carrier and status. In landscape orientation, iOS hides the notch with a black bar across the entire width of the status bar — content is not displayed in the cutout area.

Not just iPhone: the notch concept was adopted by many Android manufacturers. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — all had a cutout. Some manufacturers went further: waterdrop notch, punch-hole camera (hole in the screen), slider camera (retractable module). Modern Android flagships (Samsung Galaxy S23+, Google Pixel 8 Pro) use a punch-hole — a minimal hole for the camera at the top of the screen, without a wide cutout.

Safe Area in iOS: safeAreaInsets

Safe Area is a rectangular area within a view that is guaranteed not to be overlapped by system interface elements: notch, rounded screen corners (corner radius), Home Indicator, tab bar, and navigation bar. Safe Area dimensions are returned through the UIView.safeAreaInsets property — UIEdgeInsets with top, left, bottom, right values. For an iPhone with a notch, top inset = ~44 pt (portrait) or ~0 pt (landscape with black bar).

// Using safeAreaInsets for content positioning
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Reading Safe Area insets
        let safeArea = self.view.safeAreaInsets

        // Logging values for debugging
        print("Top inset: \(safeArea.top)")    // ~44 pt with notch
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt with Home Indicator

        // Positioning the title with Safe Area
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // Handling Safe Area changes (rotation, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Layout recalculation
    }
}

Auto Layout and Safe Area: in Interface Builder, use "Safe Area" as the anchor target instead of "Superview". For programmatic layout, use safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS automatically updates safeAreaInsets on device rotation, entering Split View on iPad, showing/hiding the keyboard, and orientation changes. All standard UIKit controllers (UINavigationController, UITabBarController) already account for Safe Area. Custom views and controllers must use safeAreaInsets explicitly.

Notch in Android: DisplayCutout and WindowInsets

DisplayCutout is an Android SDK class added in API 28 (Android 9.0) that describes the cutout area on the screen. It can be obtained via WindowInsets.displayCutout(). The class returns a boundingBoxList — a list of rectangles describing the cutout(s), and safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — minimum insets for safe content display. Android supports various cutout configurations: central (like iPhone), side (camera in the corner), dual (two cameras), punch-hole.

// Adapting interface for DisplayCutout in Activity
class NotchAwareActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Allow content display in the cutout area (if needed)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
        }
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // Getting DisplayCutout via WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Setting inset for top content
            headerView.updatePadding(top = safeTop)
        }
    }
}

Display modes (layoutInDisplayCutoutMode): ALWAYS — content may be displayed in the cutout area (for full-screen apps, video, games); NEVER — content never overlaps the cutout, the system adds insets; SHORT_EDGES — content is displayed in the cutout area only on the short edge (for portrait apps with a top notch). The default mode is SHORT_EDGES (since Android 12). For punch-hole cameras, the cutout is smaller, and many apps use ALWAYS to maximize screen usage.

Evolution of Notch: from iPhone X to Dynamic Island

iPhone X (2017) — the first Apple smartphone with a notch. The cutout contained the TrueDepth camera for Face ID — a system of an infrared camera, dot projector, and flood illuminator. Cutout dimensions: ~34 mm × 5 mm. In iOS 11, Apple introduced Safe Area for app adaptation. Users were divided: some accepted the notch as necessary for Face ID, others criticized it for a "cropped" screen.

iPhone 13 (2021) — Apple reduced the notch by 20% by moving the speaker to the top bezel. This was the last classic notch. The iPhone 14 and 14 Plus (2022) retained the smaller notch. The iPhone 14 Pro and Pro Max introduced Dynamic Island — an ellipsoid cutout combining the camera and Face ID sensors that dynamically changes shape and displays system notifications (timer, music, AirPods connection). Dynamic Island became a software platform with its own API (ActivityKit, Live Activities).

Dynamic Island is not just a cutout, but an interactive interface element. When connecting AirPods, the island expands showing an icon and status. Calling a ride (Uber) displays the arrival time. A timer is visible in the island when minimizing the app. Dynamic Island is available on iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area for Dynamic Island: top inset = 54 pt (10 pt larger than the classic notch).

Design rules for interfaces with a cutout

Never hide content behind the notch — use Safe Area or DisplayCutout for automatic inset calculation. Do not set fixed inset values (e.g., 44 pt) — they differ on different devices and orientations. Always use system APIs for reading Safe Area: safeAreaInsets in iOS, windowInsets.displayCutout in Android. This guarantees correct display on all devices: iPhone SE (no notch), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (no notch, but with Home Indicator).

Landscape orientation — a special risk area. On an iPhone with a notch in landscape, iOS automatically adds a black bar across the entire width of the status bar (content is not displayed to the left and right of the notch). This is done by system Safe Area inset = 0 top, but increased left/right insets (~47 pt). Do not try to disable this behavior — the App Store will reject an app using "forbidden" screen areas for content in landscape. For full-screen video, use AVPlayerViewController which automatically places controls outside the notch area.

Background and status bar: if you use a custom background color, it should fill the entire screen area, including the area behind the notch. Do not draw content over the status bar — use Safe Area. For dark mode, ensure the status bar is readable: set preferredStatusBarStyle to match your background style (.default for dark text on light background, .lightContent for light text on dark background).

Testing Notch adaptation

Simulators and emulators: Xcode provides simulators for all iPhone models with a notch (iPhone X–14) and Dynamic Island (iPhone 14 Pro–15). Android Studio provides emulators with various cutout configurations (Google Pixel 3 XL, custom emulator with cutout). Test in portrait and landscape orientation, with and without the keyboard, in Split View (iPad). Verify that all content is readable and not covered.

Real devices: the notch on a simulator and on a real device may differ. For example, the iPhone 14 Pro simulator shows Dynamic Island but without real interactivity (Live Activities). For Android, a punch-hole camera may not be emulated accurately. The best approach is to test on real devices. Minimum set: iPhone SE (no notch), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android with punch-hole, Android with waterfall screen (Samsung Edge).

Tools: for iOS, use Xcode View Debugger with the "Show Safe Area Insets" option — it visually shows Safe Area boundaries. For Android — Layout Inspector in Android Studio, displaying WindowInsets and DisplayCutout in the Attributes panel. Also useful is Accessibility Inspector to verify that all elements inside Safe Area are accessible to VoiceOver/TalkBack. Do not forget about iPad without a notch, but with Home Indicator (bottom inset ~21 pt) and rounded corners.