edge-to-edge

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

28|5|Updated Oct 8, 2024
One-click install
npx skills add https://github.com/kabirnayeem99/Ktor2Curl --skill edge-to-edge-kabirnayeem99
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/kabirnayeem99/Ktor2Curl/tree/main/.agents/skills/edge-to-edge
Command: npx skills add https://github.com/kabirnayeem99/Ktor2Curl --skill edge-to-edge-kabirnayeem99

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves UI layout issues where content is obscured by system bars, such as the status bar or navigation bar, and ensures proper handling of IME (soft keyboard) insets in Jetpack Compose applications.

Core Features & Use Cases

  • Adaptive Layouts: Automatically configures activities to draw behind system bars for a modern, immersive look.
  • Inset Management: Provides standardized patterns for handling system bar and IME padding to prevent content clipping or double-padding.
  • Use Case: Use this skill when your app's bottom navigation bar or floating action buttons are being covered by the system navigation bar, or when your text input fields are hidden by the keyboard.

Quick Start

Use the edge-to-edge skill to analyze my current Activity classes and apply the necessary enableEdgeToEdge configurations and inset handling modifiers.

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 UI content obscured by the status bar or navigation bar?

To fix Jetpack Compose UI content obscured by system bars, you implement edge-to-edge display by configuring window insets. This enables your activity to draw behind the status and navigation bars, applying standardized inset padding to prevent content clipping.

Why does my Android Compose bottom navigation bar get covered by the system navigation bar?

Your Android Compose bottom navigation bar gets covered because the activity is not drawing edge-to-edge or lacks proper inset consumption. Applying edge-to-edge configuration with specific inset handling modifiers ensures proper alignment with system bars.

How do I handle IME insets in Compose to stop the keyboard from hiding text input fields?

To stop the keyboard from hiding text input fields, you handle IME insets by applying Compose-specific inset consumption patterns. This adjusts UI padding dynamically based on soft keyboard visibility, ensuring text fields remain visible.

Do I need Android SDK 35 to enable edge-to-edge in Jetpack Compose applications?

Yes, you need Android SDK 35 or later to enable edge-to-edge in Jetpack Compose applications. This SDK version provides the necessary APIs and enforcement behaviors for configuring window insets and system bar appearance.

What is the best way to prevent double-padding when managing system bar insets in Compose?

The best way to prevent double-padding when managing system bar insets in Compose is to use standardized inset consumption patterns. This edge-to-edge approach ensures only one component consumes the window insets for padding, avoiding overlapping UI spacing.

How to configure enableEdgeToEdge for an Android Activity to draw behind system bars?

To configure enableEdgeToEdge for an Android Activity, you apply the specific function to your activity classes and implement Compose inset handling modifiers. This configures the window to draw adaptively behind system bars for an immersive layout.