Vasya Drobushkov: Android Dark Theme

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?