Nairobi IO Extended Dark Theme

A brief overview of Androids Dark theme from Google IO 2019.

Transcript

1. | Dark Theme
2. David Odari IT Student at Jkuat, Android Developer
3. | Dark Theme
4. A contrast of material theme with dark background colors and light foreground colors.
5. System wide dark mode. Android Q
6. • Save On Battery • Accessibility • Low Light Environment Why DarkTheme ?
7. Force Dark Rapid Adoption Of Dark Theme on API 29+, Q. NEW IN Q
8. <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:forceDarkAllowed">true</item> </style> <ImageView …. android:forceDarkAllowed = “false” />
10. Custom Dark Theme
11. DayNight AppCompat and MDC
12. <style name="AppTheme" parent="Theme.AppCompat.DayNight"> Or <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
13. AppCompat Material Components
14. Theme Attributes Avoid Hard Coding Values
15. values/themes.xml <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> values-night/themes.xml <style name="AppTheme" parent="Theme.MaterialComponents.DarkActionBar">
16. Modes
17. Tell Appcompat what mode to use with; AppCompatDelegate.setDefaultNightMode() getDelegate().setLocalNightMode()
18. Available Modes //Always Dark Themed MODE_NIGHT_YES //Always Light Themed MODE_NIGHT_NO //Uses Current System Setting ( For Q and Above) MODE_NIGHT_FOLLOW_SYSTEM //Switches to dark theme when battery saver is activated MODE_NIGHT_AUTO_BATTERY
19. //Changes between day/night based on the time of day. MODE_NIGHT_AUTO_TIME DEPRECATED
20. Theme Settings
21. Android P and Below Light Dark Set By Battery Saver
22. Android Q and Above Light Dark System Default
23. Elevation
24. Elevation will not work on Dark Theme. Elevation overlays solve this by applying the concept of surfaces becoming lighter with higher elevation. Overlays surface of components with colorSurface attribute.
25. • Material Shape Drawable • ElevationOverlayProvider Custom Views
26. Configuration
27. Triggers the uiMode configuration change Activity declares it can handle <activity ... android:configChanges="uiMode" /> onConfigurationChanged() method will be called
28. fun checkDarkThemeMode(context: Context) : String { val mode = context.resources.configuration.uiMode.and( Configuration.UI_MODE_NIGHT_MASK) return when(mode){ Configuration.UI_MODE_NIGHT_NO -> “Light Theme” Configuration.UI_MODE_NIGHT_YES -> “Dark Theme” Configuration.UI_MODE_NIGHT_UNDEFINED -> “Unknown Mode” } }
29. Illustrations Use theme attributes or provide a variant for each theme for vector assets.
30. Notifications Work Out the Box with system provided templates
31. Demo /Davidodari/NightKing @_davidodari