android-edge-to-edge

Migrates Jetpack Compose apps to edge-to-edge display with correct system bar and IME inset handling.

Updated Apr 21, 2026
One-click install
npx skills add https://github.com/Zeyad-37/tech-agency --skill android-edge-to-edge-zeyad-37
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: android-edge-to-edge
Source: https://github.com/Zeyad-37/tech-agency/tree/main/.claude/skills/android-edge-to-edge
Command: npx skills add https://github.com/Zeyad-37/tech-agency --skill android-edge-to-edge-zeyad-37

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Android apps targeting SDK 35 must draw edge-to-edge, but UI components often end up obscured by the status bar or navigation bar, text fields get hidden behind the IME keyboard, and system bar icons become illegible. This Skill provides a structured migration and troubleshooting workflow for these inset problems in Jetpack Compose apps. ## Core Features & Use Cases - Edge-to-Edge Migration: Adds enableEdgeToEdge to Activities, sets adjustResize in the manifest, and applies system insets via Scaffold padding, Material component insets, or padding modifiers. - IME and Keyboard Handling: Provides right/wrong code patterns for imePadding, fitInside(WindowInsetsRulers.Ime.current), and Scaffold contentWindowInsets to keep text fields visible without double padding. - System Bar Legibility and Lists: Configures isAppearanceLightStatusBars/isAppearanceLightNavigationBars, disables navigation bar contrast enforcement, applies contentPadding to lazy lists, and handles full-screen dialogs. - Use Case: Your Compose app's login button is hidden behind the navigation bar after targeting SDK 35. Use this Skill to apply safeDrawingPadding or Scaffold insets correctly and verify the fix with the included checklist. ## Quick Start Use the android-edge-to-edge skill to migrate my Compose app to edge-to-edge and fix any components overlapping the system bars.

Frequently Asked Questions about android-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's innerPadding, Material component windowInsets parameters, or modifiers like safeDrawingPadding. Choose only one inset method per component to avoid double padding.

How to fix a button hidden behind the navigation bar in Compose?▼

Apply Modifier.safeDrawingPadding() to the parent container or place the button inside a Scaffold that manages insets automatically. For lists, pass insets to the contentPadding parameter instead of padding the parent, which would clip scrolling content.

Does edge-to-edge require a specific Android SDK version?▼

Yes, the project must target SDK 35 or later and use Jetpack Compose. If the target SDK is lower than 35, increase it to 35 before applying the migration steps.

Why does imePadding cause extra padding with Scaffold?▼

Double padding occurs when Scaffold's contentWindowInsets is set to WindowInsets.safeDrawing, which already includes IME insets passed via innerPadding, and imePadding() is applied again. Use fitInside(WindowInsetsRulers.Ime.current) or remove one of the two inset sources.

Should I use enableEdgeToEdge from WindowCompat or ComponentActivity?▼

Prefer ComponentActivity's enableEdgeToEdge because it handles system bar icon colors automatically. If you use WindowCompat's version, you must manually set isAppearanceLightStatusBars and isAppearanceLightNavigationBars to the inverse of the device theme.