Foreword
To be an excellent Android developer, you need a complete knowledge system
Here, let's grow together as we thought ~.
The first time I heard the dark mode, it felt so cool, and it looked good (I do n’t know how I heard it). Apple has had the rumors of the dark mode in the past few years. It seems that it was introduced in IOS11 and IOS12. The result was that the dark mode was not launched until IOS13. It has been half a year since the launch of IOS13, and the system application has not been said to be perfect. The three-party applications have also supported the dark mode. Even WeChat has implemented the dark mode in the update of the previous period. Let ’s enjoy WeChat first. Diablo mode now!
[External chain image transfer failed, the source site may have an anti-theft chain mechanism, it is recommended to save the image and upload it directly (img-mboeEzXw-1587030640276) (https://upload-images.jianshu.io/upload_images/21584612-4eeafc233ed6dc0e.png ? imageMogr2 / auto-orient / strip% 7CimageView2 / 2 / w / 1240)]
text
Since Apple has implemented Diablo mode, Android must not fall, so Diablo mode is supported in Android 10 (Q API level 29), but the official name is Dark theme, any translation is fine, let ’s take a look at the official Definition of dark mode:
[External chain image transfer failed, the source site may have an anti-theft chain mechanism, it is recommended to save the image and upload it directly (img-KczTViEE-1587030640279) (https://upload-images.jianshu.io/upload_images/21584612-152313aa7b973121.png ? imageMogr2 / auto-orient / strip% 7CimageView2 / 2 / w / 1240)]
Here is no translation line by line, mainly to talk about the benefits of dark mode:
- Most of the mobile phone screens have been upgraded to OLED screens (of course, some mobile phones are still LCD screens). When the OLED screen displays black, it does not emit light, which can greatly reduce power consumption.
- Improve the visibility of amblyopic users and users who are sensitive to strong light.
- Make it easier for anyone to use the device in a dark environment.
Not much to say about how to turn on the dark mode. Different mobile phone manufacturers have different ways of turning on. Sometimes the major mobile phone manufacturer's magically modified system can't really find where to set it.
Set dark theme
In order to support the Dark theme, the applied theme must be set to inherit from the DayNighttheme (res / values / styles.xml):
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
You can also use the dark theme of MaterialComponents :
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
This will associate the main theme of the application with the night mode logo controlled by the system and provide the application with a default dark theme (when enabled). When the theme of the system is switched, the application will also switch the theme accordingly.
"This is over?"
"Yes, the theme is set."
"What if I want to customize the theme?"
Everyone must have this kind of demand in daily development. The officially defined theme does not fully meet our needs. At this time, we need to customize the theme. Google also thought of this for us. In normal mode, we don't need to move, how to write how to write, and then create a new values-night folder under res, and then put your custom into it, the name becomes the corresponding theme name in styles.xml Okay. Take a look:
This setting is OK.
"No, it's just that the theme has changed. What should I do with the background, font colors, pictures, etc. of my Activity?"
"Don't worry, I'll talk about it next."
It is important to note here that themes and styles should avoid using hard-coded colors or icons under light-colored themes, and should use theme attributes (preferred) or resources limited at night. Come to understand the next two most important theme attributes:
?android:attr/textColorPrimaryThis is a universal text color. The light theme is nearly black, and the dark theme is nearly white. It contains a disabled state.?attr/colorControlNormalUniversal icon color. It contains a disabled state.
Of course, it is definitely not necessary to use the two theme attributes provided by the above official, if you want to customize, you can customize it! You may have seen the sharp eyes. In the values-night in the picture above, in addition to style.xml, there are colors.xml, yes, yes, we only need to put the color information into colors.xml and then according to the needs Just write in two colors.
However, it is still recommended to use Material Design Components because its color theme system (such as theme attributes ?attr/colorSurfaceand ?attr/colorOnSurface) can easily access the appropriate colors.
"Brother, I know how to change the background color and font color. What about the pictures? What are the pictures!"
"Come here, the monkeys are anxious!"
The picture setting is actually similar to the color, and it is also two sets of resources. For example, you have a picture of aaa.jpg in the drawable folder. If you want to call another picture in the dark mode, then you can create a new drawable-night Folder, just put another picture of you inside. Note that the name of the picture must correspond to the drawable. Similarly, drawable-xhdpi and drawable-xxhdpi are to create two more folders: drawable-night-xhdpi, drawable-night-xxhdpi, and then put in the corresponding pictures.
"What? Would you like to see the effect? Well, as you wish, this is really you. I would n’t let him watch it if anyone else ..."
How is the effect okay?
In-app modification theme
"I still want to switch on my own initiative, and I don't want to change with the system"
"Come, come here, what else do you want to do, say, come come, say it"
"I want to set whether to switch themes according to the system voluntarily ... I think many apps have this function"
Hey, since you asked from the heart, then I will tell you with compassion: Of course!
In general, the application will have several options for you to choose from: normal mode, dark mode, and follow system, right?
Google also gave us these options, which can be set directly:
- Light
MODE_NIGHT_NO - dark-
MODE_NIGHT_YES - Set by power saving mode-
MODE_NIGHT_AUTO_BATTERY - System preset-
MODE_NIGHT_FOLLOW_SYSTEM
What we just talked about is Light, Dark, and System Presets. The power saving mode is not written here. Experiments can be conducted if necessary.
The method of switching the theme is also very simple, just call the following method:
AppCompatDelegate.setDefaultNightMode()
Just one line of code, the parameters need to be passed into one of the four modes above.
Come on, then write the code, write three buttons according to the above requirements, to achieve normal mode, dark mode and system mode respectively:
override fun onClick(v: View) {
when(v.id){
R.id.btnLight ->{
setDefaultNightMode(MODE_NIGHT_NO)
}
R.id.btnDark ->{
setDefaultNightMode(MODE_NIGHT_YES)
}
R.id.btnDefault ->{
setDefaultNightMode(MODE_NIGHT_FOLLOW_SYSTEM)
}
}
}
This code shouldn't need to be explained anymore, enough is explained above. Let's take a look at the effect:
Configuration changes
"Brother, I thought again. If some pages are playing video, what should I do if I want to delay configuration changes?"
"Come on, you come over to the little brother, and amuse the elder brother to play? This day!"
Come on, there is a need to have an implementation. Google has already thought about it for us. The application can uiModehandle the implementation of the Dark theme itself by declaring that each Activity can handle configuration changes:
<activity
android:name=".MyActivity"
android:configChanges="uiMode" />
When Activity declares that it handles configuration changes, onConfigurationChanged()its methods will be called when the theme changes.
To check what the current theme is, the app can run the following code:
val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
Configuration.UI_MODE_NIGHT_NO -> {} // 夜间模式未启用，我们正在使用浅色主题
Configuration.UI_MODE_NIGHT_YES -> {} // 夜间模式启用，我们使用的是深色主题
}
to sum up
The article is basically over here. Google tells us not to hard code as much as possible. It is necessary to return it when it comes out. Hard coding is cool for a while, hard coding has always been cool, hahaha.
