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

adaptive

Implement adaptive UI patterns in Jetpack Compose with Navigation 3 and MediaQuery.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the challenge of creating a consistent, high-quality user experience across a fragmented ecosystem of Android devices, including phones, tablets, foldables, desktops, and XR devices.

Core Features & Use Cases

  • Adaptive Navigation: Automatically transitions between bottom navigation bars and navigation rails based on screen width.
  • Multi-pane Layouts: Implements list-detail and supporting-pane patterns using Navigation 3 SceneStrategies.
  • Responsive Grids: Provides tools to create flexible, adaptive grid layouts that respond to container size changes.
  • Use Case: A developer can use this skill to transform a single-pane mobile app into a multi-pane tablet experience without rewriting the core business logic.

Quick Start

Use the adaptive skill to migrate the current navigation bar to a NavigationSuiteScaffold and implement a list-detail layout for the main screen.

Frequently Asked Questions about adaptive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement adaptive UI in Jetpack Compose for tablets and foldables?▼

Adaptive UI in Jetpack Compose uses NavigationSuiteScaffold to automatically transition between bottom navigation bars and navigation rails, while responsive Grid and FlexBox layouts handle multi-pane list-detail patterns across diverse form factors.

What's the best way to migrate a single-pane mobile app to a multi-pane tablet layout?▼

Migrate to a multi-pane tablet layout by implementing Navigation 3 SceneStrategies to manage list-detail and supporting-pane patterns, allowing you to transform the UI without rewriting core business logic.

How does MediaQuery work for detecting window size changes in Compose?▼

MediaQuery in Compose detects dynamic device capabilities and window size changes, providing the necessary inputs to trigger responsive layout strategy updates and ensuring UI consistency across different screen dimensions.

Can I use Navigation 3 with adaptive Material 3 components across different Android devices?▼

Yes, Navigation 3 integrates with adaptive Material 3 components like NavigationSuiteScaffold to manage multi-pane SceneStrategies, ensuring consistent navigation and layout across phones, tablets, foldables, desktops, and XR devices.

When do I need to use FlexBox versus Grid for responsive Compose layouts?▼

Use FlexBox and Grid for responsive Compose layouts when you need flexible container sizes; Grid structures adaptive grid layouts that respond to size changes, while FlexBox manages dynamic element wrapping across diverse form factors.

Related Skills

Explore More Software Engineering Skills→
Shaarav4795Shaarav4795

mobile-android-design

Implement Material Design 3 and Jetpack Compose patterns for adaptive Android interfaces.

Community
Advanced
rock-hurock-hu

xml-to-compose-migration

Convert Android XML layouts to Jetpack Compose equivalents.

Community
Intermediate
shirulotshirulot

adaptive

Implement adaptive Android UI layouts with Jetpack Compose and Material 3.

Community
Advanced
ekawijayasusiloekawijayasusilo

adaptive

Implement adaptive Jetpack Compose layouts with Navigation 3 and MediaQuery.

Community
Advanced