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

Vasya Drobushkov: Android Dark Theme

Vasya Drobushkov: Android Dark Theme

How to support dark theme in your Android app

34a7272669c68806ab1f5055a3ec444d?s=128

Vasya

July 19, 2019
Tweet

Transcript

  1. Dark Theme

  2. Vasya Drobushkov Android Developer @ Ciklum Github: @krossovochkin Medium: @krossovochkin

  3. Android Oreo Wallpapers

  4. Android Pie Display Settings

  5. Android Pie Display Settings

  6. Android Pie Display Settings

  7. Android Pie Display Settings

  8. Android Pie Night mode

  9. Android Pie Night mode

  10. Android Pie Night mode

  11. Android Pie Night mode

  12. Android Q Display Settings

  13. Android Q Display Settings

  14. Android Q Display Settings

  15. Why? Environment Battery Accessibility

  16. None
  17. Force Dark <style name="AppTheme"> <item name="android:forceDarkAllowed">true</item> </style>

  18. Force Dark Result Q+

  19. DayNight Theme <style name="AppTheme" parent="Theme.AppCompat.DayNight" /> // OR <style name="AppTheme"

    parent="Theme.MaterialComponents.DayNight" />
  20. DayNight First Try

  21. -night resources // values/themes.xml <style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat.Light"/> // values-night/themes.xml <style

    name="Theme.AppCompat.DayNight" parent="Theme.AppCompat"/>
  22. Custom Night Resources // values-night/colors.xml <resources> <color name="colorPrimary">#511b43</color> <color name="colorPrimaryDark">#511b43</color>

    <color name="colorAccent">#ff6868</color> </resources>
  23. Default Updated

  24. Force Dark Custom DayNight Background darker

  25. Force Dark Custom DayNight Dividers are dark

  26. Force Dark Custom DayNight Button style

  27. Android P

  28. Dynamic DayNight mode AppCompatDelegate.setDefaultNightMode(mode) getDelegate().setLocalNightMode(mode) System Application Activity

  29. Night Modes • MODE_NIGHT_NO // LIGHT • MODE_NIGHT_YES // DARK

    • MODE_NIGHT_AUTO_BATTERY // DARK IN BATTERY SAVE MODE • MODE_NIGHT_FOLLOW_SYSTEM // SYSTEM PREFERENCE
  30. Application Settings setPreferencesFromResource(R.xml.preferences, rootKey) themePreference?.onPreferenceChangeListener = Preference.OnPreferenceChangeListener { _, mode

    -> AppCompatDelegate.setDefaultNightMode(mode) true }
  31. Application Settings (Q)

  32. Application Settings (prior to Q)

  33. Issue

  34. Persistence class App : Application() { override fun onCreate() {

    super.onCreate() val mode = PreferenceManager .getDefaultSharedPreferences(this) .getInt("theme_key", MODE_NIGHT_NO) AppCompatDelegate.setDefaultNightMode(mode)
  35. Fixed

  36. Sum up • Extend DayNight Theme • Provide additional -night

    resources for Dark Theme • Add preference for changing mode inside Application • Persist preference choice • Work with designer for the rest
  37. Test Dark Theme

  38. Test force dark

  39. Disable force dark for particular views <Button android:forceDarkAllowed="false" tools:targetApi="q"/> view.setForceDarkAllowed(false)

  40. Attributes <TextView android:textColor="?android:attr/textColorPrimary" … />

  41. Check is Dark theme applied fun Context.isDarkTheme(): Boolean { val

    mode = this.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK return mode == Configuration.UI_MODE_NIGHT_YES }
  42. AppCompat Material Components

  43. AppCompat Material Components

  44. Elevation val bg = MaterialShapeDrawable .createWithElevationOverlay(this, 32.0f) // OR val

    color = ElevationOverlayProvider(this) .getSurfaceColorWithOverlayIfNeeded(32.0f)
  45. https://github.com/krossovochkin/DarkThemeSample Sample project

  46. Questions?