Edge To Edge
Use this skill to migrate your Jetpack Compose app to add adaptive edge-to-edge support...
Install
npx skills add android/skills --skill edge-to-edge -g -a claude-code -y- Repository
- android/skills10.2k
- Category
- Design
- Updated
- 6d ago
- License
- Complete terms in LICENSE.txt
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
Prerequisites
- Project MUST use Android Jetpack Compose.
- Project MUST target SDK 35 or later. If the SDK is lower than 35, increase the SDK to 35.
Step 1: plan
- Locate and analyze all Activity classes to detect which have existing edge-to-edge support. For every Activity without edge-to-edge, plan to make each Activity edge-to-edge.
- In each Activity, Locate and analyze all lists and FAB components to detect which have existing edge-to-edge support. For every component without edge-to-edge support, plan to make each of these components edge-to-edge.
- In each Activity, scan for
TextField,OutlinedTextField, orBasicTextField. If found, then you MUST verify the IME doesn't hide the input field by following the IME section of this skill.
Step 2: add edge-to-edge support
- Add
enableEdgeToEdgebeforesetContentinonCreatein each Activity that does not already callenableEdgeToEdge. - Add
android:windowSoftInputMode="adjustResize"in the AndroidManifest.xml for all Activities that use a soft keyboard.
Step 3: apply insets
-
The app MUST apply system insets, or align content to rulers, so critical UI remains tappable. Choose only one method to avoid double padding:
- PREFERRED: When available, use
Scaffolds and passPaddingValuesto the content lambda.
<br />Scaffold { innerPadding -> // innerPadding accounts for system bars and any Scaffold components LazyColumn( modifier = Modifier .fillMaxSize() .consumeWindowInsets(innerPadding), contentPadding = innerPadding ) { /* Content */ } }- PREFERRED: When available, use the automatic inset handling or padding modifiers in material components.
- PREFERRED: When available, use


