この記事は Gurupreet Singh, Developer Advocate; Android による Android Developers Blog の記事 " Material Design 3 for Compose hits stable " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
昨年 2022 年 10 月 24 日に、Compose マテリアル 3 (英語) の最初の安定版がリリースされました、このライブラリを使うと、マテリアル デザインの次の進化版であるマテリアル デザイン 3 (英語) を使って Jetpack Compose の UI を構築できます。マテリアル デザイン 3 は、皆さんのアプリに利用できます。
注 : 「マテリアル デザイン 3」、「マテリアル 3」、「M3」という用語はどれも同じものを指しています。
マテリアル 3 には、アップデートされたテーマ設定やコンポーネントのほか、ダイナミック カラーなどの新機能が含まれており、最新の Android のビジュアル スタイルやシステム UI との整合性が取れるようにデザインされています。
build.gradle ファイルに Compose Material 3 への依存関係を追加すると、アプリでマテリアル デザイン 3 を使い始めることができます。
// モジュールの build.gradle に依存関係を追加implementation "androidx.compose.material3:material3:$material3_version"
// モジュールの build.gradle に依存関係を追加
implementation "androidx.compose.material3:material3:$material3_version"
// ダイナミック カラーは Android 12 以降で利用可能val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.Sval colorScheme = when { dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current) dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current) darkTheme -> darkColorScheme(...) else -> lightColorScheme(...)}MaterialTheme( colorScheme = colorScheme, typography = typography, shapes = shapes) { // M3 App のコンテンツ}
Switch( checked = isChecked, onCheckedChange = { /*...*/ }, thumbContent = { Icon( imageVector = Icons.Default.Check, contentDescription = stringResource(id = R.string.switch_check) ) }, )
ModalNavigationDrawer { ModalDrawerSheet( drawerShape = MaterialTheme.shapes.small, drawerContainerColor = MaterialTheme.colorScheme.primaryContainer, drawerContentColor = MaterialTheme.colorScheme.onPrimaryContainer, drawerTonalElevation = 4.dp, ) { DESTINATIONS.forEach { destination -> NavigationDrawerItem( selected = selectedDestination == destination.route, onClick = { ... }, icon = { ... }, label = { ... } ) } }}
CenterAlignedTopAppBar( title = { Text(stringResources(R.string.top_stories)) }, scrollBehavior = scrollBehavior, navigationIcon = { /* ナビゲーション アイコン */}, actions = { /* アプリバーのアクション */} )
val typography = 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 ), ...}
bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp, baselineShift = BaselineShift.Subscript)
val shapes = Shapes( extraSmall = RoundedCornerShape(4.dp), small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp), extraLarge = RoundedCornerShape(28.dp))
// モジュールの build.gradle に依存関係を追加implementation "androidx.compose.material3:material3-window-size-class:$material3_version"
Scaffold( contentWindowInsets = WindowInsets(16.dp)) { // Scaffold のコンテンツ}
refContentProvider()
releaseWakeLock()
JobScheduler.schedule()
