skills.rest
youfengknight
youfengknightCOMMUNITY
Explore all skills by this author →
GitHub

edge-to-edge

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

2|Updated May 12, 2026
Search Tags:#android#jetpack compose#edge-to-edge#insets#ime#system bars#windowSoftInputMode
One-click install
npx skills add https://github.com/youfengknight/Android-Code-Skills --skill edge-to-edge-youfengknight
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/youfengknight/Android-Code-Skills/tree/main/android-skills/system/edge-to-edge
Command: npx skills add https://github.com/youfengknight/Android-Code-Skills --skill edge-to-edge-youfengknight

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you migrate an Android Jetpack Compose app to proper adaptive edge-to-edge rendering so system bars no longer overlap UI, and so the keyboard (IME) doesn’t hide inputs.

Core Features & Use Cases

  • Adaptive edge-to-edge migration: Adds enableEdgeToEdge per Activity and ensures full-screen content behaves correctly with status/navigation bars.
  • Insets + padding correctness: Guides you to apply system insets via Scaffold/PaddingValues and safe drawing/content modifiers so lists, FABs, and other components stay tappable.
  • IME troubleshooting for text inputs: Ensures adjustResize is set and uses the recommended fitInside(WindowInsetsRulers.Ime.current)/imePadding() patterns to avoid jank and double-padding.

Use cases include resolving cut-off buttons and lists behind the top/bottom bars, fixing dark/light system bar icon legibility, and repairing Compose input fields that get obscured when the keyboard opens.

Quick Start

Apply the skill to your Compose app by enabling edge-to-edge in every Activity before setContent, setting adjustResize for Activities using a soft keyboard, and updating your layouts to consume/apply insets correctly (especially TextField/OutlinedTextField/BasicTextField) to keep content visible when the IME appears.

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 system bars overlapping UI in Jetpack Compose?▼

To fix system bars overlapping UI in Jetpack Compose, enable edge-to-edge in your Activity and apply system insets via Scaffold innerPadding or safe drawing modifiers so lists and FABs stay tappable.

Why does the software keyboard hide my text input fields in Compose?▼

The software keyboard hides text input fields if adjustResize is not set or insets are mishandled. Use IME-safe patterns like fitInside(WindowInsetsRulers.Ime.current) or imePadding() to keep inputs visible.

What is the best way to apply window insets for Compose edge-to-edge layouts?▼

The best way to apply window insets for Compose edge-to-edge layouts is consuming system insets through Scaffold PaddingValues and inset-aware modifiers, ensuring components avoid double padding while remaining visible behind status and navigation bars.

How do I prevent double padding when using imePadding in Jetpack Compose?▼

To prevent double padding when handling the IME in Jetpack Compose, use the recommended fitInside(WindowInsetsRulers.Ime.current) pattern instead of stacking multiple inset modifiers, avoiding jank and overlapping padding values.

Does enabling edge-to-edge require adjustResize for all Activities?▼

Enabling edge-to-edge requires adjustResize specifically for Activities using a soft keyboard. This configuration ensures the window resizes correctly when the IME appears, preventing text inputs from being obscured.

How do I resolve cut-off buttons behind navigation bars in Compose?▼

To resolve cut-off buttons behind navigation bars in Compose, activate enableEdgeToEdge per Activity and apply safe content padding so interactive elements consume the correct system bar insets and remain fully tappable.

Related Skills

Explore More Software Engineering Skills→
charleshall888charleshall888
1

edge-to-edge

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

Community
Advanced
yash-gargyash-garg

edge-to-edge

Migrate Jetpack Compose apps to adaptive edge-to-edge layouts with inset handling.

Community
Advanced
premex-abpremex-ab
1

edge-to-edge

Migrate Android Jetpack Compose apps to adaptive edge-to-edge rendering with inset handling.

Official
Advanced
ekawijayasusiloekawijayasusilo

edge-to-edge

Migrate Jetpack Compose Android apps to adaptive edge-to-edge layouts with system bar and IME inset handling.

Community
Advanced