skills.rest
Kaito-Dogi
Kaito-DogiCOMMUNITY
Explore all skills by this author →
𝕏@Kaito_DogiGitHub

adaptive

Adapt Android UIs with Jetpack Compose MediaQuery for responsive layouts and navigation.

Updated Jan 11, 2026
Search Tags:#ui#responsive design#navigation#adaptive#android
One-click install
npx skills add https://github.com/Kaito-Dogi/smopin --skill adaptive-kaito-dogi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adaptive
Source: https://github.com/Kaito-Dogi/smopin/tree/main/.agents/skills/android-skills/jetpack-compose/adaptive
Command: npx skills add https://github.com/Kaito-Dogi/smopin --skill adaptive-kaito-dogi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires androidx.compose.ui, androidx.compose.material3, androidx.navigation, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers create adaptive user interfaces that automatically adjust to different screen sizes and devices using Jetpack Compose.

Core Features & Use Cases

  • Adaptive Navigation: Handle navigation bar visibility and multi-pane layouts for list-detail and supporting pane scenarios.
  • Responsive Layouts: Use Grid and FlexBox to create responsive layouts that adapt to screen size changes.
  • MediaQuery: Utilize MediaQuery to access device capabilities and trigger layout updates based on window size, posture, and pointer precision.

Quick Start

To adapt your app's navigation bar, use the adaptive skill with the command: 'Make the navigation bar adaptive'.

Frequently Asked Questions about adaptive

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

FAQPage Schema
How do I create responsive layouts for Android apps using Jetpack Compose?▼

Responsive layouts in Jetpack Compose can be built using Grid and FlexBox to automatically adapt your UI to different screen sizes. This Skill provides guidance on implementing these components to handle screen size changes effectively.

How does MediaQuery work for adaptive UI in Android?▼

MediaQuery in Android adaptive UI accesses device capabilities and triggers layout updates based on window size, posture, and pointer precision. This allows your Compose UI to dynamically respond to physical device changes.

What's the best way to handle adaptive navigation in Jetpack Compose?▼

Adaptive navigation in Jetpack Compose handles navigation bar visibility and multi-pane layouts for list-detail and supporting pane scenarios. This Skill guides you through configuring these patterns using the Material 3 Adaptive Library.

Do I need the Material 3 Adaptive Library to build adaptive Android UIs?▼

Yes, the Material 3 Adaptive Library is required alongside Jetpack Compose knowledge to effectively use this Skill. It provides the necessary components for adaptive navigation and responsive layouts.

Can I use this Skill to adapt my Android app for foldable devices?▼

Yes, by utilizing MediaQuery you can trigger layout updates based on device posture and window size. This allows your Jetpack Compose UI to adapt to foldable devices and varying window configurations.

Related Skills

Explore More Software Engineering Skills→
yashvinthanyashvinthan

mobile-android-design

Design native Android UIs with Material Design 3 and Jetpack Compose.

Community
Intermediate
ekawijayasusiloekawijayasusilo

adaptive

Implement adaptive Jetpack Compose layouts with Navigation 3 and MediaQuery.

Community
Advanced
mrodrigues1mrodrigues1

mobile-android-design

Implement Material Design 3 patterns in Android apps with Jetpack Compose.

Community
Intermediate
p-o-ke-naep-o-ke-nae

mobile-android-design

Design Android interfaces using Material Design 3 and Jetpack Compose.

Community
Advanced