Vasya Drobushkov: Android Dark Theme

How to support dark theme in your Android app

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
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?