Jetpack Glanceではじめる Material 3 のColor 2 0 2 3 . 9 . 1 4 DroidKaigi @mochico

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

Material Designと Material 3 の基本

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

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

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/

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

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

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

Colors in Material Design

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

Colors in M 3

No content

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

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

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

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

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

Color Scheme Tonal paletteから Color Schemeを ⽣成

Color Scheme

Dynamic Color

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

AppWidgetと RemoteViewの基本

Android App Widget

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

Sources AndroidManifest.xml 
 app_widget_provider_info.xml GlanceAppWidgetReceiver GlanceAppWidget 


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

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

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

Glance x Material 3 Theme対応

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

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 )

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

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

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

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

No content

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

Glance x Dynamic Colorの活⽤

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

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

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

Thank you !

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

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