edge-to-edge

Fix Android Jetpack Compose layouts for edge-to-edge rendering and system window insets.

Updated Apr 5, 2026
One-click install
npx skills add https://github.com/inehemiasm/AiAssistant --skill edge-to-edge-inehemiasm
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/inehemiasm/AiAssistant/tree/main/skills/edge-to-edge
Command: npx skills add https://github.com/inehemiasm/AiAssistant --skill edge-to-edge-inehemiasm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps Android developers resolve system bar overlap, hidden UI elements, keyboard inset problems, and poor edge-to-edge behavior in Jetpack Compose applications.

Core Features & Use Cases

  • Edge-to-Edge Migration: Guides the addition of adaptive edge-to-edge support using modern Android APIs and Compose patterns.
  • Inset Handling: Helps correctly apply system bar, IME, Scaffold, list, FAB, and dialog insets without duplicate padding.
  • Use Case: When a Compose app has buttons covered by navigation bars or text fields hidden by the keyboard, use this Skill to analyze Activities and apply the required fixes.

Quick Start

Use the edge-to-edge skill to update my Jetpack Compose app so all screens handle system bars and keyboard insets correctly.

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 buttons covered by the Android navigation bar?

To fix Jetpack Compose buttons covered by the navigation bar, apply adaptive edge-to-edge rendering and use inset-aware modifiers like windowInsetsPadding to prevent system bars from overlapping interactive UI elements.

Why does the keyboard hide my text fields in Android Compose?

The keyboard hides text fields in Android Compose when IME window insets are not applied correctly. You must configure manifest keyboard resizing and apply IME inset padding to push UI elements above the keyboard.

What is the best way to handle system bar insets in Compose without duplicate padding?

The best way to handle system bar insets in Compose without duplicate padding is to apply inset-aware modifiers specifically for Scaffold, lists, FABs, and dialogs, ensuring edge-to-edge configurations do not add redundant spacing.

How do I enable edge-to-edge mode for an Android Compose activity?

To enable edge-to-edge mode for an Android Compose activity, call the proper enableEdgeToEdge configuration and implement system bar appearance handling so layouts render behind system bars correctly.

Does edge-to-edge migration work with existing Compose dialogs and floating action buttons?

Edge-to-edge migration works with Compose dialogs and floating action buttons by applying specialized inset handling to these components. This ensures FABs and dialogs avoid overlapping system bars while maintaining proper UI behavior.