Material Design 3の適用とカスタマイズ方法【Jetpack Compose入門⑨】

Material Design 3とは？
1. Material Design 3の概要
2. Material Youとの関係
Material Design 3の適用
1. 依存関係の追加
2. 基本的なMaterialThemeの適用
Material Design 3のカスタマイズ
1. カラーのカスタマイズ
2. ダイナミックカラーの適用
Material Design 3のコンポーネント
まとめ

Material Design 3とは？

Material Design 3の概要

Material Design 3（MD3）は、Googleが提供する最新のデザインシステムであり、柔軟性の高いカスタマイズが可能な新しいテーマを提供します。従来のMaterial Design 2（MD2）よりも、ダイナミックな色や洗練されたデザインコンポーネントを備え、より直感的でモダンなUI構築が可能になっています。

Material Youとの関係

Material Design 3は「Material You」と呼ばれるコンセプトに基づいており、ユーザーのデバイスの壁紙やテーマカラーに応じて、アプリのデザインが自動的に調整される機能を備えています。これにより、アプリの一貫性を保ちながら、パーソナライズされたUIを提供することができます。

Material Design 3の適用

依存関係の追加

Material Design 3をJetpack Composeで使用するには、以下の依存関係を追加する必要があります。

dependencies {
    implementation("androidx.compose.material3:material3:1.1.0")
    implementation("androidx.compose.ui:ui-tooling-preview:1.3.0")
}

基本的なMaterialThemeの適用

Material Design 3のMaterialThemeを適用するには、MaterialThemeコンポーザブルを利用します。

@Composable
fun MyApp() {
    MaterialTheme(
        colorScheme = lightColorScheme(),
        typography = Typography(),
        shapes = Shapes()
    ) {
        MainScreen()
    }
}

このコードでは、lightColorScheme() を使用してライトテーマを適用し、独自のTypographyやShapesを指定することでカスタマイズが可能です。

Material Design 3のカスタマイズ

カラーのカスタマイズ

Material Design 3では、ColorSchemeを使用してアプリのカラーテーマを設定できます。

val customColorScheme = lightColorScheme(
    primary = Color(0xFF6200EE),
    secondary = Color(0xFF03DAC5),
    background = Color(0xFFFFFFFF),
    surface = Color(0xFFEEEEEE),
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
)

@Composable
fun CustomTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colorScheme = customColorScheme,
        typography = Typography(),
        shapes = Shapes(),
        content = content
    )
}

このように、カラースキームを変更することで、アプリ全体のテーマをカスタマイズできます。

ダイナミックカラーの適用

Android 12以降では、Material Youのダイナミックカラー機能を活用して、ユーザーのデバイスの壁紙に基づいた色を適用できます。

@Composable
fun MyDynamicTheme(content: @Composable () -> Unit) {
    val context = LocalContext.current
    val dynamicColors = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
        dynamicLightColorScheme(context)
    } else {
        lightColorScheme()
    }
    
    MaterialTheme(
        colorScheme = dynamicColors,
        typography = Typography(),
        shapes = Shapes(),
        content = content
    )
}

これにより、ユーザーの設定に応じてアプリのテーマカラーが自動的に変更されます。

Material Design 3のコンポーネント

ボタンのデザイン

Material Design 3では、新しいButtonスタイルが提供されており、より視認性の高いデザインになっています。

@Composable
fun CustomButton(onClick: () -> Unit) {
    Button(
        onClick = onClick,
        colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary)
    ) {
        Text(text = "ボタン", color = MaterialTheme.colorScheme.onPrimary)
    }
}

テキストフィールドのデザイン

MD3のOutlinedTextFieldを使用すると、洗練されたテキスト入力フィールドを作成できます。

@Composable
fun CustomTextField(value: String, onValueChange: (String) -> Unit) {
    OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text("入力してください") },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = MaterialTheme.colorScheme.primary
        )
    )
}

カードのデザイン

MD3のCardを使用して、モダンなデザインのカードUIを作成できます。

@Composable
fun CustomCard() {
    Card(
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface),
        modifier = Modifier.padding(16.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = "タイトル", style = MaterialTheme.typography.titleLarge)
            Text(text = "詳細情報", style = MaterialTheme.typography.bodyMedium)
        }
    }
}