Material 3 Expressive for Jetpack Compose Skill

Material 3 Expressive for Jetpack Compose

Android Jetpack Compose 向けの Material 3 Expressive 実装ガイド。Google I/O 2025 で発表された最新のデザインシステムアップデートです。

Overview

Target Platform: Android API 24+ / Jetpack Compose 1.7+ / Kotlin 1.9+

Design Philosophy:

Physics-based animations（物理ベースアニメーション）
35種類の新しいシェイプによる表現力豊かなUI
Variable fonts によるダイナミックタイポグラフィ
Extended color tokens による深いトーナルパレット
18,000人以上のユーザーリサーチに基づく設計

Core Features:

MotionScheme: Spring-based animation system（standard/expressive）
MaterialShapes: 35種類のシェイプ + モーフィングトランジション
New Components: LoadingIndicator, ButtonGroup, FAB Menu, Floating Toolbar, Carousel
Enhanced Theming: MaterialExpressiveTheme() による統合カスタマイズ

Quick Start Checklist

Material 3 Expressive を実装する際の必須手順：

依存関係を追加

// build.gradle.kts
dependencies {
    // Material 3 Expressive (alpha)
    implementation("androidx.compose.material3:material3:1.4.0-alpha15")

    // または BOM を使用
    implementation(platform("androidx.compose:compose-bom:2024.12.01"))
    implementation("androidx.compose.material3:material3")
}

Experimental API のオプトインを追加

// ファイルレベル
@file:OptIn(ExperimentalMaterial3ExpressiveApi::class)

// または関数レベル
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun MyExpressiveComponent() { ... }

MaterialExpressiveTheme でアプリをラップ

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun MyApp() {
    MaterialExpressiveTheme(
        motionScheme = MotionScheme.expressive()
    ) {
        // App content
    }
}

MotionScheme を選択
- MotionScheme.expressive(): バウンス感のある活発なアニメーション（推奨）
- MotionScheme.standard(): 落ち着いた控えめなアニメーション

Core Concepts

| 概念 | 説明 | 用途 | |------|------|------| | MotionScheme | Spring-based animation system | 全体的なアニメーション制御 | | MaterialShapes | 35種類の新しいシェイプ | ボタン、カード、コンポーネント | | Shape Morphing | 形状間のスムーズな遷移 | 押下/選択状態の視覚効果 | | Spatial Specs | 形状・境界変更用アニメーション | コンポーネントのサイズ変更 | | Effects Specs | 色・透明度変更用アニメーション | 色のトランジション |

Motion System

Spring Physics

M3 Expressive は duration-based から physics-based へアニメーションを刷新：

// Spring の主要パラメータ
// Stiffness: バネの硬さ（高いほど速く収束）
// Damping Ratio: 減衰率（1.0で臨界減衰、低いほどバウンス）

val customSpring = spring<Float>(
    stiffness = Spring.StiffnessMedium,
    dampingRatio = Spring.DampingRatioMediumBouncy
)

MotionScheme 種類

| Scheme | Damping | 特徴 | 用途 | |--------|---------|------|------| | expressive() | 低い | オーバーシュート、バウンス | ヒーローモーメント、主要インタラクション | | standard() | 高い | 控えめ、機能的 | ユーティリティアプリ |

Spring Speeds

| Speed | 用途 | |-------|------| | fast | 小さなコンポーネント（Switch, Checkbox） | | default | 中間サイズのコンポーネント（Button, Card） | | slow | フルスクリーン遷移、大きなアニメーション |

詳細: references/motion-system.md

Shape Library

35種類の MaterialShapes

M3 Expressive は丸角長方形を超えた多様なシェイプを提供：

// 使用例
IconButton(
    onClick = { },
    shape = MaterialShapes.Cookie9Sided
) {
    Icon(Icons.Default.Add, contentDescription = null)
}

Shape Morphing

押下時やチェック状態でシェイプがスムーズに変化：

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun MorphingIconButton() {
    var isChecked by remember { mutableStateOf(false) }

    IconToggleButton(
        checked = isChecked,
        onCheckedChange = { isChecked = it }
    ) {
        Icon(
            imageVector = if (isChecked) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder,
            contentDescription = null
        )
    }
}

詳細: references/shape-library.md

New Components

LoadingIndicator

CircularProgressIndicator に代わる新しいローディング表示：

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun LoadingExample() {
    // 基本的なローディング
    LoadingIndicator()

    // コンテナ付き
    ContainedLoadingIndicator(
        containerColor = MaterialTheme.colorScheme.primaryContainer
    )
}

詳細: references/loading-indicators.md

ButtonGroup

接続されたボタン群による選択UI：

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun ButtonGroupExample() {
    var selectedIndex by remember { mutableIntStateOf(0) }

    ButtonGroup {
        ToggleButton(
            checked = selectedIndex == 0,
            onCheckedChange = { selectedIndex = 0 }
        ) {
            Text("Option 1")
        }
        ToggleButton(
            checked = selectedIndex == 1,
            onCheckedChange = { selectedIndex = 1 }
        ) {
            Text("Option 2")
        }
    }
}

詳細: references/button-group.md

FloatingActionButtonMenu

展開式 FAB メニュー：

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun FABMenuExample() {
    var expanded by remember { mutableStateOf(false) }

    FloatingActionButtonMenu(
        expanded = expanded,
        button = {
            ToggleFloatingActionButton(
                checked = expanded,
                onCheckedChange = { expanded = it }
            ) {
                Icon(
                    imageVector = if (expanded) Icons.Default.Close else Icons.Default.Add,
                    contentDescription = "Toggle menu"
                )
            }
        }
    ) {
        FloatingActionButtonMenuItem(
            onClick = { /* action */ },
            icon = { Icon(Icons.Default.Edit, null) },
            text = { Text("Edit") }
        )
        FloatingActionButtonMenuItem(
            onClick = { /* action */ },
            icon = { Icon(Icons.Default.Share, null) },
            text = { Text("Share") }
        )
    }
}

詳細: references/fab-components.md

Floating Toolbar

水平/垂直フローティングツールバー：

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun FloatingToolbarExample() {
    var expanded by remember { mutableStateOf(true) }

    HorizontalFloatingToolbar(
        expanded = expanded,
        floatingActionButton = {
            FloatingToolbarDefaults.VibrantFloatingActionButton(
                onClick = { /* action */ }
            ) {
                Icon(Icons.Default.Add, contentDescription = null)
            }
        }
    ) {
        IconButton(onClick = { }) {
            Icon(Icons.Default.Edit, contentDescription = "Edit")
        }
        IconButton(onClick = { }) {
            Icon(Icons.Default.Delete, contentDescription = "Delete")
        }
    }
}

詳細: references/floating-toolbar.md

Carousel

複数アイテム表示のカルーセル：

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun CarouselExample() {
    val items = listOf("Item 1", "Item 2", "Item 3", "Item 4")

    HorizontalMultiBrowseCarousel(
        state = rememberCarouselState { items.count() },
        modifier = Modifier.height(200.dp),
        preferredItemWidth = 150.dp
    ) { index ->
        Card(
            modifier = Modifier.fillMaxSize()
        ) {
            Text(
                text = items[index],
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}

詳細: references/carousel.md

Theming

MaterialExpressiveTheme

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun MyApp() {
    MaterialExpressiveTheme(
        colorScheme = dynamicColorScheme(LocalContext.current),
        typography = Typography,
        shapes = Shapes,
        motionScheme = MotionScheme.expressive()
    ) {
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colorScheme.background
        ) {
            MainContent()
        }
    }
}

詳細: references/theming.md

Common Errors

| エラー | 原因 | 解決策 | |--------|------|--------| | Unresolved reference: MaterialExpressiveTheme | 依存関係が古い | material3:1.4.0-alpha15 以上を使用 | | This declaration is experimental | OptIn 未指定 | @OptIn(ExperimentalMaterial3ExpressiveApi::class) を追加 | | Unresolved reference: MotionScheme | Compose バージョン不足 | compose-bom 2024.12.01 以上を使用 | | Shape morphing not working | Theme 設定不足 | MaterialExpressiveTheme でラップ | | LoadingIndicator not found | Import 不足 | import androidx.compose.material3.LoadingIndicator | | ButtonGroup compilation error | Kotlin バージョン | Kotlin 1.9+ を使用 |

Additional Resources

References

Motion System - Spring physics, MotionScheme 詳細
Shape Library - 35種類のシェイプ、モーフィング
Typography - Variable fonts, type scale
Color System - Design tokens, palettes
Loading Indicators - LoadingIndicator コンポーネント
Button Group - ButtonGroup 実装
FAB Components - FAB Menu, Vibrant FAB
Floating Toolbar - ツールバーコンポーネント
Carousel - カルーセル実装
Expressive Menus - 新メニューシステム
Theming - MaterialExpressiveTheme カスタマイズ
Migration Guide - M3 → M3 Expressive 移行
Troubleshooting - トラブルシューティング

Examples

Basic Setup - テーマ設定基本
Motion Scheme - MotionScheme 使用例
Shape Morphing - シェイプモーフィング
Loading Indicator - ローディング
Button Group - ボタングループ
FAB Menu - FAB メニュー
Floating Toolbar - ツールバー
Carousel - カルーセル
Expressive List - リストアイテム
Complete Screen - 完全な画面例

Agent Skills: Material 3 Expressive for Jetpack Compose

Install this agent skill to your local

Skill Files