edge-to-edge

Fix Android Jetpack Compose layouts overlapping system bars and IME keyboard.

2|Updated Apr 26, 2026
One-click install
npx skills add https://github.com/iadr-dev/colab --skill edge-to-edge-iadr-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/iadr-dev/colab/tree/main/skills/coding/android/system/edge-to-edge
Command: npx skills add https://github.com/iadr-dev/colab --skill edge-to-edge-iadr-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you fix Android Jetpack Compose screens where content is obscured or overlapped by the status bar, navigation bar, or IME (soft keyboard), and where system bar contrast and readability break.

Core Features & Use Cases

  • Enable adaptive edge-to-edge rendering: Add enableEdgeToEdge in each Activity and configure window soft input behavior for keyboard resizing.
  • Apply correct system insets without double-padding: Use Scaffold/Material insets patterns and apply WindowInsetsRulers or safe drawing padding to ensure scrollable content and lists render correctly.
  • Handle IME insets reliably: Ensure TextField/OutlinedTextField/BasicTextField remain visible when the keyboard opens using adjustResize and fitInside(WindowInsetsRulers.Ime.current) or properly-ordered imePadding.

Quick Start

Use the edge-to-edge skill to migrate an Android Jetpack Compose app so every Activity and all scrollable/list content correctly respects system bars and keeps inputs visible when the soft keyboard appears.

Frequently Asked Questions about edge-to-edge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Jetpack Compose content overlapping the status bar and navigation bar?

To fix Jetpack Compose content overlapping system bars, call enableEdgeToEdge in your Activity and apply safe drawing insets via Scaffold or WindowInsetsRulers patterns to pad your UI correctly.

How do I keep a TextField visible when the soft keyboard opens in Compose?

Keep TextField visible when the soft keyboard opens by setting window soft input behavior to adjustResize and applying imePadding or fitInside(WindowInsetsRulers.Ime.current) to your layout.

Why does my Compose list have double padding when applying window insets?

Double padding in Compose lists happens when insets are applied multiple times. Prevent this by using Scaffold or Material insets patterns to consume system insets properly before applying additional padding.

Does edge-to-edge rendering work across all Android SDK levels?

Edge-to-edge rendering targets Android API 35+ but requires handling adaptive configuration across SDK levels. You must add enableEdgeToEdge and configure window soft input behavior to ensure consistent system bar rendering.

What's the best way to migrate an existing Android Activity to edge-to-edge in Compose?

Migrate an existing Android Activity to edge-to-edge by adding enableEdgeToEdge, configuring adjustResize for the keyboard, and applying safeDrawing or WindowInsetsRulers to scrollable content, FABs, and dialogs.