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 サンプルアプリの設計では、プライマリ コンテナの上に 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, ) }
返信ナビゲーション ドロワーで、コンテナのセカンダリ カラーとターシャリ カラーを対照的に使用して強調とアクセントを付ける方法を確認できます。
タイポグラフィ
マテリアル デザイン 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 には、マテリアル 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 ), // .. ) // ..
マテリアル デザイン タイプスケールの 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 での強調は、さまざまな色とその色の組み合わせを使用して提供されます。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 = { } ) } }
あらゆるサイズのデバイスに対して没入型のユーザー エクスペリエンスを提供するには、デフォルトのテーマ設定で両方を使用して返信します。
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 以降では、API レベルに関係なく、スクロール コンテナ コンポーザブル(LazyColumn
、LazyRow
、LazyVerticalGrid
など)でストレッチ オーバースクロールがデフォルトで有効になっています。
ユーザー補助
マテリアル コンポーネントに組み込まれているユーザー補助標準は、インクルーシブなプロダクト デザインの基盤を提供するように設計されています。プロダクトのユーザー補助を理解することで、ロービジョン、視覚障がい、聴覚障がい、認知障がい、運動障がい、状況障がい(腕の骨折など)を持つユーザーのユーザビリティが向上します。
色のユーザー補助
ダイナミック カラーは、色のコントラストに関するユーザー補助基準を満たすように設計されています。 色調パレットのシステムは、任意のカラーパターンをデフォルトでアクセス可能にするうえで重要です。
マテリアルのカラーシステムは、アクセス可能なコントラスト比を満たすために使用できる標準のトーン値と測定値を提供します。
すべてのマテリアル コンポーネントと動的テーマ設定では、ユーザー補助要件を満たすように選択された色調パレットから上記のカラーロールがすでに使用されています。ただし、コンポーネントをカスタマイズする場合は、適切なカラーロールを使用し、不一致が発生しないようにしてください。
プライマリでは 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 のカスタム デザイン システム