Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Glanceではじめる Material 3のColor

mochico
September 14, 2023

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の基礎と活用法について考えていきます。

mochico

September 14, 2023
Tweet

More Decks by mochico

Other Decks in Technology

Transcript

  1. Jetpack Glanceではじめる


    Material
    3
    のColor
    2 0 2 3
    .
    9
    .
    1 4
    DroidKaigi


    @mochico

    View full-size slide

  2. Agenda
    • Material Design
    3
    を理解する


    • Color SystemとDynamic Colorを理解する


    • GlanceでWidgetのJetpack Compose実装に触れる


    • Glanceでの実践的なColor Themeの実装

    View full-size slide

  3. Material Designと
    Material
    3
    の基本

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  9. Androidでの具体的な実装
    Android
    1 2
    以降の端末でのWallpaper & Style


    JetpackでのM
    3
    ライブラリ提供

    View full-size slide

  10. Colors in Material Design

    View full-size slide

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

    View full-size slide

  12. Colors in M
    3

    View full-size slide

  13. TokenとRole
    Token: デザインの最⼩の要素の値にラベリングをしたもの


    Role: Design System内でのTokenの役割を⽰す


    M
    3
    のデザイン要素はShape, Color, Typography

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Colors in M
    3
    Key colorから


    Tonal paletteを⽣成

    View full-size slide

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

    View full-size slide

  19. Color Scheme

    View full-size slide

  20. Dynamic Color

    View full-size slide

  21. Colors in M
    3
    まとめ
    • ⼈間の⾒やすいコントラストを考慮
    したColor Scheme


    • Dynamic Colorはパーソナライズさ
    れた⾊と調和する配⾊をアプリから
    利⽤できる


    • パーソナライズされたホーム上で調
    和する⾊でWidgetを実装できる

    View full-size slide

  22. AppWidgetと
    RemoteViewの基本

    View full-size slide

  23. Android App Widget

    View full-size slide

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

    View full-size slide

  25. Sources
    AndroidManifest.xml

    app_widget_provider_info.xml


    GlanceAppWidgetReceiver
    GlanceAppWidget

    View full-size slide

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

    View full-size slide

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

    ComposeͰ͸ͳ͍

    View full-size slide

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

    View full-size slide

  29. Glance x


    Material
    3
    Theme対応

    View full-size slide

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

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

  33. @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 full-size slide

  34. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  37. Glance x


    Dynamic Colorの活⽤

    View full-size slide

  38. Material
    3
    Colorの利点
    • M
    3
    のBaseline Color Schemeはコントラストまで考慮されているため⾒や
    すく馴染みやすい


    • Material Theme Builderなどのサポートも充実しており、Color Scheme
    をつくるのが簡単


    • Baseline Color Schemeを使っていればDynamic Colorの導⼊は容易

    View full-size slide

  39. M
    3
    導⼊の課題
    • Material
    3
    をいちから導⼊する場合、もしくは既存のアプリに導⼊
    すると、Design Systemをいちから作ることになるため対応が重い


    • 利⽤したいブランドカラーとカラーパレットが⼀致しない場合の
    調整が難しい


    • Dynamic Colorを使えるのは実質Android
    1 2
    以降のみであり他の
    プラットフォームと⾜並みを揃えるのが難しい


    • 画⾯全体を使うアプリでユーザーのカスタマイズを反映すること
    が体験の向上に繋がるかは検討が必要

    View full-size slide

  40. Glance x M
    3
    Dynamic Colorのススメ
    • GlanceThemeはDynamic Color前提の構成になっており導⼊が
    極めて容易


    • Dynamic Colorはパーソナライズされたホームに置くWidgetと
    相性が良い


    • 本体のアプリとある程度独⽴をしているのでGlanceにのみM
    3
    Colorを導⼊することも可能

    View full-size slide

  41. 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 full-size slide

  42. 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 full-size slide