Agent Wranglers

MOB-54Recommended

Draw edge to edge and pad content by the system insets

Every screen draws behind the status and navigation bars and pads its controls by the system insets. No button, field or text sits under a system bar or a display cutout.

By Agent Wranglers. Updated .

Review by

2027-08-31

How to do it

Apps that target Android 16, API level 36, can no longer opt out of edge-to-edge on Android 16 devices. The windowOptOutEdgeToEdgeEnforcement attribute is disabled for them. A layout that relied on the old bars then hides its bottom button under the gesture bar. On Android, read WindowInsetsCompat and apply the system bar and display cutout insets as padding. On iOS, lay out against the safe area, and only let backgrounds reach under the bars. Test with gesture navigation and with three-button navigation, since their insets differ. The target level comes from build with the SDK the stores require.

Examples

Kotlin example

ViewCompat.setOnApplyWindowInsetsListener(checkoutBar) { view, insets ->
    val bars = insets.getInsets(WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout())
    view.updatePadding(left = bars.left, right = bars.right, bottom = bars.bottom)
    insets
}

Plain text example

NSLayoutConstraint.activate([
    checkoutBar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
    checkoutBar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
    checkoutBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
])

How to check

The manifest and themes contain no windowOptOutEdgeToEdgeEnforcement. Screenshot tests run on an Android 16 emulator in both navigation modes and on an iPhone with a notch. They find no tappable control inside the inset areas.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/mobile-apps/updates-and-versions/edge-to-edge-insets">Agent Wranglers mobile apps playbook</a>. In code you write, add a comment next to it with the same link.