skills.rest
shirulot
shirulotCOMMUNITY
Explore all skills by this author →
GitHub

edge-to-edge

Implement adaptive edge-to-edge display support for Android Jetpack Compose apps.

Updated Jul 6, 2026
Search Tags:#ui#android#mobile-development#compose#edge-to-edge#insets
One-click install
npx skills add https://github.com/shirulot/codex-skill --skill edge-to-edge-shirulot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/shirulot/codex-skill/tree/main/edge-to-edge
Command: npx skills add https://github.com/shirulot/codex-skill --skill edge-to-edge-shirulot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves UI layout issues in Jetpack Compose applications where content is obscured by system bars, navigation bars, or the IME, ensuring a seamless and modern edge-to-edge user experience.

Core Features & Use Cases

  • System Bar Integration: Provides standardized patterns for applying window insets to ensure critical UI elements remain tappable and visible.
  • IME Handling: Offers robust solutions for keyboard-aware layouts, preventing content overlap and excessive padding when the soft keyboard appears.
  • Use Case: Use this skill to refactor a legacy Compose screen that is currently being clipped by the status bar or navigation bar, or to fix a login screen where the keyboard hides the input fields.

Quick Start

Use the edge-to-edge skill to analyze my current Activity and apply the recommended inset handling for system bars and IME.

Frequently Asked Questions about edge-to-edge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Jetpack Compose content being obscured by the status bar or navigation bar?▼

To fix Compose content obscured by system bars, apply adaptive edge-to-edge display support by managing system window insets. This ensures critical UI elements within Scaffolds and LazyLists remain visible and properly aligned with status and navigation bars.

How do I prevent the Android soft keyboard from hiding input fields in Compose?▼

Prevent the soft keyboard from hiding input fields by applying IME padding to your Compose layout. This approach manages window insets to create keyboard-aware layouts, ensuring input fields stay visible and tappable when the IME appears.

Do I need Android SDK 35 to implement edge-to-edge in Jetpack Compose?▼

Yes, you need Android SDK 35 or later to implement edge-to-edge display support in Jetpack Compose. Adhering to Compose window inset APIs on this SDK version ensures proper layout consistency with system bars and soft keyboards.

What is the best way to refactor a legacy Compose screen clipped by system bars?▼

The best way to refactor a legacy Compose screen clipped by system bars is to apply standardized window inset handling patterns. This resolves layout issues by ensuring UI components respect system bar boundaries and maintain seamless edge-to-edge alignment.

Why does my Compose LazyList overlap with the system navigation bar?▼

Your Compose LazyList overlaps the navigation bar because it lacks proper window inset management. Applying edge-to-edge inset handling ensures list items and UI components calculate padding correctly to avoid being obscured by system bars.

Related Skills

Explore More Software Engineering Skills→
Kaito-DogiKaito-Dogi

edge-to-edge

Migrate Android Jetpack Compose apps to support edge-to-edge displays.

Community
Intermediate
kabirnayeem99kabirnayeem99
28

edge-to-edge

Migrate Android Jetpack Compose apps to edge-to-edge display with window insets.

Community
Advanced
charleshall888charleshall888
1

edge-to-edge

Migrates Jetpack Compose apps to edge-to-edge layouts with insets handling.

Community
Advanced
youfengknightyoufengknight
2

edge-to-edge

Correct system bar overlap and IME handling in Jetpack Compose layouts.

Community
Intermediate