skills.rest
uyelikanil
uyelikanilCOMMUNITY
Explore all skills by this author →
GitHub

edge-to-edge

Migrate Android Jetpack Compose apps to edge-to-edge layouts with WindowInsets.

Updated May 5, 2023
Search Tags:#ui#android#compose#edge-to-edge#insets#system bars
One-click install
npx skills add https://github.com/uyelikanil/AwesomeSunsetWallpapers --skill edge-to-edge-uyelikanil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: edge-to-edge
Source: https://github.com/uyelikanil/AwesomeSunsetWallpapers/tree/main/.agents/skills/edge-to-edge
Command: npx skills add https://github.com/uyelikanil/AwesomeSunsetWallpapers --skill edge-to-edge-uyelikanil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves UI layout issues where content is obscured by system bars, navigation bars, or the IME (soft keyboard) in Jetpack Compose applications.

Core Features & Use Cases

  • System Bar Integration: Properly aligns UI components to ensure they are not hidden behind status or navigation bars.
  • IME Inset Handling: Manages keyboard visibility to prevent content overlap and ensure input fields remain accessible.
  • Adaptive Layouts: Provides patterns for using Scaffolds and inset modifiers to maintain a consistent, modern look across different device configurations.

Quick Start

Use the edge-to-edge skill to analyze my current Activity implementation and apply the necessary inset handling to fix overlapping UI components.

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 Jetpack Compose?▼

To fix content obscured by system bars in Jetpack Compose, you need to apply edge-to-edge layouts and manage WindowInsets. This ensures UI components are properly padded and remain visible behind status or navigation bars.

What is the best way to handle IME insets for text fields in Android Compose?▼

The best way to handle IME insets for text fields in Android Compose is by applying WindowInsets modifiers within the Compose hierarchy. This manages keyboard visibility to prevent content overlap and keeps input fields accessible.

How do I migrate an Android app to edge-to-edge layouts for SDK 35+?▼

To migrate an Android app to edge-to-edge layouts for SDK 35+, analyze your current Activity implementation and apply necessary inset handling. You must use Scaffolds and inset modifiers to maintain a consistent full-screen look.

Why does my FAB overlap with the navigation bar in edge-to-edge mode?▼

Your FAB overlaps with the navigation bar in edge-to-edge mode because WindowInsets modifiers are not correctly applied within the Compose hierarchy. Properly managing system bar insets ensures UI components receive correct padding and visibility.

Can I use Scaffolds to manage system bar insets in Compose?▼

Yes, you can use Scaffolds to manage system bar insets in Compose. Scaffolds provide adaptive layout patterns that properly align UI components and ensure they are not hidden behind status or navigation bars across different device configurations.

Related Skills

Explore More Software Engineering Skills→
tajemniktvtajemniktv
3

edge-to-edge

Configure edge-to-edge support for Jetpack Compose Android apps targeting SDK 35.

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
iadr-deviadr-dev
2

edge-to-edge

Fix Android Jetpack Compose layouts overlapping system bars and IME keyboard.

Community
Advanced
youfengknightyoufengknight
2

edge-to-edge

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

Community
Intermediate