Mr.AndroidShin / Dev Tools

Debugging log · UI

Content sliding under the status bar after targeting API 36

The first time I ran an app after bumping targetSdk, the top toolbar was half-hidden behind the clock and the bottom row of buttons sat under the navigation pill. Nothing in my layout had changed. This is edge-to-edge enforcement, and Play Console flags it as "some users may not see a wider screen." The fix is small once you know what changed.

The short version: when your app targets recent Android (35/36), the system draws your content behind the status and navigation bars by default. If you don't consume window insets, your own UI gets clipped by them. Enable edge-to-edge explicitly, then pad your content by the system-bar insets so nothing hides underneath.

Why it suddenly happens

Older apps got an automatic gap: the system reserved space for the status and navigation bars and laid your content out below them. Targeting Android 15+ removes that automatic gap — your window now spans the full screen, bars included. It's a nicer look when handled, but any view pinned to the top or bottom edge now overlaps a system bar until you tell it not to.

Step 1 — enable edge-to-edge

In an Activity, the canonical call (androidx.activity) is:

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()          // Kotlin
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)
}

If you don't use that extension, the underlying call is equivalent:

WindowCompat.setDecorFitsSystemWindows(window, false)

Putting this in a shared BaseActivity is the cleanest way to make every screen consistent at once.

Step 2 — consume the insets

Now pad your root view by the system-bar insets so the top and bottom of your UI clear the bars:

ViewCompat.setOnApplyWindowInsetsListener(rootView) { v, insets ->
    val bars = insets.getInsets(
        WindowInsetsCompat.Type.systemBars()
            or WindowInsetsCompat.Type.displayCutout()
    )
    v.setPadding(bars.left, bars.top, bars.right, bars.bottom)
    insets
}

Applying this to the content root (or in onContentChanged() of a base activity) covers a whole app quickly. Including the display-cutout type keeps content clear of notches and punch-holes too.

Compose is usually already fine

If your screen is Jetpack Compose and you called enableEdgeToEdge(), Material 3 Scaffold already applies the right insets to its slots — you rarely need to do more. The apps that broke for me were the View-based ones with hand-built toolbars.

Drop the deprecated bar-color trick

While you're here, remove android:statusBarColor and android:navigationBarColor from your theme. In edge-to-edge they're deprecated and ignored, and Play Console reports them as "deprecated APIs or parameters for wider screens." If you want the bars tinted, do it by drawing your own background behind them instead.

Test on a device with three-button navigation and one with gesture navigation — the navigation-bar inset differs a lot between them, and a layout that looks perfect with gestures can clip a button under the three-button bar.

Verify on a couple of real devices — emulator insets don't always match hardware, especially around cutouts and gesture bars.