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
   

   View Slide

2. Agenda
   • Material Design
   3
   を理解する
   
   
   • Color SystemとDynamic Colorを理解する
   
   
   • GlanceでWidgetのJetpack Compose実装に触れる
   
   
   • Glanceでの実践的なColor Themeの実装
   

   View Slide

3. Material Designと
   Material
   3
   の基本
   

   View Slide

4. Material Design
   Material Design is a design system built and supported
   by Google designers and developers since
   2 0 1 4
   .
   

   View Slide

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/#
   

   View Slide

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/
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. Androidでの具体的な実装
   Android
   1 2
   以降の端末でのWallpaper & Style
   
   
   JetpackでのM
   3
   ライブラリ提供
   

   View Slide

10. Colors in Material Design
    

    View Slide

11. Colors in M
    1
    /M
    2
    • WCAG(Web Content Accessibility
    Guidelines)のコントラスト達成基準
    に配慮した配⾊を⾏うのが難しい
    

    View Slide

12. Colors in M
    3
    

    View Slide

13. View Slide

14. TokenとRole
    Token: デザインの最⼩の要素の値にラベリングをしたもの
    
    
    Role: Design System内でのTokenの役割を⽰す
    
    
    M
    3
    のデザイン要素はShape, Color, Typography
    

    View Slide

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
    

    View Slide

16. Material Theme Builder (M
    3
    )
    https://m
    3
    .material.io/theme-builder
    

    View Slide

17. Colors in M
    3
    Source colorからKey colorを⽣成
    

    View Slide

18. Colors in M
    3
    Key colorから
    
    
    Tonal paletteを⽣成
    

    View Slide

19. Color Scheme
    Tonal paletteから
    Color Schemeを
    ⽣成
    

    View Slide

20. Color Scheme
    

    View Slide

21. Dynamic Color
    

    View Slide

22. Colors in M
    3
    まとめ
    • ⼈間の⾒やすいコントラストを考慮
    したColor Scheme
    
    
    • Dynamic Colorはパーソナライズさ
    れた⾊と調和する配⾊をアプリから
    利⽤できる
    
    
    • パーソナライズされたホーム上で調
    和する⾊でWidgetを実装できる
    

    View Slide

23. AppWidgetと
    RemoteViewの基本
    

    View Slide

24. Android App Widget
    

    View Slide

25. Jetpack Glanceを使った
    ComposeによるApp Widget
    

    View Slide

26. Sources
    AndroidManifest.xml
    

    app_widget_provider_info.xml
    
    
    GlanceAppWidgetReceiver
    GlanceAppWidget
    

    

    View Slide

27. build.gradle
    implementation "androidx.glance:glance-appwidget:1.0.0"
    🎉
    1
    .
    0
    .
    0
    Released at Sept
    6
    

    View Slide

28. GlanceAppWidget
    class GlanceSimpleAppWidget : GlanceAppWidget() {
    override suspend fun provideGlance(
    context: Context, id: GlanceId
    ) = provideContent {
    Text("glance")
    }
    }
    androidx.glance.text

    ComposeͰ͸ͳ͍
    

    View Slide

29. GlanceAppWidgetReceiver
    class GlanceSampleAppWidgetReceiver :
    GlanceAppWidgetReceiver() {
    override val glanceAppWidget =
    GlanceSampleAppWidget()
    }
    

    View Slide

30. Glance x
    
    
    Material
    3
    Theme対応
    

    View Slide

31. build.gradle
    implementation "androidx.glance:glance-material3:1.0.0"
    

    View Slide

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
    )
    

    View Slide

33. GlanceThemeの適⽤
    override suspend fun provideGlance(
    context: Context, id: GlanceId
    ) = provideContent {
    GlanceTheme {
    GlanceContents()
    }
    }
    

    View Slide

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
    ),
    )
    }
    }
    

    View Slide

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Λ࢖͏
    

    View Slide

36. Text
    Text(
    "glance",
    style = TextStyle(
    color = GlanceTheme.colors.onBackground,
    fontSize = 48.sp
    ),
    )
    

    View Slide

37. View Slide

38. Dynamic Colorを使わない
    GlanceTheme(
    colors = ColorProviders(
    light = lightColorScheme,
    dark = darkColorScheme,
    )
    ) {
    GlanceContents()
    }
    

    View Slide

39. Glance x
    
    
    Dynamic Colorの活⽤
    

    View Slide

40. Material
    3
    Colorの利点
    • M
    3
    のBaseline Color Schemeはコントラストまで考慮されているため⾒や
    すく馴染みやすい
    
    
    • Material Theme Builderなどのサポートも充実しており、Color Scheme
    をつくるのが簡単
    
    
    • Baseline Color Schemeを使っていればDynamic Colorの導⼊は容易
    

    View Slide

41. M
    3
    導⼊の課題
    • Material
    3
    をいちから導⼊する場合、もしくは既存のアプリに導⼊
    すると、Design Systemをいちから作ることになるため対応が重い
    
    
    • 利⽤したいブランドカラーとカラーパレットが⼀致しない場合の
    調整が難しい
    
    
    • Dynamic Colorを使えるのは実質Android
    1 2
    以降のみであり他の
    プラットフォームと⾜並みを揃えるのが難しい
    
    
    • 画⾯全体を使うアプリでユーザーのカスタマイズを反映すること
    が体験の向上に繋がるかは検討が必要
    

    View Slide

42. Glance x M
    3
    Dynamic Colorのススメ
    • GlanceThemeはDynamic Color前提の構成になっており導⼊が
    極めて容易
    
    
    • Dynamic Colorはパーソナライズされたホームに置くWidgetと
    相性が良い
    
    
    • 本体のアプリとある程度独⽴をしているのでGlanceにのみM
    3
    Colorを導⼊することも可能
    

    View Slide

43. Thank you !
    

    View Slide

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
    

    View Slide

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
    

    View Slide