adaptive

Implement adaptive Jetpack Compose UI patterns for Android form factors.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the complexity of creating consistent, high-quality user interfaces that function seamlessly across the diverse range of Android form factors, from small phones to large-screen foldables, tablets, and desktop environments.

Core Features & Use Cases

  • Adaptive Navigation: Automatically transitions between bottom navigation bars and navigation rails based on screen width.
  • Multi-pane Layouts: Implements robust list-detail and supporting-pane patterns using Navigation 3 Scenes.
  • Responsive Grids: Dynamically adjusts column counts and layout density using the experimental Grid API and MediaQuery system.
  • Use Case: A developer can use this Skill to transform a static phone-only app into a responsive application that displays a list-detail view on tablets and a navigation rail on desktop, ensuring optimal usability on every device.

Quick Start

Use the adaptive skill to migrate the current navigation structure to a NavigationSuiteScaffold and implement a list-detail scene strategy for the main feed.

Frequently Asked Questions about adaptive

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

FAQPage Schema
How do I build responsive Jetpack Compose UIs for foldables and tablets?

Build responsive Jetpack Compose UIs by integrating Navigation 3 Scenes, MediaQuery-based device capability detection, and the experimental Grid API to dynamically adjust layouts across diverse Android form factors.

How does adaptive navigation transition between bottom bars and navigation rails in Android?

Adaptive navigation transitions between bottom navigation bars and navigation rails automatically based on screen width detection, utilizing Material 3 adaptive design principles and the NavigationSuiteScaffold.

What is the best way to implement list-detail layouts for Android multi-pane views?

Implement list-detail layouts for Android multi-pane views by using Navigation 3 Scenes to construct robust supporting-pane patterns that adapt dynamically across tablets and desktop environments.

Can I use MediaQuery to adjust grid column counts dynamically in Compose?

You can use the MediaQuery system with the experimental Compose Compose Grid API to dynamically adjust column counts and layout density based on real-time device capability detection.

Do I need experimental Compose layout APIs to create responsive Android grids?

You need experimental Compose layout APIs and Material 3 adaptive design principles to create responsive Android grids and multi-pane layouts that adhere to current form factor guidelines.

Why migrate a static phone-only app to a NavigationSuiteScaffold?

Migrate a static phone-only app to a NavigationSuiteScaffold to transform it into a responsive application that displays list-detail scenes on tablets and navigation rails on desktop environments.