Android DarkTheme - Speaker Deck

Slide 1

Slide 1 text

Android Dark Theme উࢿਊ (NAVER)

Slide 2

Slide 2 text

Android Dark Theme উࢿਊ (NAVER) Android Dark Theme extended Dark Theme

Slide 3

Slide 3 text

Android Dark Theme উࢿਊ (NAVER) Android Dark Theme extended Dark Theme 안성용 Android Developer at NAVER SOUP GDG Korea Slack soupyong@gmail.com

Slide 4

Slide 4 text

extended • Why? • OS Setting • Force Dark • DayNight • App theme setting • MDC 1.1.0 ݾର

Slide 5

Slide 5 text

extended Battery Environment Accessibility Up to 60% extended Why?

Slide 6

Slide 6 text

extended OS Setting • Android Q  Settings > Display > Dark Theme ( 'যف਍ ప݃' QuickSettingب ࢜۽. ୶оؽ ) • Android P  Settings > System > Developer options > Night mode ( ࢖ࢿ ױ݈਷ 'ঠр ݽ٘' QuickSetting ઁҕ ) New  in Q

Slide 7

Slide 7 text

extended extended Force Dark New  in Q • Qࠗఠ ࢎਊ оמ • জਸ ׮௼ ప݃۽ ੗ز ߸ജೞח ӝמ • ӝࠄ਷ Force Dark Disable

Slide 8

Slide 8 text

extended extended extended Custom Force Dark

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

extended • জী ੸ਊೞ۰ݶ ప݃੄ forceDarkAllowed ࣘࢿਸ true۽ ߸҃ೞݶ ػ׮.        • ױ, Light ప݃݅ ForceDarkо ੸ਊؼ ࣻ ੓׮. true</item> Enable Force Dark F O R C E D A R K <item name="isLightTheme">true</item>

Slide 11

Slide 11 text

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) • ViewGroupী ੸ਊೞݶ ೞਤ View ݽفী ੸ਊغ૑݅,  true۽ ࢸ੿ೞݶ ࠗݽ/੗ध View੄ falseܳ ޖदೠ׮.

Slide 12

Slide 12 text

extended DayNight AppCompatҗ MDC

Slide 13

Slide 13 text

extended New?

Slide 14

Slide 14 text

extended

Slide 15

Slide 15 text

extended

Slide 16

Slide 16 text

extended

Slide 17

Slide 17 text

extended

Slide 18

Slide 18 text

extended

Slide 19

Slide 19 text

extended Dark Theme

Slide 20

Slide 20 text

extended DayNight • ׮௼ ప݃ীࢲח -night resource qualifierо ഝࢿചػ׮. • Android 4.0 (API14) ੉࢚ ૑ਗ • AppCompat 1.1.0ীࢲ ز੘ ѐࢶ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

extended Resource Qualifier (-night) D A Y N I G H T • ׮ܲ ܻࣗझ୊ۢ -night ಫ؊ী ܻࣗझܳ ୶оೞݶ ػ׮.  #000000 #ffffff res/drawable/ic_example.png res/drawable-night/ic_example.png

Slide 23

Slide 23 text

extended D A Y N I G H T values/theme.xml values-night/theme.xml values/theme.xml values-night/theme.xml Theme

Slide 24

Slide 24 text

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 ↑

Slide 25

Slide 25 text

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 }

Slide 26

Slide 26 text

extended • UiModeо ߸҃ؼ ٸ, ૒੽ DayNight UIܳ ੸ਊೡ ࣻب ੓׮. Manual DayNight D A Y N I G H T class MainActivity : AppCompatActivity() { override fun onConfigurationChanged(newConfig: Configuration) { super.onConfigurationChanged(newConfig) val isDarkTheme: Boolean = isDarkTheme(newConfig) ... UI সؘ੉౟ ... } }

Slide 27

Slide 27 text

extended App theme setting

Slide 28

Slide 28 text

extended • ইېח ҳӖীࢲ ӂ੢ೞח OS ߡ੹߹ জ ప݃ ࢸ੿ ২࣌ੑפ׮.  Android Q ੉࢚: • ߋѱ • যنѱ • दझమ ࢸ੿ (ӝࠄ) Recommended A P P T H E M E S E T T I N G   Android P ੉ೞ: • ߋѱ • যنѱ • ੺੹ݽ٘ ࢸ੿ (ӝࠄ)

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

extended MDC 1.1.0 Material Design Components in Android

Slide 32

Slide 32 text

extended Elevation • Higher elevation, lighter surface • ߋӝח ߈ైݺೠ ൟ࢝ overlay۽ ઑ੺ • Elevation (0dp ~ 24dp) • Overlay Transparency (0% ~ 16%) Surface Elevation Overlay

Slide 33

Slide 33 text

extended Shadow extended Surface

Slide 34

Slide 34 text

extended extended • MDC Componentsח ইې ࣘࢿী ٮۄ Elevation Overlaysਸ ੸ਊೠ׮.        • MaterialShapeDrawable, ElevationOverlayProviderܳ ੉ਊೞݶ  Custom Viewী Elevation Overlaysܳ ࣚऔѱ ੸ਊೡ ࣻ ੓׮. • ਗ஖ ঋח ҃਋, elevationOverlaysEnabled ࣘࢿਸ false۽ ߸҃ೞݶ ػ׮. <item name="elevationOverlaysEnabled">true</item> <item name="elevationOverlaysColor">?attr/colorOnSurface</item> Elevation Overlays E L E V A T I O N

Slide 35

Slide 35 text

extended

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

extended extended

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

extended extended NOT PASS PASS

Slide 42

Slide 42 text

extended Summary • ׮௼ ప݃ ӝמਸ Strongly ӂ੢ೠ׮. • ׮௼ ప݃ীࢲח -night resource qualifierо ഝࢿചػ׮. • (Stable ߡ੹੉ غݶ) AppCompat 1.1.0 / MDC 1.1.0ਸ ࢎਊೞ੗. • MDC - ׮௼ ప݃ীࢲח Higher elevation, lighter surface! • Accessibility - Text, BG р ࢝ ؀࠺ܳ Ҋ۰ೞ੗.

Slide 43

Slide 43 text

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