Compose のマテリアル デザイン 3

Jetpack Compose には、マテリアル デザインの進化版であるマテリアル デザイン 3 の実装が用意されています。マテリアル 3 には、更新されたテーマ設定、コンポーネント、ダイナミック カラーなどの Material You のパーソナライズ機能が含まれており、Android 12 以降の新しい視覚的スタイルとシステム UI と調和するように設計されています。

以下では、Reply サンプルアプリを例として使用し、マテリアル デザイン 3 の実装を示します。Reply サンプルは、完全にマテリアル デザイン 3 に基づいています。

マテリアル デザイン 3 を使用した Reply サンプルアプリ
図 1. マテリアル デザイン 3 を使用した Reply サンプルアプリ

依存関係

Compose アプリでマテリアル 3 の使用を開始するには、build.gradle ファイルに Compose マテリアル 3 の依存関係を追加します。

implementation "androidx.compose.material3:material3:$material3_version"

依存関係を追加したら、カラー、タイポグラフィ、シェイプなどのマテリアル デザイン システムをアプリに追加できるようになります。

試験運用版 API

一部の M3 API は試験運用版とみなされています。その場合は、ExperimentalMaterial3Api アノテーションを使用して、関数レベルまたはファイルレベルでオプトインする必要があります。

// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

マテリアル テーマ設定

M3 テーマには、カラーパターンタイポグラフィシェイプのサブシステムが含まれています。これらの値をカスタマイズすると、その変更はアプリのビルドに使用する M3 コンポーネントに自動的に反映されます。

マテリアル デザインのサブシステム: 色、タイポグラフィ、シェイプ
図 2. マテリアル デザインのサブシステム: 色、タイポグラフィ、シェイプ

Jetpack Compose は、M3 の MaterialTheme コンポーザブルを使用して、これらのコンセプトを実装しています。

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}

アプリ コンテンツのテーマを設定するには、アプリに固有のカラーパターン、タイポグラフィ、シェイプを定義します。

カラーパターン

カラーパターンの基礎は、5 つの主要なカラーのセットです。これらの色はそれぞれ、マテリアル 3 コンポーネントで使用される 13 トーンの色調パレットに関連しています。たとえば、Reply のライトモードのカラーパターンは次のとおりです。

Reply サンプルアプリのライト カラーパターン
図 3. Reply サンプルアプリのライトのカラーパターン

詳しくは、カラーパターンとカラーロールをご覧ください。

カラーパターンを生成する

カスタムの ColorScheme は手動で作成できますが、多くの場合、ブランドのソースカラーを使用して生成するほうが簡単です。マテリアル テーマビルダー ツールを使用すると、これを行うことができます。また、必要に応じて Compose テーマ設定コードをエクスポートします。次のファイルが生成されます。

  • Color.kt には、ライトモードとダークモードの色に対して定義されたすべてのロールを含むテーマの色が含まれます。

val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..

  • Theme.kt には、ライトとダークのカラーパターンとアプリテーマの設定が含まれています。

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

ライトモードとダークモードをサポートするには、isSystemInDarkTheme() を使用します。システム設定に基づいて、使用するカラーパターン(ライトまたはダーク)を定義します。

動的なカラーパターン

ダイナミック カラーは Material You の重要な要素であり、アルゴリズムによってユーザーの壁紙からカスタムカラーが取得され、アプリとシステム UI に適用されます。このカラーパレットは、ライトとダークのカラーパターンを生成するための出発点として使用されます。

Reply サンプルアプリの壁紙からの動的テーマ設定(左)とデフォルトのアプリのテーマ設定(右)
図 4. Reply サンプルアプリの壁紙からの動的テーマ設定(左)とデフォルトのアプリのテーマ設定(右)

ダイナミック カラーは Android 12 以降で使用できます。ダイナミック カラーを使用できる場合は、動的な ColorScheme を設定できます。使用できない場合は、代わりにカスタムのライトまたはダーク ColorScheme を使用してください。

ColorScheme には、動的なライト カラーパターンまたはダーク カラーパターンを作成するためのビルダー関数が用意されています。

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}

色の使用

アプリのマテリアル テーマカラーには、MaterialTheme.colorScheme を介してアクセスできます。

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)

各カラーロールは、コンポーネントの状態、視認性の高さ、強調に応じて、さまざまな場所で使用できます。

  • プライマリはベースカラーで、視認性の高いボタン、アクティブ状態、浮き上がりサーフェスの色合いなどの主要コンポーネントに使用されます。
  • セカンダリ キーカラーは、UI の目立たないコンポーネント(フィルタラベルなど)に使用され、色表現の可能性を広げます。
  • ターシャリ キーカラーは、プライマリ カラーとセカンダリ カラーのバランスを取ったり、要素に注意を引いたりするために使用できる対照的なアクセントの役割を導出するために使用されます。

Reply サンプルアプリの設計では、プライマリ コンテナの上に on-primary-container 色を使用して、選択されたアイテムを強調しています。

プライマリ コンテナの色が設定されたプライマリ コンテナとテキスト フィールド。
図 5. プライマリ コンテナの色が設定されたプライマリ コンテナとテキスト フィールド

Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "Dinner club",
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface,
    )
}

返信ナビゲーション ドロワーで、コンテナのセカンダリ カラーとターシャリ カラーを対照的に使用して強調とアクセントを付ける方法を確認できます。

フローティング アクション ボタンの 3 次コンテナと 3 次コンテナの組み合わせ。
図 6. フローティング アクション ボタンの 3 次コンテナと 3 次コンテナの組み合わせ。

タイポグラフィ

マテリアル デザイン 3 では、マテリアル デザイン 2 から調整されたテキスト スタイルなど、タイプスケールが定義されています。名前とグループ化は、表示、見出し、タイトル、本文、ラベルに簡略化され、それぞれに大、中、小のサイズがあります。

マテリアル デザイン 3 のデフォルトのタイポグラフィ スケール
図 7. マテリアル デザイン 3 のデフォルトのタイポグラフィ スケール
モジュール 3 デフォルトのフォントサイズ/行の高さ
displayLarge Roboto 57/64
displayMedium Roboto 45/52
displaySmall Roboto 36/44
headlineLarge Roboto 32/40
headlineMedium Roboto 28/36
headlineSmall Roboto 24/32
titleLarge New- Roboto Medium 22/28
titleMedium Roboto Medium 16/24
titleSmall Roboto Medium 14/20
bodyLarge Roboto 16/24
bodyMedium Roboto 14/20
bodySmall Roboto 12/16
labelLarge Roboto Medium 14/20
labelMedium Roboto Medium 12/16
labelSmall New Roboto Medium, 11/16

タイポグラフィを定義する

Compose には、マテリアル 3 のタイプスケールをモデル化するための、既存の TextStyle クラスおよびフォント関連クラスとともに、M3 の Typography クラスが用意されています。Typography コンストラクタにはスタイルごとにデフォルトが用意されているため、カスタマイズしないパラメータは省略できます。

val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..

本文(大)、本文(M)、ラベル(M)。さまざまなタイポグラフィの用途があります。
図 8. 本文(大)、本文(M)、ラベル(M)。さまざまなタイポグラフィの用途があります。

マテリアル デザイン タイプスケールの 15 個のデフォルト スタイルがすべてプロダクトで必要になるとは限りません。この例では、縮小されたセット用に 5 つのサイズが選択され、残りは省略されています。

TextStyle と、fontFamilyletterSpacing などのフォント関連プロパティのデフォルト値を変更することで、タイポグラフィをカスタマイズできます。

bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),

Typography を定義したら、M3 MaterialTheme に渡します。

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}

テキスト スタイルを使用する

MaterialTheme.typography を使用すると、M3 MaterialTheme コンポーザブルに提供されたタイポグラフィを取得できます。

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)

詳しくは、タイポグラフィの適用に関するマテリアル ガイドラインをご覧ください。

シェイプ

マテリアル サーフェスはさまざまな形状で表示できます。シェイプはユーザーの注意を引き、コンポーネントを特定し、状態を伝え、ブランドを表現します。

シェイプ スケールはコンテナの角のスタイルを定義し、正方形から完全な円形までさまざまな丸みを設定します。

図形を定義する

Compose には、新しい M3 シェイプをサポートする拡張パラメータを備えた M3 Shapes クラスがあります。M3 のシェイプ スケールはタイプスケールに近く、UI 全体でシェイプの表現範囲を実現します。

シェイプにはさまざまなサイズがあります。

  • XS
  • Medium
  • XL

デフォルトでは各シェイプにデフォルト値がありますが、オーバーライドできます。

val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)

Shapes を定義したら、それを M3 MaterialTheme に渡すことができます。

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}

シェイプを使用する

シェイプのスケールは、MaterialTheme 内のすべてのコンポーネントに対してカスタマイズすることも、コンポーネントごとにカスタマイズすることもできます。

中規模と大規模のシェイプをデフォルト値で適用:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}

Reply サンプルアプリの、カード用の中程度のシェイプとフローティング アクション ボタン用の大きいシェイプ。
図 9. Reply サンプルアプリの、カード用の中程度の形状とフローティング アクション ボタン用の大きい形状

Compose には、他に RectangleShapeCircleShape の 2 つのシェイプがあります。長方形の場合は枠線の半径がなく、円の場合は完全な円で囲まれたエッジになります。

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }

以下の例では、デフォルトのシェイプ値が適用されたコンポーネントの一部を示しています。

すべてのマテリアル 3 コンポーネントのデフォルトのシェイプ値。
図 10. すべてのマテリアル 3 コンポーネントのデフォルトのシェイプ値。

詳しくは、シェイプの適用に関するマテリアル ガイドラインをご覧ください。

強調

M3 での強調は、さまざまな色とその色の組み合わせを使用して提供されます。M3 では、UI に強調を追加する方法が 2 つあります。

  • 拡張 M3 カラーシステムの on-surface、on-surface-variants カラーに加えて、サーフェス、surface-variant、背景を使用します。たとえば、surface を on-surface-variant とともに使用し、surface-variant を on-surface と併用して異なる強調レベルを提供できます。
中間色の組み合わせを使用して強調します。
図 11. 中間色の組み合わせを使用して強調します。
  • テキストでは異なるフォントの太さを使用する。上の説明では、タイプスケールにカスタムの重みを指定して、異なる強調を指定できることを確認しました。

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)

エレベーション

マテリアル 3 では、主に色調カラー オーバーレイを使用してエレベーションを表現します。これは、コンテナとサーフェスを区別する新しい方法です。色調エレベーションを上げると、シャドウに加えて、より目立つ色調が使用されます。

シャドウ エレベーションを含む色調エレベーション
図 12. シャドウ エレベーションを含む色調エレベーション

ダークモードのエレベーション オーバーレイも、マテリアル 3 の色調カラー オーバーレイに変更されました。オーバーレイの色は、プライマリ カラースロットで指定されます。

マテリアル デザイン 3 のシャドウ エレベーションと色調エレベーション
図 13. マテリアル デザイン 3 のシャドウ エレベーションと色調エレベーション

M3 サーフェス(ほとんどの M3 コンポーネントの背後にあるバッキング コンポーザブル)は、色調エレベーションとシャドウ エレベーションの両方をサポートしています。

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}

マテリアル コンポーネント

マテリアル デザインには、すでにマテリアル テーマ設定を採用しているマテリアル コンポーネント(ボタン、チップ、カード、ナビゲーション バーなど)が豊富に用意されており、美しいマテリアル デザイン アプリの作成に役立ちます。デフォルト プロパティを持つコンポーネントをすぐに使い始めることができます。

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}

M3 には、強調と注意に応じて、異なるロールで使用できる同じコンポーネントの多くのバージョンが用意されています。

FAB からプライマリからテキストボタンへとボタンを強調
図 14. FAB からプライマリからテキストボタンへとボタンを強調
  • 最も強調したいアクション用の拡張フローティング アクション ボタン:

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}

  • 高強調アクション用の塗りつぶされたボタン:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}

  • 低強調アクションのテキストボタン:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}

詳細については、マテリアルのボタンとその他のコンポーネントをご覧ください。マテリアル 3 には、さまざまなユースケースと画面サイズに合わせて設計された、ボタン、アプリバー、Navigation コンポーネントなど、さまざまなコンポーネント スイートが用意されています。

マテリアルには、さまざまな画面サイズと状態に応じて、ナビゲーションの実装に役立つナビゲーション コンポーネントも用意されています。

NavigationBar は、5 つ以下のデスティネーションをターゲットとするコンパクト デバイスに使用されます。

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

NavigationRail は、小型~中規模のタブレットまたは横向きのスマートフォンに使用されます。ユーザーにエルゴノミクスを提供し、デバイスのユーザー エクスペリエンスを向上させます。

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

BottomNavigationBar(左)と NavigationRail(右)の返信ショーケース
図 15. BottomNavigationBar(左)と NavigationRail(右)の Reply ショーケース

あらゆるサイズのデバイスに対して没入型のユーザー エクスペリエンスを提供するには、デフォルトのテーマ設定で両方を使用して返信します。

NavigationDrawer は、詳細を表示する十分なスペースがある中程度のサイズのタブレットに使用されます。PermanentNavigationDrawerModalNavigationDrawer の両方を NavigationRail と組み合わせて使用できます。

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}

固定的なナビゲーション ドロワーの Reply ショーケース
図 16. 固定的なナビゲーション ドロワーの返信ショーケース

ナビゲーション オプションにより、ユーザー エクスペリエンス、エルゴノミクス、到達性が向上します。 マテリアル ナビゲーション コンポーネントの詳細については、Compose アダプティブ Codelab をご覧ください。

コンポーネントのテーマ設定をカスタマイズする

M3 はパーソナライズと柔軟性を促進します。すべてのコンポーネントにはデフォルトの色が適用されていますが、必要に応じて色をカスタマイズするための柔軟な API を公開しています。

カードやボタンなどのほとんどのコンポーネントには、色と高度のインターフェースを公開するデフォルト オブジェクトが用意されています。これらのオブジェクトを変更して、コンポーネントをカスタマイズできます。

val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}

詳細については、マテリアル 3 のカスタマイズをご覧ください。

システム UI

Material You の一部は、Android 12 以降の新しい視覚的スタイルとシステム UI に基づいています。変更が発生する主な 2 つの領域は、リップルとオーバースクロールです。これらの変更を実装するために追加の作業は必要ありません。

リップル

リップルでは、タップされた際にサーフェスを明るくするために、かすかなスパークルが使用されるようになりました。Compose マテリアル リップルは、Android の内部でプラットフォームの RippleDrawable を使用しているため、Android 12 以降ではすべてのマテリアル コンポーネントでスパークル リップルを利用できます。

M2 と M3 のリップル
図 17. M2 と M3 のリップル

オーバースクロール

オーバースクロールで、スクロール コンテナの端でストレッチ効果が使用されるようになりました。Compose Foundation 1.1.0 以降では、API レベルに関係なく、スクロール コンテナ コンポーザブル(LazyColumnLazyRowLazyVerticalGrid など)でストレッチ オーバースクロールがデフォルトで有効になっています。

コンテナの端でストレッチ効果を使用してオーバースクロールする
図 18. コンテナの端でストレッチ効果を使用してオーバースクロールする

ユーザー補助

マテリアル コンポーネントに組み込まれているユーザー補助標準は、インクルーシブなプロダクト デザインの基盤を提供するように設計されています。プロダクトのユーザー補助を理解することで、ロービジョン、視覚障がい、聴覚障がい、認知障がい、運動障がい、状況障がい(腕の骨折など)を持つユーザーのユーザビリティが向上します。

色のユーザー補助

ダイナミック カラーは、色のコントラストに関するユーザー補助基準を満たすように設計されています。 色調パレットのシステムは、任意のカラーパターンをデフォルトでアクセス可能にするうえで重要です。

マテリアルのカラーシステムは、アクセス可能なコントラスト比を満たすために使用できる標準のトーン値と測定値を提供します。

Reply サンプルアプリ: プライマリ、セカンダリ、ターシャリの色調パレット(上から下)
図 19. Reply サンプルアプリ: プライマリ、セカンダリ、ターシャリの色調パレット(上から下)

すべてのマテリアル コンポーネントと動的テーマ設定では、ユーザー補助要件を満たすように選択された色調パレットから上記のカラーロールがすでに使用されています。ただし、コンポーネントをカスタマイズする場合は、適切なカラーロールを使用し、不一致が発生しないようにしてください。

プライマリでは on-primary、プライマリ コンテナでは on-primary-container を使用し、他のアクセント カラーやニュートラル カラーでも同様に、ユーザーが見やすいコントラストを提供します。

プライマリの上にターシャリ コンテナを使用すると、ユーザーのコントラストが弱くなります。

// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}

十分なコントラスト(左)と弱いコントラスト(右)
図 20. 十分なコントラスト(左)と低いコントラスト(右)

タイポグラフィのユーザー補助機能

M3 タイプスケールは、静的タイプのランプと値を更新し、デバイス間でスケーリングするサイズカテゴリのシンプルかつ動的なフレームワークを提供します。

たとえば、M3 では、小サイズのディスプレイに、スマートフォンやタブレットなどのデバイスのコンテキストに応じて異なる値を割り当てることができます。

大画面

マテリアルは、アダプティブ レイアウトと折りたたみ式デバイスに関するガイダンスを提供し、アプリにアクセスしやすくし、大型デバイスを持っているユーザーのエルゴノミクスを改善します。

マテリアルには、大型デバイスでのユーザー エクスペリエンスの向上に役立つさまざまなナビゲーションが用意されています。

詳しくは、Android の大画面のガイドラインをご覧ください。また、アダプティブでアクセス可能なデザインについては、Reply のサンプルをご覧ください。

詳細

Compose のマテリアル テーマ設定について詳しくは、以下のリソースをご覧ください。

サンプルアプリ

ドキュメント

API リファレンスとソースコード

動画