skills.rest
klxiaoniu
klxiaoniuCOMMUNITY
Explore all skills by this author →
GitHub

edge-to-edge

Fix edge-to-edge UI insets and IME padding in Jetpack Compose apps.

174|8|Updated Jan 9, 2024
Search Tags:#android#jetpack-compose#edge-to-edge#navigation-bar#ime#system-bars#window-insets
One-click install
npx skills add https://github.com/klxiaoniu/QQVersionList --skill edge-to-edge-klxiaoniu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/klxiaoniu/QQVersionList/tree/main/.agents/skills/edge-to-edge
Command: npx skills add https://github.com/klxiaoniu/QQVersionList --skill edge-to-edge-klxiaoniu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of Jetpack Compose layouts being obscured or overlapped by the status bar, navigation bar, or IME (soft keyboard), and of system bar icon legibility issues.

Core Features & Use Cases

  • Edge-to-edge migration: Enables proper rendering by adding enableEdgeToEdge before setContent and ensuring target SDK requirements are met.
  • System inset correctness: Applies insets using the recommended Scaffold/Material patterns (or safe drawing padding) so critical UI stays tappable without clipping or double-padding.
  • IME (keyboard) troubleshooting: Fixes text field visibility by verifying android:windowSoftInputMode="adjustResize" and choosing fitInside(WindowInsetsRulers.Ime.current) or correctly-ordered imePadding().

Quick Start

Migrate each Activity in your Jetpack Compose app to edge-to-edge by adding enableEdgeToEdge before setContent, enabling adjustResize for soft keyboard screens, and updating your layout to consume/apply the correct system and IME insets so lists, FABs, text fields, and system bar icons behave 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 content being obscured by the status bar and navigation bar?▼

To fix Compose content being obscured by system bars, call enableEdgeToEdge before setContent and apply system insets using Scaffold contentPadding or safe drawing modifiers. This ensures critical UI stays tappable and visible without clipping.

Why does the soft keyboard overlap my TextField in my Android Compose app?▼

The soft keyboard overlaps TextFields when windowSoftInputMode is not set to adjustResize or imePadding is misapplied. Fix this by enabling adjustResize in the manifest and applying correctly-ordered imePadding or fitInside with WindowInsetsRulers.Ime.current.

What is the best way to enable edge-to-edge in a multi-Activity Jetpack Compose app?▼

The best way to enable edge-to-edge in multi-Activity Compose apps is adding enableEdgeToEdge before setContent, ensuring target SDK requirements are met, and updating layouts to consume insets via Scaffold patterns so lists and FABs behave correctly.

How do I avoid double padding when applying window insets for edge-to-edge rendering?▼

Avoid double padding when applying window insets by using correctly ordered imePadding or fitInside, and consuming insets through Scaffold contentPadding or Material windowInsets rather than applying multiple manual padding modifiers.

Do I need adjustResize in the manifest for edge-to-edge IME handling in Compose?▼

Yes, you need android:windowSoftInputMode set to adjustResize in the manifest for edge-to-edge IME handling. This allows the system to resize the window for the keyboard so imePadding and fitInside can position TextField content correctly.

Can I use Scaffold to handle system bar insets for edge-to-edge layouts?▼

Yes, you can use Scaffold to handle system bar insets for edge-to-edge layouts by applying Material windowInsets and contentPadding. This recommended pattern ensures safe-area content stays visible without overlapping system bars or causing double padding.

Related Skills

Explore More Software Engineering Skills→
hanamizukihanamizuki
127

edge-to-edge

Migrate Android apps to edge-to-edge UI with insets handling in Jetpack Compose.

Community
Advanced
thinhtt264thinhtt264

xml-to-compose-migration

Convert Android XML layouts to Jetpack Compose composables.

Community
Intermediate
mymx2mymx2
4

edge-to-edge

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

Community
Advanced
yash-gargyash-garg

edge-to-edge

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

Community
Advanced