Mobile development

Stage 2 · Lesson 5 of 10

Edge-to-edge and window insets

Jetpack Compose UI

Modern Android apps draw , behind the and the navigation bar. Apps targeting Android 15 or later get this by default. Call enableEdgeToEdge() in your activity.

Then keep content clear of system bars and camera cut-outs with insets, the space those bars take up. Scaffold passes an innerPadding value that you must apply. such as safeDrawingPadding() and imePadding() handle other cases, including the keyboard.

Also test up to 200 percent, landscape and a small phone. Use fillMaxWidth and weight instead of fixed sizes. Tablets and come later in this roadmap.

Common trapignoring Scaffold's innerPadding, so the first list item hides behind the top bar.

A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock

Resources for this stage

Start with

Practise

  • Use a free challenge's mobile design image as the spec for a native screen

Keep handy

  • Spacing, type scale, colour and component specs your screens should follow

Mark this stage as not done?