Greetings to my favorite Science community online, StemSocial.
It's @skyehi and I'm super excited to be back to continue my series on Android App development tutorials for beginners.
Today's episode is a special tutorial on how Android App developers can successfully implement Dark Mode and Light Mode in their Android Apps.
Original Image Source by PabitraKaity from Pixabay
The dark mode feature was not always part of Apps or Android devices. It was in September 2019 when iOS 13 and Android 10 both introduced dark modes which would affect the entire device theme.
Before then, a few Apps used to add these theme mode change feature as extra features and some were paid options.
It's pretty convenient to have dark mode and light feature in an App so the user can toggle between the two based on their mood or situation.
Usually dark mode was an ideal and convenient feature to help in using Apps or devices at night or in the dark so sometimes Apps call their dark theme, Night Mode.
Also dark screens or colors on devices help with preserving your battery life.
Since white light is brighter and uses more energy, keeping your phone in dark mode reduced how much energy your battery would require.
However having Light Mode helps make users see design elements in your App much better in the day.
In today's blog, I'm going to share with you a model example of how to implement Light Mode and Dark Mode in your Android Apps.
- You can change or add more features depending on your preferences or plan for the App.
Let's get started with our Work for the day shall.
Prerequisites
For the benefit of newcomers to Android App development or my series, I'll share with you the required softwares you need to be able to go through with this tutorial.
Android Studio IDE - the platform on which we'll develop this and all other Android Apps.
Java Development Kit, JDK - You need to install JDK correctly on your PC for your PC to be able to execute Java commands or codes.
Physical Android Device or Emulator - After building the App, we'll need to test it either on an emulator or a physical Android device.
If you have all these checked out, you're absolutely ready to go through with this tutorial
- I'll assume you already have an App you want to implement this feature in, however if you want to test this feature in a new App, here's the procedure to create a new App.
Start by opening Android Studio and click on "Create A New Project".
You'll be given a number of Android App templates to choose from. I'll recommend selecting "Empty Activity" as the template of your App and click the "Next" Button.
Set both the App name and package name of your App and since we'll be using Java as the programming language, please ensure that Java is selected instead of Kotlin.
When you're satisfied with the project configuration click on "Finish" button and let Android Studio prepare your new project space.
Update App Theme in styles.xml
The first thing to do to include light and dark mode in our Android App is to open res/values/styles.xml file and define styles for both light and dark modes.
I'm assuming you have your very own color choices when it comes to colorPrimary , colorPrimaryDark and colorAccent for both the Light Mode style and the Dark Mode style.
I'll use the default Theme.AppCompat.Light theme as the parent theme of both modes or themes.
Here's how the style code should look like
(html comment removed: Light Mode )
<style name="AppTheme" parent="Theme.AppCompat.Light">
(html comment removed: Your light mode styling )
</style>
(html comment removed: Dark Mode )
<style name="AppTheme.Dark" parent="Theme.AppCompat">
(html comment removed: Your dark mode styling )
</style>
Create a Night Qualifier Folder
Now when it comes to light mode, by default you just set styles and colors to it as you would do if you were building an App with one theme.
However, with the dark mode, you would need to create a new directory called values-night inside the res directory.
This directory or folder will hold resources specific to the dark mode theme colors and style changes.
- Customize Dark Mode Resources
Now that we've created the res/values-night for the Dark Mode, we need to create a styles.xml file inside that folder where we can write the code to customize resources for the dark theme or mode of our App.
Here's how the styles file for dark mode should look like
(html comment removed: styles.xml in res/values-night )
<resources>
<style name="AppTheme" parent="Theme.AppCompat">
(html comment removed: Your customized dark mode styling )
</style>
</resources>
Implement Switching Mechanism
Since we now have style and color choices for light mode and dark mode, it's time to write the backend or logic code which would represent a switching mechanism between these two modes in our App.
In this particular App tutorial, I'll place the switching mechanism logic in my MainActivity.java file but you can add this logic code in any activity where you would like the user to find the switch button to toggle between Light Mode and Dark Mode.
Of course ideally, this toggle button is usually placed in the settings activity of most Apps so that's a great place to put it guys.
We'll put our toggle in settings after writing the mechanism code.
Here's how the theme switch mechanism code should look like
// Add this code in your activity onCreate method or where suitable
AppCompatDelegate.setDefaultNightMode(
AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM); // Follows the system's mode
// Alternatively, you can use:
// AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); // Force dark mode
// AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO); // Force light mode
Toggling Dark Mode in Settings
So guys, I'll recommend creating an activity for your App's settings and consider adding a toggle in the settings activity to allow users to manually switch between dark and light modes.
In the settings activity, you can use AppCompatDelegate.setDefaultNightMode() to help with setting which mode comes by default and how the mode changes would work.
Here's how your code should look like and please don't forget this would happen in your settings activity
// Example of handling a switch change in settings
SwitchCompat darkModeSwitch = findViewById(R.id.darkModeSwitch);
darkModeSwitch.setOnCheckedChangeListener((buttonView, isChecked) -> {
if (isChecked) {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
} else {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
}
recreate(); // Recreate the activity for changes to take effect
});
Testing Your Implementation
Alright guys, when you're through with the implementation, run the App to test the toggling functionality.
Test it very well to ensure that the Light Mode and Dark Mode Feature of your App ie effective and it's giving the right colors you intended.
Thank you so much for taking the time to read today's blog. I hope you enjoyed this particular episode guys.
We have been building a lot of different Apps for a couple months now but I decided to digress a little and teach a few "How To" that would help beginners become Masters and develop effective Apps
You can now easily implement dark and light mode features in your Android Apps. Some Apps have more than two modes.
If you want more modes, simply add more styles and include them in the switch mechanism like we did with this one.
I believe you can do it guys. However if you're having troubles implementing the feature, please let me know in the comments section.
Thanks everyone for the support to @stemsocial and my friends @stickupcurator or @stickupboys
Have A Great Day And Catch You Next Time On StemSocial. Goodbye 👨💻
You Can Follow Me @skyehi For More Like This And Others
