Jetpack Compose には、マテリアル デザインの進化版であるマテリアル デザイン 3 の実装が用意されています。マテリアル 3 には、更新されたテーマ設定、コンポーネント、ダイナミック カラーなどの Material You のパーソナライズ機能が含まれており、Android 12 以降の新しいビジュアル スタイルとシステム UI と調和するように設計されています。
以下では、Reply サンプルアプリを例として使用し、マテリアル デザイン 3 の実装について説明します。Reply サンプルは、完全にマテリアル デザイン 3 に基づいています。
依存関係
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 コンポーネントに自動的に反映されます。
Jetpack Compose は、M3 の MaterialTheme コンポーザブルを使用して、これらのコンセプトを実装しています。
MaterialTheme(
colorScheme = /* ...
typography = /* ...
shapes = /* ...
) {
// M3 app content
}
アプリ コンテンツのテーマを設定するには、アプリに固有のカラーパターン、タイポグラフィ、シェイプを定義します。
カラーパターン
カラーパターンの基盤は、5 つの主要なカラーのセットです。これらの色はそれぞれ、マテリアル 3 コンポーネントで使用される 13 トーンの色調パレットに関連しています。たとえば、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 に適用されます。このカラーパレットは、ライトとダークのカラーパターンを生成するための出発点として使用されます。
ダイナミック カラーは 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 サンプルアプリのデザインでは、選択されたアイテムを強調するために、プライマリ コンテナの上にプライマリ コンテナ上の色を使用しています。
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,
)
}
ここでは、Reply ナビゲーション ドロワーで、コンテナのセカンダリ カラーとターシャリ カラーを対照的に使用し、強調とアクセントを作成する方法を確認できます。
タイポグラフィ
マテリアル デザイン 3 では、マテリアル デザイン 2 から調整されたテキスト スタイルを含むタイプスケールが定義されています。名前とグループ化は、表示、見出し、タイトル、本文、ラベルに簡略化され、それぞれに大、中、小のサイズがあります。
| モジュール 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 には、既存の 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
),
// ..
)
// ..
マテリアル デザイン タイプのスケールの 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
),
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 */
}
他にも Compose の一部である RectangleShape と CircleShape という 2 つのシェイプがあります。長方形の場合は枠線の丸みがなく、円は完全な円で囲まれています。
Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
以下の例に、デフォルトのシェイプ値が適用されたコンポーネントの例を示します。
マテリアル ガイドラインでシェイプの適用についてご確認ください。
強調
M3 での強調は、さまざまなバリエーションと色の組み合わせ（on-color）によって実現されます。M3 では、UI に強調を追加する方法が 2 つあります。
- 拡張 M3 カラーシステムの on-surface、on-surface-variants 色に加えて、サーフェス、surface-variant、背景を使用します。たとえば、surface を on-surface-variant とともに使用し、surface-variant を on-surface と併用すると、異なる強調レベルを指定できます。
- テキストでは異なるフォントの太さを使用する。ここまでで、タイプスケールにカスタム ウェイトを設定して、異なる強調を指定できることを確認しました。
bodyLarge = TextStyle(
fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
fontWeight = FontWeight.Normal
)
エレベーション
マテリアル 3 では、主に色調カラー オーバーレイを使用してエレベーションを表現します。これは、コンテナとサーフェスを区別する新しい方法です。色調エレベーションを高めると、シャドウに加えて、より目立つ色調が使用されます。
ダークモードのエレベーション オーバーレイも、マテリアル 3 の色調カラー オーバーレイに変更されました。オーバーレイの色は、プライマリ カラースロットで指定されます。
M3 サーフェス（ほとんどの M3 コンポーネントの背後にあるバッキング コンポーザブル）は、色調エレベーションとシャドウ エレベーションの両方をサポートしています。
Surface(
modifier = Modifier,
tonalElevation = /*...
shadowElevation = /*...
) {
Column(content = content)
}
マテリアル コンポーネント
マテリアル デザインには豊富なマテリアル コンポーネント（ボタン、チップ、カード、ナビゲーション バーなど）が付属しています。これらはすでにマテリアル テーマ設定に準拠しており、美しいマテリアル デザイン アプリの作成に役立ちます。デフォルト プロパティのコンポーネントの使用をすぐに開始できます。
Button(onClick = { /*..*/ }) {
Text(text = "My Button")
}
M3 には、強調とアテンションに従ってさまざまなロールで使用できる同じコンポーネントの多くのバージョンが用意されています。
- 最大強調アクション用の拡張フローティング アクション ボタン:
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 コンポーネントなど、さまざまなユースケースと画面サイズに合わせて特別に設計されたさまざまなコンポーネント スイートが用意されています。
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（右）の返信のショーケースデフォルトのテーマ設定で両方を使用して返信することで、あらゆるサイズのデバイスで没入型のユーザー エクスペリエンスを提供できます。
NavigationDrawer は、詳細を表示する十分なスペースがある中～大サイズのタブレットに使用されます。PermanentNavigationDrawer または ModalNavigationDrawer を NavigationRail と併用できます。
PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
Destinations.entries.forEach { replyDestination ->
NavigationRailItem(
selected = selectedDestination == replyDestination,
onClick = { },
icon = { },
label = { }
)
}
}) {
}
ナビゲーション オプションにより、ユーザー エクスペリエンス、エルゴノミクス、到達性が向上します。 マテリアル ナビゲーション コンポーネントの詳細については、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 以降ではすべてのマテリアル コンポーネントでスパークル リップルを利用できます。
オーバースクロール
オーバースクロールで、スクロール コンテナの端でストレッチ効果が使用されるようになりました。Compose Foundation 1.1.0 以降のスクロール コンテナ コンポーザブル（LazyColumn、LazyRow、LazyVerticalGrid など）では、API レベルに関係なく、ストレッチ オーバースクロールがデフォルトで有効になっています。
ユーザー補助
マテリアル コンポーネントに組み込まれているユーザー補助標準は、インクルーシブなプロダクト設計の基盤を提供するように設計されています。プロダクトのユーザー補助機能を理解することで、ロービジョン、視覚障がい、聴覚障がい、認知障がい、運動障がい、状況障がい（腕の骨折など）を持つユーザーなど、すべてのユーザーのユーザビリティが向上します。
色のユーザー補助
ダイナミック カラーは、色のコントラストに関するユーザー補助基準を満たすように設計されています。色調パレットのシステムは、カラーパターンにデフォルトでアクセス可能にするために不可欠です。
マテリアルのカラーシステムは、アクセス可能なコントラスト比を満たすために使用できる標準のトーン値と測定値を提供します。
すべてのマテリアル コンポーネントと動的テーマ設定では、ユーザー補助要件を満たすように選択された色調パレットから上記のカラーロールがすでに使用されています。ただし、コンポーネントをカスタマイズする場合は、適切なカラーロールを使用して、不一致が発生しないようにしてください。
プライマリでは 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
)
) {
}
タイポグラフィのユーザー補助機能
M3 タイプスケールは、静的なタイプのランプと値を更新して、デバイス間でスケーリングする、シンプルかつ動的なサイズ カテゴリのフレームワークを提供します。
たとえば M3 では、ディスプレイ（小）に、スマートフォンやタブレットなどのデバイスのコンテキストに応じて異なる値を割り当てることができます。
大画面
マテリアルはアダプティブ レイアウトと折りたたみ式デバイスに関するガイダンスを提供し、アプリにアクセスできるようにし、大型デバイスを持っているユーザーのエルゴノミクスを改善します。
マテリアルでは、さまざまな種類のナビゲーションを使用して、大型デバイスのユーザー エクスペリエンスを向上させることができます。
詳しくは、Android の大画面ガイドラインと、アダプティブでユーザー補助のデザインに関する Reply のサンプルをご覧ください。
詳細
Compose のマテリアル テーマ設定について詳しくは、以下のリソースをご覧ください。
サンプルアプリ
ドキュメント
API リファレンスとソースコード
動画
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Compose でマテリアル 2 からマテリアル 3 に移行する
- Compose のマテリアル デザイン 2
- Compose のカスタム デザイン システム