skills.rest
piyushverma0
piyushverma0COMMUNITY
Explore all skills by this author →
WebsiteGitHub

material3

Apply Material 3 expressive components to Jetpack Compose UIs with theming and usage patterns.

14|Updated Mar 14, 2026
Search Tags:#theming#ui#android#compose#fab#material3#topappbar
One-click install
npx skills add https://github.com/piyushverma0/android-agent-skills --skill material3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material3
Source: https://github.com/piyushverma0/android-agent-skills/tree/main/skills/material3
Command: npx skills add https://github.com/piyushverma0/android-agent-skills --skill material3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Android UI often suffers from inconsistent design across screens due to varying component usage and manual theming. Material 3 Expressive components provide cohesive visuals, motion, and color schemes to unify the user interface across an app.

Core Features & Use Cases

  • TopAppBar variants (Standard, Large, CenterAligned) with proper scroll behavior and theming.
  • FAB variants (Standard, Extended, Large, Small) to match action prominence and context.
  • Chips (Filter, Assist, Input, Suggestion) for streamlined filtering and actions.
  • SegmentedButton for 2–5 option selection and quick toggles.
  • SearchBar with suggestions and history to streamline user queries.
  • ListItem for consistent list rows with leading, title, subtitle, and trailing actions.
  • DatePicker and TimePicker dialogs for date/time input and validation.
  • PullToRefreshBox, Snackbar, BadgedBox for feedback and fluid interactions.
  • ExposedDropdownMenuBox for accessible dropdowns and selections.
  • Tonal elevation and dynamic color usage to replace shadows with color-based depth.
  • Migration guidance from M2 components to M3 patterns.

Quick Start

Replace standard Material components with Expressive Material 3 components across your Compose UI to achieve unified theming and motion.

Frequently Asked Questions about material3

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

FAQPage Schema
How do I implement Material 3 components in Jetpack Compose?▼

Migrate from Material 2 to Material 3 by replacing standard M2 widgets with Expressive M3 APIs like TopAppBar, FABs, Chips, and SearchBar to achieve unified theming, tonal elevation, and motion across your Android app screens.

What is tonal elevation and dynamic color in Material 3?▼

Tonal elevation and dynamic color in Material 3 replace traditional shadows with color-based depth, applying cohesive color schemes and theming tokens to unify the user interface across different Android app screens.

Can I use different TopAppBar and FAB variants in Android Compose?▼

Yes, you can configure TopAppBar variants like Standard, Large, and CenterAligned with proper scroll behavior, alongside FAB variants like Extended, Large, and Small to match action prominence and context within Android Compose.

How do I add DatePicker and SearchBar to an Android UI?▼

Add DatePicker and TimePicker dialogs for date and time validation, and implement SearchBar with suggestions and history using Material 3 Compose APIs to streamline user queries and input within your Android UI.

What is the best way to handle user feedback and filtering in Compose?▼

The best way to handle user feedback and filtering in Compose is using M3 components like Chips for streamlined filtering, Snackbar for feedback, PullToRefreshBox for fluid interactions, and BadgedBox for contextual notifications.

How do I migrate from Material 2 to Material 3 components?▼

Migrate from Material 2 to Material 3 by replacing M2 components with M3 patterns, enforcing proper component configurations, theming tokens, and utilizing Expressive M3 APIs for cohesive visuals and motion.

Related Skills

Explore More Software Engineering Skills→
patlar104patlar104

Material Design 3 with Jetpack Compose

Implement Material Design 3 theming and components in Jetpack Compose.

Community
Advanced
xingfengwxxxingfengwxx
2

android-design-guidelines

Guide Android UI development with Material Design 3 and Jetpack Compose.

Community
Advanced
ThedouglerThedougler

mobile-android-design

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

Community
Intermediate
hanamizukihanamizuki
127

mobile-android-design

Implement Material Design 3 theming and Jetpack Compose UI patterns for Android apps.

Community
Intermediate