edge-to-edge

Configure Android Jetpack Compose apps for edge-to-edge display with system bar and IME insets.

4|Updated Jun 10, 2026
One-click install
npx skills add https://github.com/mymx2/foreman --skill edge-to-edge-mymx2
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/mymx2/foreman/tree/main/.qoder/skills.collected/skills/edge-to-edge
Command: npx skills add https://github.com/mymx2/foreman --skill edge-to-edge-mymx2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves UI layout conflicts where content is obscured by system bars or incorrectly handled by the IME, ensuring a seamless, modern Android user experience.

Core Features & Use Cases

  • Adaptive Layouts: Automatically configures Activities to draw behind system bars while maintaining content legibility.
  • Inset Management: Provides standardized patterns for handling system bar and IME insets using Scaffold or manual padding modifiers.
  • Use Case: Use this skill to fix a screen where the bottom navigation bar overlaps with your primary action buttons or where the soft keyboard hides input fields in a form.

Quick Start

Use the edge-to-edge skill to audit the current Activity and apply the recommended inset handling patterns to all scrollable lists and input fields.

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 content obscured by system bars in Android Compose?

Fix content obscured by system bars in Android Compose by configuring edge-to-edge display. Apply standard inset handling patterns, like Scaffold contentWindowInsets or custom padding modifiers, to ensure proper padding and prevent content clipping.

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

Prevent the soft keyboard from hiding input fields in Jetpack Compose by managing IME interactions. Configure edge-to-edge display and apply appropriate insets to ensure input fields remain visible when the keyboard is open.

What is edge-to-edge display and when do I need it for Android UI?

Edge-to-edge display is a layout approach where your app draws behind system bars. You need it for Android UI when you want a modern, seamless experience and must manage system bar insets to maintain content legibility.

Does this edge-to-edge approach work with Scaffold contentWindowInsets?

Yes, the edge-to-edge approach works directly with Scaffold contentWindowInsets. It implements standard inset handling patterns using Scaffold and manual padding modifiers to target Activities and UI components across device configurations.

Why does my bottom navigation bar overlap with primary action buttons in Compose?

Your bottom navigation bar overlaps with primary action buttons because your app lacks proper system bar insets. Apply edge-to-edge display with custom padding modifiers to resolve the layout conflict and ensure visibility.