Ifor Lux Luxurycheats M3 Expressive

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 を実装する際の必須手順：

1. 依存関係を追加

   // 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")
   }
   

2. Experimental API のオプトインを追加

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

3. MaterialExpressiveTheme でアプリをラップ

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

4. MotionScheme を選択

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

Core Concepts

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 種類

Spring Speeds

詳細: references/motion-system.md

Shape Library

35種類の MaterialShapes

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

// 使用例
IconButton(
    },
    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,
        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,
            selectedIndex = 0 }
        ) {
            Text("Option 1")
        }
        ToggleButton(
            checked = selectedIndex == 1,
            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,
                expanded = it }
            ) {
                Icon(
                    imageVector = if (expanded) Icons.Default.Close else Icons.Default.Add,
                    contentDescription = "Toggle menu"
                )
            }
        }
    ) {
        FloatingActionButtonMenuItem(
            /* action */ },
            icon = { Icon(Icons.Default.Edit, null) },
            text = { Text("Edit") }
        )
        FloatingActionButtonMenuItem(
            /* 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(
                /* 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

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

External Resources

• Material Design 3 in Compose
• M3 Expressive Motion System
• Compose Material 3 Releases
• Material 3 Expressive Catalog (GitHub)

Converted and distributed by TomeVault — claim your Tome and manage your conversions.