edge-to-edge

Migrate Jetpack Compose apps to adaptive edge-to-edge display with correct inset handling.

1|Updated Jun 9, 2026
One-click install
npx skills add https://github.com/kariemSeiam/android-claw --skill edge-to-edge-kariemseiam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/kariemSeiam/android-claw/tree/main/skills/installed/system-edge-to-edge
Command: npx skills add https://github.com/kariemSeiam/android-claw --skill edge-to-edge-kariemseiam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Android apps targeting SDK 35 must draw edge-to-edge, and UI elements like buttons, lists, and text fields often end up obscured by the status bar, navigation bar, or on-screen keyboard. This Skill provides a step-by-step playbook to migrate Jetpack Compose apps to edge-to-edge and fix the common inset, IME, and system bar legibility issues that follow. ## Core Features & Use Cases - Guided Migration Plan: Audits every Activity for missing enableEdgeToEdge calls, checks adjustResize in the manifest, and scans for text fields that need IME handling. - Correct Inset Patterns: Provides RIGHT and WRONG code samples for Scaffold padding, imePadding, fitInside with WindowInsetsRulers, list contentPadding, and full-screen dialogs. - System Bar Legibility: Covers isAppearanceLightStatusBars/isAppearanceLightNavigationBars configuration and translucent status bar protection gradients. - Use Case: After bumping your app to targetSdk 35, buttons sit under the navigation bar and the keyboard covers your login field. Use this Skill to apply the correct inset modifiers and verify the result with its built-in checklist. ## Quick Start Use the edge-to-edge skill to migrate my Compose app to edge-to-edge and fix any UI overlapping the system bars or keyboard.

Frequently Asked Questions about edge-to-edge

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

FAQPage Schema
How do I make my Jetpack Compose app edge-to-edge?▼

Call enableEdgeToEdge() before setContent in each Activity's onCreate, then apply system insets using Scaffold innerPadding, contentPadding on lists, or modifiers like safeDrawingPadding. The project must target SDK 35 or later.

How do I stop the keyboard from covering TextField in Compose?▼

Set android:windowSoftInputMode="adjustResize" in AndroidManifest.xml, then add Modifier.fitInside(WindowInsetsRulers.Ime.current) or imePadding() to the content container. Place imePadding before verticalScroll and avoid double-applying IME insets.

Should I use imePadding or fitInside with WindowInsetsRulers?▼

fitInside(WindowInsetsRulers.Ime.current) is preferred because it reduces jank and avoids extra padding from unconsumed insets upstream. Use imePadding only when the parent does not already account for the IME via contentWindowInsets.

Why is my Compose button hidden behind the navigation bar?▼

After enabling edge-to-edge, content draws behind system bars by default. Wrap the button in a Scaffold, or apply Modifier.safeDrawingPadding() to its container so critical UI stays tappable above the navigation bar.

Does edge-to-edge work with NavigationSuiteScaffold and adaptive layouts?▼

Yes, but adaptive scaffolds like NavigationSuiteScaffold do not propagate PaddingValues to inner content. You must apply insets to individual screens or components, and never apply safeDrawingPadding to the scaffold parent itself.

When should I set isAppearanceLightStatusBars manually?▼

Only when using enableEdgeToEdge from WindowCompat, since it does not manage icon colors automatically. Set it to the inverse of the dark theme flag in your theme file; ComponentActivity's enableEdgeToEdge handles this for you.