skills.rest
kabindra-shrestha
kabindra-shresthaCOMMUNITY
Explore all skills by this author →
GitHub

edge-to-edge

Migrates Jetpack Compose apps to adaptive edge-to-edge layouts with correct system bar insets.

3|Updated Aug 4, 2024
Search Tags:#migration#android#jetpack compose#edge-to-edge#ime#window insets#system bars
One-click install
npx skills add https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform --skill edge-to-edge-kabindra-shrestha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform/tree/main/.agents/skills/system/edge-to-edge
Command: npx skills add https://github.com/kabindra-shrestha/Clean-Architecture-Kotlin-Compose-Multiplatform --skill edge-to-edge-kabindra-shrestha

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 systematic migration workflow to fix overlapping components, IME insets, and system bar legibility 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 text fields stay visible when the keyboard opens, with right/wrong code patterns for Scaffold and non-Scaffold layouts. - System Bar Legibility & Lists: Configures status/navigation bar icon contrast, navigation bar contrast enforcement, list contentPadding, and full-screen dialog insets. - Use Case: Your Compose app's bottom button is hidden behind the navigation bar after targeting SDK 35. Use this Skill to detect every affected Activity and component, apply the correct inset handling, and verify with the included checklist. ## Quick Start Ask the assistant to migrate your Compose app to edge-to-edge and fix any UI elements overlapping the status bar, navigation bar, 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's innerPadding, safeDrawingPadding, or windowInsetsPadding modifiers. Pass insets to list contentPadding rather than padding the parent container.

How to fix Compose text fields hidden by the keyboard?▼

Set android:windowSoftInputMode="adjustResize" in the AndroidManifest, then apply 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, where edge-to-edge is enforced on Android 15. If the target SDK is lower than 35, increase it to 35 before applying the migration steps.

Why is my Compose button overlapping the navigation bar?▼

With edge-to-edge enabled, content draws behind system bars by default. Wrap the component in a Scaffold, or apply Modifier.safeDrawingPadding() or windowInsetsPadding(WindowInsets.safeDrawing) so critical UI stays tappable.

Should I use imePadding or fitInside for keyboard insets?▼

Prefer Modifier.fitInside(WindowInsetsRulers.Ime.current) because it reduces jank and avoids extra padding from unconsumed insets upstream. Do not combine imePadding with a Scaffold whose contentWindowInsets already includes IME insets, as that causes double padding.

Related Skills

Explore More Software Engineering Skills→
tajemniktvtajemniktv
3

edge-to-edge

Configure edge-to-edge support for Jetpack Compose Android apps targeting SDK 35.

Community
Intermediate
22Teikk22Teikk

shipping-and-launch

Validates Android releases with pre-launch checklists, staged rollouts, and rollback plans.

Community
Advanced
citytexicitytexi
1

edge-to-edge

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

Community
Intermediate
AerisG222AerisG222

xml-to-compose-migration

Convert Android XML layouts and View components into Jetpack Compose code.

Community
Intermediate