Jetpack Glanceではじめる Material 3のColor

https://2023.droidkaigi.jp/timetable/494625/

Material3の大きな特徴はホーム画面などユーザーのカスタマイズに応じてダイナミックに変化するカラーテーマです。
Jetpack GlanceはHome画面に表示するApp WidgetをJetpack Composeを使って実装できるライブラリです。
ホーム画面に置くWidgetと親和性の高いダイナミックカラーテーマを活用することでよりユーザーに最適化された体験を提供できます。
本セッションではGoogleI/O 2023と同時期に更新されたJetpack GlanceのThemeとMaterial3対応を通じてMaterial3の基礎と活用法について考えていきます。

Transcript

1. Jetpack Glanceではじめる Material 3 のColor 2 0 2 3 . 9 . 1 4 DroidKaigi @mochico
2. Agenda • Material Design 3 を理解する • Color SystemとDynamic Colorを理解する • GlanceでWidgetのJetpack Compose実装に触れる • Glanceでの実践的なColor Themeの実装
3. Material Designと Material 3 の基本
4. Material Design Material Design is a design system built and supported by Google designers and developers since 2 0 1 4 .
5. Material Design (M 1 ) • 2 0 1 4 • Material is metaphor inspired by paper • Bold, graphic, intentional • Motion provides meaning https://m 1 .material.io/#
6. Material Design 2 (M 2 ) 2 0 1 8 
 
 Material Theming: Material Theming is the ability to systematically customize Material Design to better re fl ect your product’s brand. https://m 2 .material.io/
7. Material Design 3 (M 3 ) 2 0 2 1 Material You: The new Material visual style and set of features embracing the personal and expressive needs of individual users, part of Material Design 3
8. Material You Material You design focuses on expression and fl uidity, with the goal of helping users create and own a single, cohesive experience catered to their needs. 
 As an Android partner, you're encouraged to incorporate Material You design into your Android devices in the following areas: • Dynamic color • Motion • Widgets https://material.io/blog/announcing-material-you
9. Androidでの具体的な実装 Android 1 2 以降の端末でのWallpaper & Style JetpackでのM 3 ライブラリ提供
10. Colors in Material Design
11. Colors in M 1 /M 2 • WCAG(Web Content Accessibility Guidelines)のコントラスト達成基準 に配慮した配⾊を⾏うのが難しい
12. Colors in M 3
14. TokenとRole Token: デザインの最⼩の要素の値にラベリングをしたもの Role: Design System内でのTokenの役割を⽰す M 3 のデザイン要素はShape, Color, Typography
15. Color Token / Role https://m 3 .material.io/styles/color/the-color-system/tokens#e 2 6 e 1 3 0 c-fa 6 7 - 4 8 e 1 - 8 1 ca-d 2 8 f 6 e 4 ed 3 9 8
16. Material Theme Builder (M 3 ) https://m 3 .material.io/theme-builder
17. Colors in M 3 Source colorからKey colorを⽣成
18. Colors in M 3 Key colorから Tonal paletteを⽣成
19. Color Scheme Tonal paletteから Color Schemeを ⽣成
20. Color Scheme
21. Dynamic Color
22. Colors in M 3 まとめ • ⼈間の⾒やすいコントラストを考慮 したColor Scheme • Dynamic Colorはパーソナライズさ れた⾊と調和する配⾊をアプリから 利⽤できる • パーソナライズされたホーム上で調 和する⾊でWidgetを実装できる
23. AppWidgetと RemoteViewの基本
24. Android App Widget
25. Jetpack Glanceを使った ComposeによるApp Widget
26. Sources AndroidManifest.xml 
 app_widget_provider_info.xml GlanceAppWidgetReceiver GlanceAppWidget 

27. build.gradle implementation "androidx.glance:glance-appwidget:1.0.0" 🎉 1 . 0 . 0 Released at Sept 6
28. GlanceAppWidget class GlanceSimpleAppWidget : GlanceAppWidget() { override suspend fun provideGlance( context: Context, id: GlanceId ) = provideContent { Text("glance") } } androidx.glance.text
 ComposeͰ͸ͳ͍
29. GlanceAppWidgetReceiver class GlanceSampleAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget = GlanceSampleAppWidget() }
30. Glance x Material 3 Theme対応
31. build.gradle implementation "androidx.glance:glance-material3:1.0.0"
32. GlanceThemeはcolorsのみ指定できる @Composable fun GlanceTheme( colors: ColorProviders = LocalColors.current, content: @GlanceComposable @Composable () -> Unit ) @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit )
33. GlanceThemeの適⽤ override suspend fun provideGlance( context: Context, id: GlanceId ) = provideContent { GlanceTheme { GlanceContents() } }
34. @Composable fun GlanceContents() { Column( modifier = GlanceModifier .background(GlanceTheme.colors.surface) .padding(8.dp) .cornerRadius(24.dp), horizontalAlignment = Alignment.Horizontal.CenterHorizontally, verticalAlignment = Alignment.CenterVertically ) { Image( modifier = GlanceModifier.size(100.dp), provider = ImageProvider(R.drawable.ic_android_black_24dp), contentDescription = "icon", colorFilter = ColorFilter.tint(GlanceTheme.colors.primary) ) Text( "glance", style = TextStyle( color = GlanceTheme.colors.onBackground, fontSize = 48.sp ), ) } }
35. Image Image( modifier = GlanceModifier.size(100.dp), provider = ImageProvider( resId = R.drawable.ic_android_black_24dp ), contentDescription = "icon", colorFilter = ColorFilter.tint(GlanceTheme.colors.primary) ) ௨ৗͷBaseline Color Schemeͱಉ͡Role,TokenΛ࢖͏
36. Text Text( "glance", style = TextStyle( color = GlanceTheme.colors.onBackground, fontSize = 48.sp ), )
38. Dynamic Colorを使わない GlanceTheme( colors = ColorProviders( light = lightColorScheme, dark = darkColorScheme, ) ) { GlanceContents() }
39. Glance x Dynamic Colorの活⽤
40. Material 3 Colorの利点 • M 3 のBaseline Color Schemeはコントラストまで考慮されているため⾒や すく馴染みやすい • Material Theme Builderなどのサポートも充実しており、Color Scheme をつくるのが簡単 • Baseline Color Schemeを使っていればDynamic Colorの導⼊は容易
41. M 3 導⼊の課題 • Material 3 をいちから導⼊する場合、もしくは既存のアプリに導⼊ すると、Design Systemをいちから作ることになるため対応が重い • 利⽤したいブランドカラーとカラーパレットが⼀致しない場合の 調整が難しい • Dynamic Colorを使えるのは実質Android 1 2 以降のみであり他の プラットフォームと⾜並みを揃えるのが難しい • 画⾯全体を使うアプリでユーザーのカスタマイズを反映すること が体験の向上に繋がるかは検討が必要
42. Glance x M 3 Dynamic Colorのススメ • GlanceThemeはDynamic Color前提の構成になっており導⼊が 極めて容易 • Dynamic Colorはパーソナライズされたホームに置くWidgetと 相性が良い • 本体のアプリとある程度独⽴をしているのでGlanceにのみM 3 Colorを導⼊することも可能
43. Thank you !
44. References • Material Design https://m 3 .material.io/ • Color - Style - Material Design https://m 1 .material.io/style/color.html#color-color-system • The color system - Material Design https://m 2 .material.io/design/color/the-color-system.html • Unveiling Material You - Material Design https://material.io/blog/announcing-material-you • Material Theme Builder https://m 3 .material.io/theme-builder • Material You: Applying dynamic color to your app and brand - YouTube https://www.youtube.com/watch? v= 4 bguZJwHqsQ • Material You & Figma: Bringing Dynamic Color & brand together - Rody Davis, Ivy Knight (Schema 2 0 2 1 ) - YouTube https://www.youtube.com/watch?v=clDuqcKgNBQ
45. References • Enable users to personalize their color experience in your app | Android Developers https:// developer.android.com/develop/ui/views/theming/dynamic-colors • App widgets overview | Android Developers https://developer.android.com/develop/ui/views/appwidgets/ overview • android/compose-samples: O ff i cial Jetpack Compose samples. https://github.com/android/compose- samples • Anatomy of Dynamic color | DroidKaigi 2 0 2 2 - inSmartBank https://blog.smartbank.co.jp/entry/ 2 0 2 2 / 1 0 / 0 6 / dynamic-color • Jetpack Compose で Material Design 3 | DroidKaigi 2 0 2 2 https:// 2 0 2 2 .droidkaigi.jp/timetable/ 3 6 3 6 1 2 • https://github.com/mochico/WidgetSample