26th Mar 2020

Android : Come to the Dark side

Mobile App

Written By, Mohit Suthar

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.

Are you ready to dive in a demo?
dark-mode-app

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

And if you are using material component themes(my recommendation) then you can provide parent theme like that

Note : If you cannot find MaterialComponents.DayNight theme then you should add or update material lib (add to the build.gradle file)

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.

By doing this, you can get the required event in the overridden onConfigurationChanged method.

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
dark-mode-app-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 :
dark-mode-app-result

Written By,

Android Developer at Yudiz Solutions Pvt. Ltd