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
Vasya Drobushkov: Android Dark Theme
Search
Vasya
July 19, 2019
Programming
0
140
Vasya Drobushkov: Android Dark Theme
How to support dark theme in your Android app
Vasya
July 19, 2019
Tweet
Share
More Decks by Vasya
See All by Vasya
Android Design Support Library
krossovochkin
0
230
Other Decks in Programming
See All in Programming
知識0からカンファレンスやってみたらこうなった!
syossan27
5
290
MySQL初心者が311個のカラムにNot NULL制約を追加していってALTER TABLEについて学んだ話
hatsu38
2
150
Duke on CRaC with Jakarta EE
ivargrimstad
1
230
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
tomohisa
0
250
AIコーディングの理想と現実
tomohisa
38
40k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.5k
Cursor/Devin全社導入の理想と現実
saitoryc
29
22k
Storybookの情報をMCPサーバー化する
shota_tech
3
1.3k
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
2k
事業KPIを基に価値の解像度を上げる
nealle
0
140
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
150
파급효과: From AI to Android Development
l2hyunwoo
0
170
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
For a Future-Friendly Web
brad_frost
177
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Music & Morning Musume
bryan
47
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Adopting Sorbet at Scale
ufuk
76
9.4k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Speed Design
sergeychernyshev
29
940
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
580
Transcript
Dark Theme
Vasya Drobushkov Android Developer @ Ciklum Github: @krossovochkin Medium: @krossovochkin
Android Oreo Wallpapers
Android Pie Display Settings
Android Pie Display Settings
Android Pie Display Settings
Android Pie Display Settings
Android Pie Night mode
Android Pie Night mode
Android Pie Night mode
Android Pie Night mode
Android Q Display Settings
Android Q Display Settings
Android Q Display Settings
Why? Environment Battery Accessibility
None
Force Dark <style name="AppTheme"> <item name="android:forceDarkAllowed">true</item> </style>
Force Dark Result Q+
DayNight Theme <style name="AppTheme" parent="Theme.AppCompat.DayNight" /> // OR <style name="AppTheme"
parent="Theme.MaterialComponents.DayNight" />
DayNight First Try
-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"/>
Custom Night Resources // values-night/colors.xml <resources> <color name="colorPrimary">#511b43</color> <color name="colorPrimaryDark">#511b43</color>
<color name="colorAccent">#ff6868</color> </resources>
Default Updated
Force Dark Custom DayNight Background darker
Force Dark Custom DayNight Dividers are dark
Force Dark Custom DayNight Button style
Android P
Dynamic DayNight mode AppCompatDelegate.setDefaultNightMode(mode) getDelegate().setLocalNightMode(mode) System Application Activity
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
Application Settings setPreferencesFromResource(R.xml.preferences, rootKey) themePreference?.onPreferenceChangeListener = Preference.OnPreferenceChangeListener { _, mode
-> AppCompatDelegate.setDefaultNightMode(mode) true }
Application Settings (Q)
Application Settings (prior to Q)
Issue
Persistence class App : Application() { override fun onCreate() {
super.onCreate() val mode = PreferenceManager .getDefaultSharedPreferences(this) .getInt("theme_key", MODE_NIGHT_NO) AppCompatDelegate.setDefaultNightMode(mode)
Fixed
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
Test Dark Theme
Test force dark
Disable force dark for particular views <Button android:forceDarkAllowed="false" tools:targetApi="q"/> view.setForceDarkAllowed(false)
Attributes <TextView android:textColor="?android:attr/textColorPrimary" … />
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 }
AppCompat Material Components
AppCompat Material Components
Elevation val bg = MaterialShapeDrawable .createWithElevationOverlay(this, 32.0f) // OR val
color = ElevationOverlayProvider(this) .getSurfaceColorWithOverlayIfNeeded(32.0f)
https://github.com/krossovochkin/DarkThemeSample Sample project
Questions?