Android DarkTheme

I/O '19 Extended Pangyo 행사에서 발표한 내용입니다.

Transcript

1. Android Dark Theme উࢿਊ (NAVER)
2. Android Dark Theme উࢿਊ (NAVER) Android Dark Theme extended Dark Theme
3. Android Dark Theme উࢿਊ (NAVER) Android Dark Theme extended Dark Theme 안성용 Android Developer at NAVER SOUP GDG Korea Slack soupyong@gmail.com
4. extended • Why? • OS Setting • Force Dark • DayNight • App theme setting • MDC 1.1.0 ݾର
5. extended Battery Environment Accessibility Up to 60% extended Why?
6. extended OS Setting • Android Q
 Settings > Display > Dark Theme ( 'যف਍ ప݃' QuickSettingب ࢜۽. ୶оؽ ) • Android P
 Settings > System > Developer options > Night mode ( ࢖ࢿ ױ݈਷ 'ঠр ݽ٘' QuickSetting ઁҕ ) New
 in Q
7. extended extended Force Dark New
 in Q • Qࠗఠ ࢎਊ оמ • জਸ ׮௼ ప݃۽ ੗ز ߸ജೞח ӝמ • ӝࠄ਷ Force Dark Disable
8. extended extended extended Custom Force Dark
9. extended • ݽٚ জਸ force-dark۽ ߄Լࠁח ѐߊ ݽ٘ • Android Q Settings > System > Developer options > Override dark-mode Override Force Dark • ೞ૑݅ Q Beta4 ীࢲח ز੘ೞ૑ ঋח׮. " F O R C E D A R K
10. extended • জী ੸ਊೞ۰ݶ ప݃੄ forceDarkAllowed ࣘࢿਸ true۽ ߸҃ೞݶ ػ׮.
 
 
 
 • ױ, Light ప݃݅ ForceDarkо ੸ਊؼ ࣻ ੓׮. <style name="AppTheme" parent="@style/Theme.MaterialComponents.Light> <item name="android:forceDarkAllowed">true</item> </style> Enable Force Dark F O R C E D A R K <style name="Theme.AppCompat.Light" parent="..."> <item name="isLightTheme">true</item> </style>
11. extended Disable Force Dark (Partially) F O R C E D A R K • Force Darkܳ ࠗ࠙੸ਵ۽ ઁ৻ೡ ࣻ ੓׮. 
 
 
 
 
 // For Kotlin view.isForceDarkAllowed = false // For Java view.setForceDarkAllowed(false) <!-- For Layout XML --> <View android:forceDarkAllowed="false" /> • ViewGroupী ੸ਊೞݶ ೞਤ View ݽفী ੸ਊغ૑݅,
 true۽ ࢸ੿ೞݶ ࠗݽ/੗ध View੄ falseܳ ޖदೠ׮.
12. extended DayNight AppCompatҗ MDC
13. extended New?
14. extended
15. extended
16. extended
17. extended
18. extended
19. extended Dark Theme
20. extended DayNight • ׮௼ ప݃ীࢲח -night resource qualifierо ഝࢿചػ׮. • Android 4.0 (API14) ੉࢚ ૑ਗ • AppCompat 1.1.0ীࢲ ز੘ ѐࢶ
21. extended • ܻࣗझח qualifierী ٮۄ ଵઑػ׮. • drawable-xxhdpi / values-ko / values-land ١੄ ܻࣗझ ಫ؊ܳ ݆੉ ࢎਊೞחؘ, ৈӝࢲ xxhdpi, ko, landо resource qualifierী ೧׼ػ׮. • Drawableਸ ৘۽ ٜয,
 drawable-hdpi੄ ঠрݽ٘ ܻࣗझח drawable-night-hdpiী ֍Ҋ
 drawable-land੄ ঠрݽ٘ ܻࣗझח drawable-land-nightী ֍ח Ѫ੉ ੸੺ೞ׮. Resource Qualifier D A Y N I G H T Qualifier: https://developer.android.com/guide/topics/resources/providing-resources#AlternativeResources
22. extended Resource Qualifier (-night) D A Y N I G H T • ׮ܲ ܻࣗझ୊ۢ -night ಫ؊ী ܻࣗझܳ ୶оೞݶ ػ׮.
 <!-- values/colors.xml --> <color name=“colorCustom">#000000</color> <!-- values-night/colors.xml --> <color name=“colorCustom">#ffffff</color> res/drawable/ic_example.png res/drawable-night/ic_example.png
23. extended D A Y N I G H T values/theme.xml <style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat.Light" /> values-night/theme.xml <style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat" /> values/theme.xml <style name="Theme.MaterialComponents.DayNight" parent="Theme.MaterialComponents.Light" /> values-night/theme.xml <style name="Theme.MaterialComponents.DayNight" parent="Theme.MaterialComponents" /> Theme
24. extended • MODE_NIGHT_YES
 ೦࢚ যنѱ ಴द • MODE_NIGHT_NO
 ೦࢚ ߋѱ ಴द • MODE_NIGHT_FOLLOW_SYSTEM
 दझమ ࢸ੿ী ٮۄ ߸҃ • MODE_NIGHT_AUTO_BATTERY
 ੺੹ݽ٘ীࢲ যنѱ ಴द Modes D A Y N I G H T App
 Compat 1.1.0 API21 ↑
25. extended • ׮௼ ప݃ ݽ٘ ࢸ੿ೞח ߑߨ // AppCompatDelegate.java public abstract void setLocalNightMode(@NightMode int mode); public static void setDefaultNightMode(@NightMode int mode) { ... } • ଵҊ: ч੉ in-memoryী ੷੢غ޲۽, ߹ب۽ чਸ ੷੢/ࠂҳ ೧ঠ ೠ׮. Set / Get night mode D A Y N I G H T • ׮௼ ప݃ ৈࠗܳ ഛੋೞח ߑߨ fun isDarkTheme(config: Configuration): Boolean { return config.uiMode and // andח &৬ زੌ Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES }
26. extended • UiModeо ߸҃ؼ ٸ, ૒੽ DayNight UIܳ ੸ਊೡ ࣻب ੓׮. Manual DayNight D A Y N I G H T <!-- AndroidManifest.xml --> <activity android:name=“.MainActivity" android:configChanges="uiMode" /> class MainActivity : AppCompatActivity() { override fun onConfigurationChanged(newConfig: Configuration) { super.onConfigurationChanged(newConfig) val isDarkTheme: Boolean = isDarkTheme(newConfig) ... UI সؘ੉౟ ... } }
27. extended App theme setting
28. extended • ইېח ҳӖীࢲ ӂ੢ೞח OS ߡ੹߹ জ ప݃ ࢸ੿ ২࣌ੑפ׮.
 Android Q ੉࢚: • ߋѱ • যنѱ • दझమ ࢸ੿ (ӝࠄ) Recommended A P P T H E M E S E T T I N G 
 Android P ੉ೞ: • ߋѱ • যنѱ • ੺੹ݽ٘ ࢸ੿ (ӝࠄ)
29. extended DayNight Modes A P P T H E M E S E T T I N G MODE_NIGHT_YES MODE_NIGHT_NO MODE_NIGHT_FOLLOW_SYSTEM MODE_NIGHT_AUTO_BATTERY • যنѱ • ߋѱ • दझమ ࢸ੿ • ੺੹ݽ٘ ࢸ੿ • п ࢸ੿ী ೧׼ೞח Night Modeܳ ଵҊೞࣁਃ. = = = = ࢸ੿ч ৘द -> light -> dark -> default -> default
30. extended Others • WebView + ForceDark • Custom Tabsח Contentী Force Darkܳ ૑ਗ X • Map stylesب ܻࣗझ۽ ੸ਊೠ׮ݶ оמ
 - res/raw/map_style.json
 - res/raw-night/map_style.json • Notifications ੗ز ੸ਊ • TextAppearance.Compat.Notification
31. extended MDC 1.1.0 Material Design Components in Android
32. extended Elevation • Higher elevation, lighter surface • ߋӝח ߈ైݺೠ ൟ࢝ overlay۽ ઑ੺ • Elevation (0dp ~ 24dp) • Overlay Transparency (0% ~ 16%) Surface Elevation Overlay
33. extended Shadow extended Surface
34. extended extended • MDC Componentsח ইې ࣘࢿী ٮۄ Elevation Overlaysਸ ੸ਊೠ׮.
 
 
 
 • MaterialShapeDrawable, ElevationOverlayProviderܳ ੉ਊೞݶ
 Custom Viewী Elevation Overlaysܳ ࣚऔѱ ੸ਊೡ ࣻ ੓׮. • ਗ஖ ঋח ҃਋, elevationOverlaysEnabled ࣘࢿਸ false۽ ߸҃ೞݶ ػ׮. <style name="Theme.MaterialComponents" parent="..."> <item name="elevationOverlaysEnabled">true</item> <item name="elevationOverlaysColor">?attr/colorOnSurface</item> </style> Elevation Overlays E L E V A T I O N
35. extended
36. extended extended MDCীࢲ elevation overlaysо ੸ਊغח Components: • Top App Bar • Bottom App Bar • Bottom Navigation • Tabs • Card • Dialog • Menu • Bottom Sheet • Navigation Drawer • Switch Elevation Overlays Components E L E V A T I O N
37. extended extended ElevationOverlayProvider • Elevationী ٮۄ Overlay ࢚࢝җ ߓ҃࢝ਸ ੸੺൤ ࢴযળ׮. MDC 1.1.0 @ColorInt // layered color, if elevationOverlaysEnabled == true public int layerOverlayIfNeeded(@ColorInt int bgColor, float elevation) @ColorInt // layered color, always public int layerOverlay(@ColorInt int bgColor, float elevation) @ColorInt // layered color, of attr/colorSurface public int getSurfaceColorWithOverlayIfNeeded(float elevation) class
38. extended extended MaterialShapeDrawable • MDCীࢲ ߓ҃ী ࢎਊೞҊ ੓ח Drawable • ղࠗ੸ਵ۽ ElevationOverlayProvider ࢎਊ
 
 
 
 • ز੸ਵ۽ Elevation ߸҃ оמ private val bgDrawable = MaterialShapeDrawable().apply { initializeElevationOverlay(context) fillColor = context.getColorAttr(R.attr.colorSurface) } bgDrawable.setElevation(float elevation) class
39. extended extended
40. extended extended Accessibility #121212 8% Primary Dark Primary #1F1B24 • MDC Guideline: WCAG’s AA ળࣻܳ ӂ੢ • ੘਷ ఫझ౟ - ୭ࣗ 4.5:1 • ௾ ఫझ౟ - ୭ࣗ 3.0:1 • Text, BG р ؀࠺о ୭ࣗ 15.8:1 ח غযঠ
 24dp elevationীࢲ body textо AAܳ ݅઒ • 24dp = ୭؀ elevation (MDC) W3C ӂ੢ࢎ೦: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
41. extended extended NOT PASS PASS
42. extended Summary • ׮௼ ప݃ ӝמਸ Strongly ӂ੢ೠ׮. • ׮௼ ప݃ীࢲח -night resource qualifierо ഝࢿചػ׮. • (Stable ߡ੹੉ غݶ) AppCompat 1.1.0 / MDC 1.1.0ਸ ࢎਊೞ੗. • MDC - ׮௼ ప݃ীࢲח Higher elevation, lighter surface! • Accessibility - Text, BG р ࢝ ؀࠺ܳ Ҋ۰ೞ੗.
43. extended References • Android-DarkTheme
 https://github.com/googlesamples/android-DarkTheme • MD Dark Theme Guideline
 https://material.io/design/color/dark-theme.html
 https://material.io/develop/android/theming/dark/ • DayNight - Adding a dark theme to your app
 https://medium.com/androiddevelopers/d10f90c83e94 • IO19 - Dark Theme & Gesture Navigation
 https://youtu.be/OCHEjeLC_UY • IO19 - How to design a Dark Theme
 https://youtu.be/9NDLR3COU7Y
44. extended
45. I/O '19 Extended Pangyo Thank you! extended
46. I/O '19 Extended Pangyo Thank you!