Overview
One of the most awaited features of Android 10 is Dark Mode. With Android 10 already running on hundreds of devices, developers can now get their hands dirty with this feature and experiment on it. Dark mode is basically a dark theme which we can apply to our apps. The hype around it is actually justified because it has a bunch of benefits. It is a real battery-saver, it induces much less stress on eyes and it looks cool, doesn’t it? This article is pretty much a launch-pad for developers who are eager to get into it. Let’s begin.
Make a theme
First you need to check which base theme is applied in your application (res -> value -> style.xml) because we need DayNight theme as parent theme. So either you are using AppCompat or MaterialComponents theme.
If you are using AppCompat then you can replace parent theme by
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
And if you are using material component themes(my recommendation) then you can provide parent theme like that
<style name="AppTheme" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar">
Note : If you cannot find MaterialComponents.DayNight theme then you should add or update material lib (add to the build.gradle file)
implementation 'com.google.android.material:material:1.1.0'
Themes in App
Basically three types of themes are supported by Android systems
- Light
- Dark
- Set By Battery Saver (default options)
Note : If you are using Android 10 or higher then the last option will be System default.
AppCopat has some constant value for these themes
- Light – MODE_NIGHT_NO
- Dark – MODE_NIGHT_YES
- Set by Battery Saver – MODE_NIGHT_AUTO_BATTERY
- System default – MODE_NIGHT_FOLLOW_SYSTEM
So our first and second step is pretty much complete. Let’s head on to Configuration changes
Configuration changes
We can listen to changes in the system’s theme using onConfigurationChanged method of Activity. When the system and apps theme change then it triggers uiMode configuration.
So it will automatically handle activity recreation.
You need to set configChanges parameter of activity to uiMode in Androidmanifest file.
<activity android:name=".home.view.act.HomeActivity" android:configChanges="uiMode" android:theme="@style/AppTheme.Home" />
By doing this, you can get the required event in the overridden onConfigurationChanged method.
override fun onConfigurationChanged(newConfig: Configuration) {
super.onConfigurationChanged(newConfig)
when (newConfig.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
Configuration.UI_MODE_NIGHT_NO -> { AppCompatDelegate.setDefaultNightMode(MODE_NIGHT_NO) }
Configuration.UI_MODE_NIGHT_YES -> { AppCompatDelegate.setDefaultNightMode(MODE_NIGHT_YES) }
}
}
Note : Some devices don’t trigger the onConfigurationChanged method so you have to restart the app after changing the theme.
Apply Custom theme
Yes, you can customize the theme for night (Dark). You just need to create a folder inside res with the name of values-night (res->values-night->colors.xml). You can use any values in colors.xml or style.xml files for dark mode. You can see in below image
Tips
- If you don’t want to change any previously used theme then you can use android:forceDarkAllowed=”true” inside of your theme or parent layout but keep in mind it will work only if your application target version 29 or above.
- You should not used hard coded colors in xml files
- You can also create drawable-night folder for dark theme images / icons
Here is the Output :
You may also like
How do you Integrate AI and Personalization Features into Your ecommerce App?
In the ever-evolving digital landscape with the changing pre...
Redefining Healthcare Experiences: Gamification in Healthcare: Benefits, Trends & Examples
Gamification in healthcare apps reveals a new possibility in...
Gamification in Education: The Winning Trio of AR, VR & AI
Relying on conventional techniques for modern-day challenges...
