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
170
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
260
Other Decks in Programming
See All in Programming
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5.2k
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
230
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
320
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
CSC305 Lecture 05
javiergs
PRO
0
220
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
Go言語はstack overflowの夢を見るか?
logica0419
0
480
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
220
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
iOSでSVG画像を扱う
kishikawakatsumi
0
130
Leading Effective Engineering Teams in the AI Era
addyosmani
7
500
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
RailsConf 2023
tenderlove
30
1.3k
Designing Experiences People Love
moore
142
24k
We Have a Design System, Now What?
morganepeng
53
7.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Scaling GitHub
holman
463
140k
BBQ
matthewcrist
89
9.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
How to Ace a Technical Interview
jacobian
280
24k
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?