Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nairobi IO Extended Dark Theme
Search
David Odari
June 15, 2019
Programming
0
64
Nairobi IO Extended Dark Theme
A brief overview of Androids Dark theme from Google IO 2019.
David Odari
June 15, 2019
Tweet
Share
More Decks by David Odari
See All by David Odari
Ship Faster With Feature Flags
davidodari
0
260
Getting Started with Jetpack Compose
davidodari
0
120
Persistence
davidodari
0
55
Building Trust in a Multicultural Team
davidodari
1
19
Room ORM | Workshop 2 | GADS 2020
davidodari
0
130
Android 11 Meetups: Whats New In Android
davidodari
0
240
Journey as an Android Developer
davidodari
1
140
Improve Quality of Android Apps with BDD
davidodari
0
170
Quick Intro To Kotlin Generics
davidodari
0
160
Other Decks in Programming
See All in Programming
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
430
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
270
Timeline エディター拡張入門
yucchiy
0
450
Docker_OSS_ホスティング入門
satokoki645
0
140
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
450
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
An adventure of Happy Eyeballs
coe401_
1
240
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
410
TypeScriptから始める VR生活
tamagokakeg
2
120
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
Criando a Woovi em uma semana
daniloab
0
120
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
45
9.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
What's in a price? How to price your products and services
michaelherold
238
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
4 Signs Your Business is Dying
shpigford
176
21k
Happy Clients
brianwarren
92
6.4k
What's new in Ruby 2.0
geeforr
338
31k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Become a Pro
speakerdeck
PRO
13
4.6k
Transcript
| Dark Theme
David Odari IT Student at Jkuat, Android Developer
| Dark Theme
A contrast of material theme with dark background colors and
light foreground colors.
System wide dark mode. Android Q
• Save On Battery • Accessibility • Low Light Environment
Why DarkTheme ?
Force Dark Rapid Adoption Of Dark Theme on API 29+,
Q. NEW IN Q
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="android:forceDarkAllowed">true</item> </style> <ImageView …. android:forceDarkAllowed =
“false” />
None
Custom Dark Theme
DayNight AppCompat and MDC
<style name="AppTheme" parent="Theme.AppCompat.DayNight"> Or <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
AppCompat Material Components
Theme Attributes Avoid Hard Coding Values
values/themes.xml <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> values-night/themes.xml <style name="AppTheme" parent="Theme.MaterialComponents.DarkActionBar">
Modes
Tell Appcompat what mode to use with; AppCompatDelegate.setDefaultNightMode() getDelegate().setLocalNightMode()
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
//Changes between day/night based on the time of day. MODE_NIGHT_AUTO_TIME
DEPRECATED
Theme Settings
Android P and Below Light Dark Set By Battery Saver
Android Q and Above Light Dark System Default
Elevation
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.
• Material Shape Drawable • ElevationOverlayProvider Custom Views
Configuration
Triggers the uiMode configuration change Activity declares it can handle
<activity ... android:configChanges="uiMode" /> onConfigurationChanged() method will be called
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” } }
Illustrations Use theme attributes or provide a variant for each
theme for vector assets.
Notifications Work Out the Box with system provided templates
Demo /Davidodari/NightKing @_davidodari