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,
)
}
この [Reply] ナビゲーション ドロワーでは、コンテナの色の 2 次と 3 が、強調やアクセントを作成するためにどのように使用されているかを確認できます。
タイポグラフィ
マテリアル デザイン 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
}
テキスト スタイルを使用する
M3 の MaterialTheme コンポーザブルに提供されたタイポグラフィを取得するには、MaterialTheme.typography を使用します。
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 */
}
他にも 2 つのシェイプ（RectangleShape と CircleShape）があります。これらは Compose の一部です。長方形には枠線の半径がなく、円図形は丸で囲まれたエッジを示します。
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 を 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 コンポーネント
マテリアルには、さまざまな画面サイズや状態に応じたナビゲーションの実装に役立つナビゲーション コンポーネントもいくつか用意されています。
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 は、細部を表示するのに十分なスペースがある中～大型のタブレットに使用されます。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 など）では、API レベルに関係なく、Compose Foundation 1.1.0 以降では、ストレッチ オーバースクロールがデフォルトで有効になっています。
ユーザー補助
マテリアル コンポーネントに組み込まれているユーザー補助機能標準は、インクルーシブなプロダクト デザインの基盤を提供することを目的としています。プロダクトのユーザー補助機能を把握することで、ロービジョン、視覚障がい、聴覚障がい、認知機能障がい、運動機能障がい、状況障がい（腕の骨折など）を持つすべてのユーザーを含め、すべてのユーザーのユーザビリティを向上させることができます。
色のユーザー補助
ダイナミック カラーは、色のコントラストに関するユーザー補助基準を満たすように設計されています。あらゆるカラーパターンをデフォルトでアクセス可能にするには、色調パレットのシステムが不可欠です。
マテリアルのカラーシステムは、アクセス可能なコントラスト比を満たすために使用できる標準のトーン値と測定値を提供します。
すべてのマテリアル コンポーネントと動的テーマ設定では、ユーザー補助要件を満たすように選択された一連の色調パレットから、上記のカラーロールをすでに使用しています。ただし、コンポーネントをカスタマイズする場合は、適切なカラーロールを使用して、不一致を回避してください。
プライマリでは on-primary、プライマリ コンテナでは on-primary-container を使用します。また、他のアクセント カラーやニュートラル カラーにも同様に、ユーザーにとってのコントラストを提供します。
プライマリ上に 3 次コンテナを使用すると、ユーザーにとってはコントラストが弱いボタンになります。
// ✅ 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 のカスタム デザイン システム