The dark mode was released by Google in 2019. It’s benefits include reducing the power usage of the app by a significant amount, helps improve the visibility for users with low vision and those who are sensitive to bright light and makes it easier for anyone to use your app in a low light environment.
Three ways exist to enable dark theme in android 10 and higher. Those ways include:
- using the quick settings tile to switch themes from the notification tray
- Enable it from the device setting
- On pixel devices, selecting battery saver enables dark mode.
In this tutorial we will create a simple android app with a single activity and a button that enables dark mode
we will design a single activity and set its layout to constraintLayout. A button will be centered in the middle of the activity. Our XML code will be as below
If you notice in our XML file the colors of the background references from the file color and the background of the button is gotten from button_design in drawable folder.
This attributes are referenced in this way because we want a way to manipulate them when we later activate dark mode in our android app. Below is the code for the button_design drawable files, color and string files.
The color file:
The String File:
- After implementing this, right click on your values folder and select the option — — “reveal in explorer/finder”.
- Duplicate the values folder and rename it to “values-night”
Android will automatically create a dark mode duplicate of your values folder
You can change the values of colors/strings/styles in the dark mode files. Peep my colors file below
if you notice the color value in this file is different from the one in our light mode.
Our MainActivity code is:
Click here for the full source code
You can check android docs and material design on Dark mode to learn more
