Jetpack Compose には、マテリアル デザインの進化版であるマテリアル デザイン 3 の実装が用意されています。マテリアル 3 には、最新のテーマ設定、コンポーネント、ダイナミック カラーなどの Material You のパーソナライズ機能が含まれており、Android 12 以降の新しい視覚的スタイルとシステム UI と調和するように設計されています。
以下では、マテリアル デザイン 3 の実装について説明します。 Reply サンプルアプリを例として使用します。Reply のサンプルは、 全面的にマテリアルデザイン 3 に 基づいて設計されているため
<ph type="x-smartling-placeholder">依存関係
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 }
マテリアル テーマ設定
M3 テーマには、カラーパターン、 タイポグラフィとシェイプ。カスタマイズする場合 変更すると、変更内容が M3 コンポーネントに自動的に反映されます。 理解することが重要です。
Jetpack Compose は、M3 MaterialTheme
コンポーザブルを使用して、これらのコンセプトを実装します。
MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }
アプリのコンテンツにテーマを適用するには、アプリ固有のカラーパターン、タイポグラフィ、シェイプを定義します。
カラーパターン
カラーパターンの基盤は、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) // .. // ..
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 サンプルアプリの設計では、Google 検索の上に on-primary-container の色がある プライマリ コンテナ: 選択したアイテムを強調します。
<ph type="x-smartling-placeholder">
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, ) }
返信のナビゲーションドロワーで 2 番目と 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 ), // .. ) // ..
マテリアル デザインの 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 の Shapes
クラスが用意されています。
新しい M3 シェイプ。M3 のシェイプ スケールは、タイプスケールに似ており、UI 全体でさまざまなシェイプを表現できます。
シェイプにはさまざまなサイズがあります。
- XS
- 小
- 中
- 大
- 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 */ }
他にも RectangleShape
と CircleShape
の 2 つのシェイプがあります。
説明します。長方形のシェイプに枠線の半径がなく、円がフル
丸付きエッジ:
Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }
以下の例は、デフォルトのシェイプ値を持つコンポーネントの一部を示しています。 適用する方法:
<ph type="x-smartling-placeholder">詳しくは、シェイプの適用に関するマテリアル ガイドラインをご覧ください。
強調
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 )
エレベーション
マテリアル 3 では、主に色調カラー オーバーレイを使用してエレベーションを表現します。これは、コンテナとサーフェスを区別する新しい方法です。色調エレベーションを高くすると、シャドウに加えて、より目立つ色調が使用されます。
<ph type="x-smartling-placeholder">ダークモードのエレベーション オーバーレイも、マテリアル 3 の色調カラー オーバーレイに変更されました。オーバーレイの色は、プライマリ カラースロットで指定されます。
M3 サーフェス(ほとんどの M3 コンポーネントの背後にあるバッキング コンポーザブル)は、色調エレベーションとシャドウ エレベーションの両方をサポートします。
Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }
マテリアル コンポーネント
マテリアル デザインには、マテリアル テーマ設定に準拠した豊富なマテリアル コンポーネント(ボタン、チップ、カード、ナビゲーション バーなど)が用意されており、美しいマテリアル デザイン アプリの作成に役立ちます。まずは コンポーネントをデフォルト プロパティのまま使用できます。
Button(onClick = { /*..*/ }) { Text(text = "My Button") }
M3 には、強調と注意に応じて異なるロールで使用される、同じコンポーネントの多くのバージョンが用意されています。
<ph type="x-smartling-placeholder">- </ph>
- 最も強調されているアクションに対応する拡張されたフローティング アクション ボタン:
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 には、さまざまなユースケースと画面サイズ向けに特別に設計された、ボタン、アプリバー、ナビゲーション コンポーネントなど、さまざまなコンポーネント スイートが用意されています。
ナビゲーション コンポーネント
マテリアルには、さまざまな画面サイズと状態に応じて、ナビゲーションの実装に役立つナビゲーション コンポーネントがいくつか用意されています。
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
は、詳細を表示するのに十分なスペースがある中程度から大型のタブレットで使用します。NavigationRail
とともに PermanentNavigationDrawer
または ModalNavigationDrawer
の両方を使用できます。
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 以降ではすべてのマテリアル コンポーネントでスパークル リップルを使用できます。
オーバースクロール
オーバースクロールで、スクロール コンテナの端でストレッチ効果が使用されるようになりました。
スクロール コンテナ コンポーザブルでは、ストレッチ オーバースクロールがデフォルトでオンになっています。
例: LazyColumn
、LazyRow
、LazyVerticalGrid
-
Compose Foundation 1.1.0 以降(API レベルに関係なく)。
ユーザー補助
マテリアル コンポーネントに組み込まれているユーザー補助機能標準は、 インクルーシブなプロダクト設計の基盤となりますプロダクトのアクセシビリティを理解することで、視覚障がい、盲目、聴覚障がい、認知障がい、運動障がい、状況的な障がい(腕の骨折など)を持つユーザーを含むすべてのユーザーのユーザビリティを向上させることができます。
色のユーザー補助
ダイナミック カラーは、色のコントラストに関するユーザー補助基準を満たすように設計されています。 あらゆるカラーパターンを利用しやすくするためには、色調パレットのシステムが不可欠です。 できます。
マテリアルのカラーシステムは、アクセス可能なコントラスト比を満たすために使用できる標準のトーン値と測定値を提供します。
<ph type="x-smartling-placeholder">すべてのマテリアル コンポーネントとダイナミック テーマ設定では、すでに上記のカラーロールを使用しています ユーザー補助を考慮して選択された一連の色調パレットから選択 提供します。ただし、コンポーネントをカスタマイズする場合は、適切な色ロールを使用して、不一致を回避してください。
プライマリ上で 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 では、ディスプレイ ネットワーク(S)にはキャンペーンごとに デバイスに応じて自動的に作成されます。
大画面
マテリアルでは、アプリをアクセスしやすく、大型デバイスを保持するユーザーの人間工学を改善するために、適応型レイアウトと折りたたみ式デバイスに関するガイダンスが提供されています。
マテリアルには、大型デバイスで優れたユーザー エクスペリエンスを提供するために役立つさまざまなナビゲーションが用意されています。
詳しくは、Android の大画面アプリの品質に関するガイドラインをご覧ください。 アダプティブで使いやすいデザインについては、Reply サンプルをご覧ください。
詳細
Compose のマテリアル テーマ設定の詳細については、次のリソースをご覧ください。
サンプルアプリ
ドキュメント
API リファレンスとソースコード
動画
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- Compose でマテリアル 2 からマテリアル 3 に移行する
- Compose のマテリアル デザイン 2
- Compose のカスタム デザイン システム