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 - 完全な画面例

m3-expressive