Material 3 Expressive Playground 🎨

A hands-on playground that implements and compares Android Material 3 Expressive patterns with standard Material 3 (M3) components—side by side.

---

TL;DR

• Built with Jetpack Compose (Material 3)
• Expressive vs Standard: typography, shapes, elevation, and spacing
• Side-by-side screens for quick visual comparison
• Small, focused examples for each component

---

📦 Tech & Requirements

• Android Studio Ladybug / Koala or newer
• Kotlin 1.9+
• Compose BOM **2024.**xx (or newer)

Gradle (KTS)

dependencies {
    implementation(platform("androidx.compose:compose-bom:2024.06.00"))
    implementation("androidx.compose.material3:material3")
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
}

🧩 Components pipeline

Buttons (Filled, Tonal, Outlined, Text, Icon)

TextFields & Search

Cards (Elevated, Filled, Outlined)

Lists & List Items

Chips & Filters

Dialogs, Snackbars, Bottom Sheets

Navigation (TopAppBar, NavigationBar/Rail)

FABs & Extended FABs

Toggles (Switch, Checkbox, Radio)

🔍 What’s “Expressive” in Practice?

Material 3 Expressive emphasizes:

Bolder typography (larger scales, tighter weights where appropriate)

Livelier shapes (increased corner radii, playful cut corners if desired)

Comfortable spacing (breathing room for hierarchy)

Readable contrast & motion (accessibility-friendly defaults)

This repo shows how to apply those expressive choices without new libraries—by customizing tokens (typography, shapes, elevation, spacing) on top of M3.

Side-by-Side Comparison

Area	Standard M3	M3 Expressive
Typography	14–24 sp body/title defaults	+2–4 sp scale up; selective bolds
Shapes	4–12 dp radii	12–24 dp radii; occasional cut corners
Elevation	Subtle levels	Slightly stronger to improve hierarchy
Spacing	Compact	Airier padding & line height
Motion	Default easing	More pronounced, still minimal & accessible

🗺️ Roadmap

[ ] Add dark vs light expressive comparisons [ ] Add motion examples (enter/exit transitions) [ ] Adaptive layouts (phone/tablet/foldables) [ ] Theming panel to live-tune tokens (sliders)

🤝 Contributing

PRs welcome! Keep examples small and focused Add before/after screenshots for visual changes Update the comparison docs when you add a new component

📄 License

MIT © You

🔗 References

[] Material 3: https://m3.material.io/ [] Android Compose Material 3: https://developer.android.com/jetpack/compose/designsystems/material3 [] Expressive guidance: https://m3.material.io/expressive/