Edge-to-edge and window insets

Modern Android Mid-level Kotlin 2.0+ API 24+ Reviewed By Best Latest Apps

Pick the fix

After targeting API 35, a screen's bottom button hides behind the navigation bar. Fix?

Options
Hint 1 of 1

What does Scaffold give its content lambda?

Choose an answer, then open Show answer below to check it.

Show answer

Answer: A Apply innerPadding from Scaffold or navigationBarsPadding() to the content

Correct. The content now respects the bar's inset.

Why not the others?
  • B Opt out of edge-to-edge. The opt-out goes away when targeting API 36.
  • C Add 48dp bottom padding. Wrong on 3-button vs gesture nav and on tablets.
  • D Hide the navigation bar. Hurts users.

30-second answer

Edge-to-edge means your app draws behind the status and navigation bars. It's enforced for apps targeting Android 15 (API 35), and the opt-out is gone for API 36. Call enableEdgeToEdge() and pad content with insets: Scaffold's innerPadding, or modifiers like windowInsetsPadding(WindowInsets.safeDrawing) and imePadding(), so nothing sits under bars, cutouts or the keyboard.

Practise saying it · 30 s. No recording, just a timer

Explain edge-to-edge.

Say your answer out loud, then check which of these points you covered:

  • Draw behind system bars
  • Enforced on API 35+
  • enableEdgeToEdge
  • Inset padding
  • Avoid double padding

Deep dive

Backgrounds should extend behind bars; text and touch targets shouldn't.

WindowInsets.safeDrawing covers system bars, display cutouts and the keyboard.

Consume insets once so nested padding isn't applied twice.

Gesture navigation needs systemGestures insets for edge swipes.

Edge-to-edge with Scaffold Compile-checked · Kotlin 2.4.21
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: android.os.Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContent {
            Scaffold { innerPadding ->
                LazyColumn(contentPadding = innerPadding) {
                    items(50) { Text("Row $it", Modifier.padding(16.dp)) }
                }
            }
        }
    }
}

Common mistakes

  • Hard-coding 24dp for the status bar.
  • Padding twice, once in Scaffold and again in a child.
  • Forgetting the keyboard on input screens.

Senior take & follow-ups

Mention the API 35/36 change, then the inset types and the double-padding trap.

Follow-up questions

Think of your answer first, then open the hint.

  1. Which insets include the keyboard?

    Show hint

    WindowInsets.ime, and safeDrawing includes it.

  2. Why not hard-code bar heights?

    Show hint

    They vary by device, cutout and navigation mode.

Suggest a fix if something here is wrong or out of date.