edge-to-edge
Use this skill to migrate your Jetpack Compose app to add adaptive edge-to-edge support and troubleshoot common issues. Use this skill to fix UI components (like buttons or lists) that are obscured by or overlapping with the navigation bar or status bar, fix IME insets, and fix system bar legibility.
Security Assessment
About edge-to-edge
Edge-to-Edge is an authored-by-Google skill that migrates Jetpack Compose apps to adaptive edge-to-edge display and troubleshoots the layout problems that come with it. Modern Android draws app content behind the system status and navigation bars; without proper inset handling, buttons, lists, and text fields get obscured or overlapped. This skill provides a prescriptive, step-by-step method to enable edge-to-edge correctly and fix the resulting UI issues.
The workflow is a three-step plan: locate Activities and components lacking edge-to-edge support, add `enableEdgeToEdge` before `setContent` plus `android:windowSoftInputMode="adjustResize"` in the manifest, then apply system insets using exactly one method to avoid double padding. It documents preferred approaches (Scaffold `PaddingValues`, Material 3 components that self-manage safe areas, `safeDrawingPadding`, `WindowInsetsRulers`) and explicit warnings, such as not applying padding to a `NavigationSuiteScaffold` parent or to Material 2 App Bar parents. A dedicated IME section covers keeping input fields visible above the soft keyboard using `fitInside(WindowInsetsRulers.Ime.current)` or `imePadding`, with correct/incorrect code patterns.
It targets Android developers using Jetpack Compose who need their app to render correctly under the system bars and keyboard. Prerequisites are strict: the project MUST use Compose and target SDK 35 or later. Typical use cases are fixing content hidden behind navigation bars, resolving IME insets so keyboards don't cover text fields, and improving system-bar legibility. It is a concise, single-file guidance skill grounded in official Compose inset APIs.
FAQ
What does this skill fix?
UI components obscured by or overlapping the status/navigation bars, input fields hidden by the soft keyboard (IME insets), and system-bar legibility, by migrating a Compose app to adaptive edge-to-edge.
What are the requirements?
The project must use Android Jetpack Compose and target SDK 35 or later. If the SDK is lower than 35 the skill directs you to raise it to 35.
How do I avoid double padding?
Apply system insets with exactly one method per component, for example Scaffold PaddingValues, Material 3 components' automatic handling, safeDrawingPadding, or WindowInsetsRulers, never combining overlapping approaches.
How does it handle the soft keyboard?
It sets windowSoftInputMode=adjustResize in the manifest and keeps the focused field visible using Modifier.fitInside(WindowInsetsRulers.Ime.current) (preferred) or imePadding placed before verticalScroll.
Does it work with adaptive scaffolds?
Yes, but it warns that adaptive scaffolds like NavigationSuiteScaffold don't propagate PaddingValues, so you must apply insets to individual screens and must not apply safeDrawingPadding to the scaffold parent.
Install edge-to-edge
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
android/skills