edge-to-edge

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

Updated Jan 11, 2026
One-click install
npx skills add https://github.com/Kaito-Dogi/smopin --skill edge-to-edge-kaito-dogi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/Kaito-Dogi/smopin/tree/main/.agents/skills/android-skills/system/edge-to-edge
Command: npx skills add https://github.com/Kaito-Dogi/smopin --skill edge-to-edge-kaito-dogi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers address common issues with edge-to-edge support in Android Jetpack Compose apps, ensuring a seamless user experience.

Core Features & Use Cases

  • Edge-to-Edge Support: Enables adaptive edge-to-edge support for UI components.
  • System Bar Management: Handles navigation bar and status bar visibility and legibility.
  • IME Adjustment: Ensures that input fields are not obscured by the IME.
  • Use Case: If your app has UI components that overlap with the navigation bar or status bar, this skill can help you adjust the layout and improve the user interface.

Quick Start

Use the edge-to-edge skill to update your app's Activity to enable edge-to-edge support and ensure that your input fields are properly displayed with the IME active.

Frequently Asked Questions about edge-to-edge

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

FAQPage Schema
How do I enable edge-to-edge display for my Android Jetpack Compose app?

You enable edge-to-edge display by updating your app's Activity to draw UI behind system bars. This handles navigation bars and status bars for a seamless adaptive layout.

Why does my Compose UI overlap with the navigation bar and status bar?

Your Compose UI overlaps with system bars because edge-to-edge support is active without proper layout adjustments. You must apply window insets to manage navigation bar and status bar legibility.

How do I prevent the keyboard from obscuring input fields in Android Compose?

To prevent the keyboard from obscuring input fields, you apply IME visibility adjustments. This ensures your input fields remain properly displayed and accessible while the IME is active.

Does edge-to-edge support require a specific Android SDK version?

Edge-to-edge support for Jetpack Compose requires Android SDK 35 or later. You need this minimum SDK version to properly handle system bars and adaptive layouts.

What is the best way to manage system bar visibility in Jetpack Compose?

The best way to manage system bar visibility is using edge-to-edge solutions that handle navigation bars and status bars natively. This ensures legibility and adaptive layout across different devices.