Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

Jetpack Compose には、デジタルインターフェースを作成するための包括的なデザインシステムであるマテリアルデザインの実装が用意されています。マテリアルデザインのコンポーネント（ボタン、カード、スイッチなど）は、プロダクトのブランドをより良く反映するようにマテリアルデザインをカスタマイズする体系的な方法である、マテリアルテーマ設定に基づいて構築されています。マテリアルテーマには、色、タイポグラフィ、シェイプの属性が含まれています。これらの属性をカスタマイズすると、その変更内容は、アプリのビルドに使用するコンポーネントに自動的に反映されます。

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

MaterialTheme(
    colors = // ...
    typography = // ...
    shapes = // ...
) {
    // app content
}Material2Snippets.kt

MaterialTheme に渡すパラメータを構成して、アプリのテーマを設定します。

対照的な 2 つのスクリーンショット。1 つ目のスクリーンショットはデフォルトの MaterialTheme スタイルを使用し、2 つ目のスクリーンショットは変更されたスタイルを使用しています。 — **図 1.** 最初のスクリーンショットは、`MaterialTheme` を構成していないため、デフォルトのスタイル設定を使用しているアプリを示しています。2 つ目のスクリーンショットは、`MaterialTheme` にパラメータを渡してスタイルをカスタマイズするアプリを示しています。

色

Compose では、データ保持クラスである Color クラスを使用して色をモデル化します。

val Red = Color(0xffff0000)
val Blue = Color(red = 0f, green = 0f, blue = 1f)Material2Snippets.kt

これらはどのように整理してもかまいませんが（最上位の定数として、シングルトン内で、またはインラインで定義）、テーマで色を指定し、そこから色を取得することを強くおすすめします。このアプローチにより、ダークモードとネストされたテーマをサポートできます。

Compose には、マテリアルカラーシステムをモデル化するための Colors クラスが用意されています。Colors は、ライトカラーまたはダークカラーのセットを作成するビルダー関数を提供します。

private val Yellow200 = Color(0xffffeb46)
private val Blue200 = Color(0xff91a4fc)
// ...

private val DarkColors = darkColors(
    primary = Yellow200,
    secondary = Blue200,
    // ...
)
private val LightColors = lightColors(
    primary = Yellow500,
    primaryVariant = Yellow400,
    secondary = Blue700,
    // ...
)Material2Snippets.kt

Colors を定義したら、MaterialTheme に渡すことができます。

MaterialTheme(
    colors = if (darkTheme) DarkColors else LightColors
) {
    // app content
}Material2Snippets.kt

テーマカラーを使用する

MaterialTheme.colors を使用すると、MaterialTheme コンポーザブルに提供されている Colors を取得できます。

Text(
    text = "Hello theming",
    color = MaterialTheme.colors.primary
)Material2Snippets.kt

サーフェスとコンテンツの色

多くのコンポーネントは、色とコンテンツ色のペアを受け入れます。

Surface(
    color = MaterialTheme.colors.surface,
    contentColor = contentColorFor(color),
    // ...
) { /* ... */ }

TopAppBar(
    backgroundColor = MaterialTheme.colors.primarySurface,
    contentColor = contentColorFor(backgroundColor),
    // ...
) { /* ... */ }Material2Snippets.kt

これにより、コンポーザブルの色を設定するだけでなく、その中に含まれるコンポーザブルであるコンテンツのデフォルト色を指定できます。多くのコンポーザブルは、デフォルトでこのコンテンツ色を使用します。たとえば、Text の色は親のコンテンツ色に基づき、Icon はその色を使用して色合いを設定します。

同じバナーで色が異なる 2 つの例 — **図 3.** 背景色を変えると、テキストとアイコンの色も変わります。

contentColorFor() メソッドは、テーマカラーに適した「on」色を取得します。たとえば、Surface に primary の背景色を設定すると、この関数を使用して onPrimary をコンテンツ色として設定します。テーマ以外の背景色を設定する場合は、適切なコンテンツ色も指定する必要があります。LocalContentColor を使用して、階層内の特定の位置にある現在の背景の推奨コンテンツ色を取得します。

ないため、注意が必要です。

コンテンツのアルファ版

重要度を伝え、視覚的な階層を提供するために、コンテンツを強調する度合いを変化させることがよくあります。マテリアルデザインのテキストの読みやすさに関する推奨事項では、異なるレベルの不透明度を利用してさまざまな重要度レベルを示すことを推奨しています。

Jetpack Compose は LocalContentAlpha を使用して、これを実装します。この CompositionLocal に値を指定することで、階層のコンテンツのアルファを指定できます。ネストされたコンポーザブルは、この値を使用してコンテンツにアルファ処理を適用できます。たとえば、Text と Icon は、LocalContentAlpha を使用するように調整された LocalContentColor の組み合わせをデフォルトで使用します。マテリアルは、ContentAlpha オブジェクトによってモデル化される一部の標準的なアルファ値（high、medium、disabled）を指定します。

// By default, both Icon & Text use the combination of LocalContentColor &
// LocalContentAlpha. De-emphasize content by setting content alpha
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text(
        // ...
    )
}
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Icon(
        // ...
    )
    Text(
        // ...
    )
}Material2Snippets.kt

CompositionLocal の詳細については、CompositionLocal を使用したローカルスコープのデータをご覧ください。

テキストの強調レベルが異なる記事のタイトルのスクリーンショット — **図 4.** テキストにさまざまなレベルの強調を適用して、情報の階層を視覚的に伝えます。テキストの 1 行目はタイトルであり、最も重要な情報が含まれているため、`ContentAlpha.high` が使用されています。2 行目には重要度の低いメタデータが含まれているため、`ContentAlpha.medium` を使用します。

ダークモード

Compose では、MaterialTheme コンポーザブルにさまざまな Colors のセットを指定することで、ライトテーマとダークテーマを実装します。

@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = if (darkTheme) DarkColors else LightColors,
        /*...*/
        content = content
    )
}Material2Snippets.kt

この例では、MaterialTheme は独自のコンポーズ可能な関数でラップされています。この関数は、ダークモードを使用するかどうかを指定するパラメータを受け取ります。この場合、関数はデバイスのテーマ設定をクエリすることで、darkTheme のデフォルト値を取得します。

次のようなコードを使用すると、現在の Colors がライトテーマかダークテーマかを確認できます。

val isLightTheme = MaterialTheme.colors.isLight
Icon(
    painterResource(
        id = if (isLightTheme) {
            R.drawable.ic_sun_24
        } else {
            R.drawable.ic_moon_24
        }
    ),
    contentDescription = "Theme"
)Material2Snippets.kt

エレベーションオーバーレイ

マテリアルでは、ダークモードでエレベーションの高いサーフェスにエレベーションオーバーレイが適用され、背景が明るくなります。サーフェスの標高が高いほど（暗黙の光源に近づくほど）、サーフェスは明るくなります。

Surface コンポーザブルは、暗い色を使用するときにこれらのオーバーレイを自動的に適用します。サーフェスを使用する他のマテリアルコンポーザブルも同様です。

Surface(
    elevation = 2.dp,
    color = MaterialTheme.colors.surface, // color will be adjusted for elevation
    /*...*/
) { /*...*/ }Material2Snippets.kt

アプリのスクリーンショット。さまざまな高度レベルの要素に使用されている微妙に異なる色が表示されている — **図 5.** カードとボトムナビゲーションの両方で、背景として `surface` 色が使用されています。カードとボトムナビゲーションは背景よりも高い標高レベルにあるため、色がわずかに異なります。カードは背景よりも明るく、ボトムナビゲーションはカードよりも明るくなっています。

Surface を含まないカスタムシナリオの場合は、LocalElevationOverlay を使用します。これは、Surface コンポーネントで使用される ElevationOverlay を含む CompositionLocal です。

// Elevation overlays
// Implemented in Surface (and any components that use it)
val color = MaterialTheme.colors.surface
val elevation = 4.dp
val overlaidColor = LocalElevationOverlay.current?.apply(
    color, elevation
)Material2Snippets.kt

標高オーバーレイを無効にするには、コンポーザブル階層の選択したポイントで null を指定します。

MyTheme {
    CompositionLocalProvider(LocalElevationOverlay provides null) {
        // Content without elevation overlays
    }
}Material2Snippets.kt

限定的なカラーアクセント

マテリアルでは、ほとんどの場合、primary 色よりも surface 色を優先して使用することで、ダークモードに限定的な色のアクセントを適用することを推奨しています。TopAppBar や BottomNavigation などのマテリアルコンポーザブルは、デフォルトでこの動作を実装しています。

マテリアルダークモードのスクリーンショット。色のアクセントを限定するために、プライマリカラーではなくサーフェスカラーを使用している上部のアプリバーが表示されている — **図 6.** 色のアクセントが限定されたマテリアルダークモード。ライトモードではプライマリカラー、ダークモードではサーフェスカラーがトップアプリバーに使用されます。

カスタムシナリオでは、primarySurface 拡張プロパティを使用します。

Surface(
    // Switches between primary in light theme and surface in dark theme
    color = MaterialTheme.colors.primarySurface,
    /*...*/
) { /*...*/ }Material2Snippets.kt

タイポグラフィ

マテリアルでは、タイプシステムが定義されており、意味する内容に基づいて名付けられたスタイルを少数使用することが推奨されています。

さまざまなスタイルの各種書体の例 — **図 7.** マテリアルタイプシステム。

Compose は、Typography クラス、TextStyle クラス、フォント関連クラスを使用して型システムを実装します。Typography コンストラクタにはスタイルごとにデフォルトが用意されているため、カスタマイズしないものは省略できます。

val raleway = FontFamily(
    Font(R.font.raleway_regular),
    Font(R.font.raleway_medium, FontWeight.W500),
    Font(R.font.raleway_semibold, FontWeight.SemiBold)
)

val myTypography = Typography(
    h1 = TextStyle(
        fontFamily = raleway,
        fontWeight = FontWeight.W300,
        fontSize = 96.sp
    ),
    body1 = TextStyle(
        fontFamily = raleway,
        fontWeight = FontWeight.W600,
        fontSize = 16.sp
    )
    /*...*/
)
MaterialTheme(typography = myTypography, /*...*/) {
    /*...*/
}Material2Snippets.kt

全体で同じ書体を使用する場合は、defaultFontFamily パラメータを指定し、TextStyle 要素の fontFamily を省略します。

val typography = Typography(defaultFontFamily = raleway)
MaterialTheme(typography = typography, /*...*/) {
    /*...*/
}Material2Snippets.kt

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

TextStyle 要素には MaterialTheme.typography を使用してアクセスします。次のように TextStyle 要素を取得します。

Text(
    text = "Subtitle2 styled",
    style = MaterialTheme.typography.subtitle2
)Material2Snippets.kt

目的が異なるさまざまな書体の混在を示すスクリーンショット — **図 8.** さまざまな書体やスタイルを使用して、ブランドを表現できます。

図形

マテリアルではシェイプシステムが定義されており、大、中、小のコンポーネントのシェイプを定義できます。

さまざまなマテリアルデザインシェイプを示しています — **図 9.** マテリアルシェイプシステム。

Compose は Shapes クラスでシェイプシステムを実装します。これにより、サイズカテゴリごとに CornerBasedShape を指定できます。

val shapes = Shapes(
    small = RoundedCornerShape(percent = 50),
    medium = RoundedCornerShape(0f),
    large = CutCornerShape(
        topStart = 16.dp,
        topEnd = 0.dp,
        bottomEnd = 0.dp,
        bottomStart = 16.dp
    )
)

MaterialTheme(shapes = shapes, /*...*/) {
    /*...*/
}Material2Snippets.kt

多くのコンポーネントで、こうしたシェイプがデフォルトで使用されます。たとえば、Button、TextField、FloatingActionButton はデフォルトで small、AlertDialog はデフォルトで medium、ModalDrawer はデフォルトで large になります。完全なマッピングについては、シェイプスキームの参照をご覧ください。

図形を使用する

Shape 要素には MaterialTheme.shapes を使用してアクセスします。次のようなコードで Shape 要素を取得します。

Surface(
    shape = MaterialTheme.shapes.medium, /*...*/
) {
    /*...*/
}Material2Snippets.kt

マテリアルシェイプを使用して要素の状態を伝えるアプリのスクリーンショット — **図 10.** 図形を使用してブランドや状態を表します。

デフォルトスタイル

Compose には、Android View のデフォルトスタイルに相当するコンセプトはありません。Material コンポーネントをラップする独自の overload コンポーザブル関数を作成することで、同様の機能を提供できます。たとえば、ボタンのスタイルを作成するには、独自のコンポーズ可能な関数でボタンをラップし、変更したいパラメータを直接設定して、他のパラメータをコンテナコンポーザブルのパラメータとして公開します。

@Composable
fun MyButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.secondary
        ),
        onClick = onClick,
        modifier = modifier,
        content = content
    )
}Material2Snippets.kt

テーマオーバーレイ

Compose で Android View のテーマオーバーレイと同等のものを実現するには、MaterialTheme コンポーザブルをネストします。MaterialTheme は色、タイポグラフィ、シェイプをデフォルトで現在のテーマ値に設定するため、テーマでこれらのパラメータのいずれか 1 つのみが設定されている場合、他のすべてのパラメータはデフォルト値を保持します。

また、View ベースの画面を Compose に移行する場合は、android:theme 属性の使い方に注意してください。Compose UI ツリーの該当部分に新しい MaterialTheme が必要になる場合があります。

この例では、詳細画面の大部分に PinkTheme を使用し、関連セクションに BlueTheme を使用しています。次のスクリーンショットとコードは、このコンセプトを示しています。

ネストされたテーマを示すアプリのスクリーンショット。メイン画面はピンクのテーマ、関連セクションは青のテーマが適用されている — **図 11.** ネストされたテーマ。

@Composable
fun DetailsScreen(/* ... */) {
    PinkTheme {
        // other content
        RelatedSection()
    }
}

@Composable
fun RelatedSection(/* ... */) {
    BlueTheme {
        // content
    }
}Material2Snippets.kt

コンポーネントの状態

クリックや切り替えなど、操作可能なマテリアルコンポーネントには、さまざまな視覚状態が存在します。状態には「enabled」、「disabled」、「press」などがあります。

コンポーザブルには、多くの場合 enabled パラメータが含まれます。false に設定すると、操作ができなくなり、色やエレベーションなどのプロパティが変更され、コンポーネントの状態を視覚的に伝えることができます。

有効なボタンと無効なボタンの 2 つのボタンのスクリーンショット。それぞれの視覚的な状態が示されている — **図 12.** `enabled = true`（左）と `enabled = false`（右）のボタン。

ほとんどの場合、色や標高などの値にはデフォルトを使用できます。さまざまな状態で使用される値を構成する必要がある場合は、クラスとコンビニエンス関数を使用できます。次のボタンの例を考えてみましょう。

Button(
    onClick = { /* ... */ },
    enabled = true,
    // Custom colors for different states
    colors = ButtonDefaults.buttonColors(
        backgroundColor = MaterialTheme.colors.secondary,
        disabledBackgroundColor = MaterialTheme.colors.onBackground
            .copy(alpha = 0.2f)
            .compositeOver(MaterialTheme.colors.background)
        // Also contentColor and disabledContentColor
    ),
    // Custom elevation for different states
    elevation = ButtonDefaults.elevation(
        defaultElevation = 8.dp,
        disabledElevation = 2.dp,
        // Also pressedElevation
    )
) { /* ... */ }Material2Snippets.kt

有効状態と無効状態の 2 つのボタンの色と標高が調整されたスクリーンショット — **図 13.** `enabled = true`（左）と `enabled = false`（右）のボタン。色と標高の値を調整しています。

Ripples

マテリアルコンポーネントは、リップルを使用して操作中であることを示します。階層で MaterialTheme を使用している場合、Ripple は clickable や indication などの修飾子内のデフォルトの Indication として使用されます。

ほとんどの場合、デフォルトの Ripple を使用できます。外観を構成する必要がある場合は、RippleTheme を使用して、色やアルファなどのプロパティを変更できます。

RippleTheme を拡張して、defaultRippleColor ユーティリティ関数と defaultRippleAlpha ユーティリティ関数を利用できます。次に、LocalRippleTheme を使用して、階層内でカスタムリップルテーマを指定します。

@Composable
fun MyApp() {
    MaterialTheme {
        CompositionLocalProvider(
            LocalRippleTheme provides SecondaryRippleTheme
        ) {
            // App content
        }
    }
}

@Immutable
private object SecondaryRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = RippleTheme.defaultRippleColor(
        contentColor = MaterialTheme.colors.secondary,
        lightTheme = MaterialTheme.colors.isLight
    )

    @Composable
    override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
        contentColor = MaterialTheme.colors.secondary,
        lightTheme = MaterialTheme.colors.isLight
    )
}Material2Snippets.kt

タップしたときにさまざまなリップル効果が表示されるボタンを示す GIF アニメーション — **図 14.** `RippleConfiguration` を使用して異なるリップル値を指定したボタン。

詳細

Compose のマテリアルテーマ設定の詳細については、以下の参考情報をご覧ください。

Codelab

Jetpack Compose のテーマ設定

動画

Jetpack Compose の Material You

あなたへのおすすめ

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