このページは Cloud Translation API によって翻訳されました。

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

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

以下では、マテリアルデザイン 3 の実装について説明します。 Reply サンプルアプリを例として使用します。Reply のサンプルは、全面的にマテリアルデザイン 3 に基づいて設計されているため

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

依存関係

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

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

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

試験運用版 API

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

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

マテリアルテーマ設定

M3 テーマには、カラーパターン、タイポグラフィとシェイプ。カスタマイズする場合変更すると、変更内容が M3 コンポーネントに自動的に反映されます。理解することが重要です。

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

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

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

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

カラーパターン

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

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

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

カスタムの 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)
// ..
// ..Material3Snippets.kt

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
    )
}Material3Snippets.kt

ライトモードとダークモードをサポートするには、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
}Material3Snippets.kt

色の使用

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

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

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

プライマリはベースカラーです。目立つ要素などの主要コンポーネントに使用されます。ボタン、アクティブ状態、浮き上がった面の色合いなどです。
セカンダリキーカラーは、UI の視認性の低いコンポーネント（フィルタラベルなど）に使用され、色の表現の機会を広げます。
ターシャリキーカラーは、プライマリカラーとセカンダリカラーのバランスを取ったり、要素に注目します

Reply サンプルアプリの設計では、Google 検索の上に on-primary-container の色があるプライマリコンテナ: 選択したアイテムを強調します。

プライマリコンテナと on-primary-container 色のテキストフィールド。 — **図 5**.プライマリコンテナとテキストフィールド（on-primary-container の色）。

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,
    )
}
Material3Snippets.kt

返信のナビゲーションドロワーで 2 番目と 3 番目のタブが強調やアクセントを作成するためにコンテナカラーが使用されます。

フローティングアクションボタンの 3 番目と 3 番目のコンテナと 3 番目のコンテナ上の組み合わせ。 — **図 6**. フローティングアクションボタンの 3 番目と 3 番目、コンテナ上の組み合わせ。

タイポグラフィ

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

M3	デフォルトのフォントサイズ / 行間
`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 には、既存の TextStyle クラスおよびフォント関連のクラスとともに、マテリアル 3 のタイプスケールをモデル化するための 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
    ),
    // ..
)
// ..Material3Snippets.kt

タイポグラフィの使用方法別に、ボディ（大）、ボディ（中）、ラベル（中）の 3 つ。 — **図 8**.タイポグラフィの使用方法別に、ボディ（大）、ボディ（中間）、ラベル（中）の 3 つの属性が表示されます。

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

タイポグラフィをカスタマイズするには、TextStyle のデフォルト値と、fontFamily や letterSpacing などのフォント関連のプロパティを変更します。

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

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

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

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

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

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

タイポグラフィの適用に関するマテリアルガイドラインの詳細を確認する。

シェイプ

マテリアルサーフェスはさまざまな形状で表示できます。図形はユーザーの注意を引き、コンポーネントの識別、状態の共有、ブランドの表示を行います。

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

図形を定義する

Compose には、拡張パラメータをサポートする M3 の Shapes クラスが用意されています。新しい M3 シェイプ。M3 のシェイプスケールは、タイプスケールに似ており、UI 全体でさまざまなシェイプを表現できます。

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

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

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

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

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

シェイプを使用する

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

中程度のシェイプと大きいシェイプをデフォルト値で適用します。

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

Reply サンプルアプリで、カードには中形、フローティングアクションボタンには大形を使用します。 — **図 9**.返信サンプルアプリのカードに中程度のシェイプ、フローティングアクションボタンに大きいシェイプ

他にも RectangleShape と CircleShape の 2 つのシェイプがあります。説明します。長方形のシェイプに枠線の半径がなく、円がフル丸付きエッジ:

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

以下の例は、デフォルトのシェイプ値を持つコンポーネントの一部を示しています。適用する方法:

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

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

強調

M3 での強調では、さまざまなバリエーションの色と、on-color の組み合わせを使用します。M3 では、UI に強調を追加する方法が 2 つあります。

拡張 M3 カラーシステムの on-surface および on-surface-variants の色に加えて、サーフェス、surface-variant、背景を使用します。たとえばサーフェスは on-surface-variant で、surface-variant はさまざまな強調レベルを指定できます。

で確認できます。

テキストでは異なるフォントの太さを使用する。上記では、タイプスケールにカスタムウェイトを設定して、異なる強調を指定できることを確認しました。

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

エレベーション

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

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

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

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

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

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

マテリアルデザインには、マテリアルテーマ設定に準拠した豊富なマテリアルコンポーネント（ボタン、チップ、カード、ナビゲーションバーなど）が用意されており、美しいマテリアルデザインアプリの作成に役立ちます。まずはコンポーネントをデフォルトプロパティのまま使用できます。

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

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

最も強調されているアクションに対応する拡張されたフローティングアクションボタン:

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

高強調アクションの塗りつぶしボタン:

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

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

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

詳しくは、マテリアルのボタンとその他のコンポーネントをご覧ください。マテリアル 3 には、さまざまなユースケースと画面サイズ向けに特別に設計された、ボタン、アプリバー、ナビゲーションコンポーネントなど、さまざまなコンポーネントスイートが用意されています。

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

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

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

NavigationRail は、小～中程度のタブレットまたはスマートフォンの横向きモードに使用します。ユーザーのエルゴノミクスを向上させ、デバイスのユーザーエクスペリエンスを改善します。

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

BottomNavigationBar（左）と NavigationRail（右）の返信ショーケース — **図 15**.`BottomNavigationBar`（左）と `NavigationRail`（右）の返信ショーケース

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

NavigationDrawer は、詳細を表示するのに十分なスペースがある中程度から大型のタブレットで使用します。NavigationRail とともに PermanentNavigationDrawer または ModalNavigationDrawer の両方を使用できます。

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

固定ナビゲーションドロワーの返信ショーケース — **図 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
}Material3Snippets.kt

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

システム UI

Material You の一部の要素は、Android 12 以降の新しい視覚的スタイルとシステム UI に由来します。変更点がある 2 つの主要な領域は、リップルとオーバースクロールです。それらの変更を実装するための追加の作業は不要です。

リップル

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

オーバースクロール

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

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

ユーザー補助

マテリアルコンポーネントに組み込まれているユーザー補助機能標準は、インクルーシブなプロダクト設計の基盤となりますプロダクトのアクセシビリティを理解することで、視覚障がい、盲目、聴覚障がい、認知障がい、運動障がい、状況的な障がい（腕の骨折など）を持つユーザーを含むすべてのユーザーのユーザビリティを向上させることができます。

色のユーザー補助

ダイナミックカラーは、色のコントラストに関するユーザー補助基準を満たすように設計されています。あらゆるカラーパターンを利用しやすくするためには、色調パレットのシステムが不可欠です。できます。

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

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

すべてのマテリアルコンポーネントとダイナミックテーマ設定では、すでに上記のカラーロールを使用していますユーザー補助を考慮して選択された一連の色調パレットから選択提供します。ただし、コンポーネントをカスタマイズする場合は、適切な色ロールを使用して、不一致を回避してください。

プライマリ上で 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
    )
) {
}Material3Snippets.kt

十分なコントラスト（左）と低いコントラスト（右） — **図 20**. コントラストが十分な場合（左）とコントラストが不十分な場合（右）

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

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

たとえば M3 では、ディスプレイネットワーク（S）にはキャンペーンごとにデバイスに応じて自動的に作成されます。

大画面

マテリアルでは、アプリをアクセスしやすく、大型デバイスを保持するユーザーの人間工学を改善するために、適応型レイアウトと折りたたみ式デバイスに関するガイダンスが提供されています。

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

詳しくは、Android の大画面アプリの品質に関するガイドラインをご覧ください。アダプティブで使いやすいデザインについては、Reply サンプルをご覧ください。

詳細

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

サンプルアプリ

Reply M3 サンプルアプリ

ドキュメント

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

動画

Jetpack Compose の Material You

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
Compose でマテリアル 2 からマテリアル 3 に移行する
Compose のマテリアルデザイン 2
Compose のカスタムデザインシステム