edge-to-edge

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

2|Updated Jun 21, 2026
One-click install
npx skills add https://github.com/IsKenKenYa/skills --skill edge-to-edge-iskenkenya
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/IsKenKenYa/skills/tree/main/skills/android/system/edge-to-edge
Command: npx skills add https://github.com/IsKenKenYa/skills --skill edge-to-edge-iskenkenya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Android apps targeting SDK 35+ must draw edge-to-edge, but UI components often get obscured by the status bar or navigation bar, IME keyboards cover text fields, and system bar icons become unreadable. This Skill provides a systematic migration and troubleshooting workflow for these issues in Jetpack Compose apps. ## Core Features & Use Cases - Edge-to-Edge Migration: Adds enableEdgeToEdge to Activities, configures adjustResize in the manifest, and applies system insets via Scaffold padding, inset modifiers, or WindowInsetsRulers. - IME and Keyboard Handling: Ensures TextField inputs stay visible when the soft keyboard opens, with right/wrong code patterns for Scaffold and non-Scaffold layouts. - System Bar Legibility & Lists: Configures status/navigation bar icon contrast, translucent status bar protection, list contentPadding, FAB placement, and full-screen dialog edge-to-edge support. - Use Case: A Compose app targeting SDK 35 has buttons hidden behind the navigation bar and a login field covered by the keyboard. This Skill walks through detecting each issue and applying the correct inset fix, ending with a verification checklist and build. ## Quick Start Migrate my Jetpack Compose app to edge-to-edge and fix any UI components obscured by 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 add edge-to-edge support to a Jetpack Compose app?

Call enableEdgeToEdge() before setContent in each Activity's onCreate, then apply system insets using Scaffold innerPadding, safeDrawingPadding, or windowInsetsPadding modifiers. Pass insets to list contentPadding rather than padding the parent container.

How to keep TextField visible above the keyboard in Compose?

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

Does edge-to-edge require a minimum target SDK version?

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

Why does my Compose app have double padding when the keyboard opens?

Double padding occurs when IME insets are applied twice, such as using Scaffold with contentWindowInsets containing IME insets plus imePadding() on the child. Choose only one inset-handling method per hierarchy level.

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.