Designing dark mode apps in Android studio – Tutorial

Published by Kapil Mohan on

We’ve shared a few Dark mode designs, which are quite popular within the community so we thought of creating a tutorial for explaining complete steps for a creating a dark mode apps.

Our Dark mode examples are not complete (it doesn’t include animations for shifting from dark to light mode and doesn’t include a complete light mode).

This Tutorial Explains all steps with transitions from light to dark mode along with using a light status bar.




Prerequisite:

Tutorial is of beginners levels (just an understanding of android folder structure is required).

Designing Dark Mode

Normally in dark mode designing we change the background color, text color and add a seperate set of icons for night mode.

  1. The first step is to identify the elements to change color in night mode.
  2. After identification creates a colors file for night mode.
  3. Use pure white (#fff) for light mode and black (#000) for night mode. This can save battery consumption, please avoid using dark blue or dark gray for night mode designs.
  4. If you want to change icon colors, create a separate icon for night mode.
  5. Create a general color variable for text color and background color.
Using multiple images for night mode
using multiple colors for night mode




Creating night mode colors

colors.xml(night)

  • right click on values folder > new > value resource file
  • give name as colors
  • select night qualifier followed by >> button and press ok

colors.xml

This is the normal colors file which we use. create variable with the same name as contentBodyColor and contentTextColor for overriding in day (light) mode.

Style for handling dark/light mode transition

Normally android uses a rough transition from light to dark (or vice versa) but this can be changed to a smooth one by changing the windowEnterAnimation and windowExitAnimation in styles files.

In styles file use the following:

android:windowAnimationStyle is used for changing the default enter behaviour. If you are using multiple themes the add the property to all the themes.




Java

Create a SharedPreference file for handling dark mode settings.

we’ve a default method AppCompatDelegate.getDefaultNightMode() in AppCompatDelegate class but found some issues with it, if you want you could try saving in setDefaultNightMode() and get the current preference in getDefaultNightMode().

DarkModePrefManager.java

Here we are handling dark mode and light mode only, if you want to use auto dark/light mode change the preference to handle accordingly.

Setting dark mode

Here we uses two functions setDarkMode, which requires the window for changing status bark to light and dark.

Need to call setDarkMode() method in the onCreate() method to function properly.

AppCompatDelegate.setDefaultNightMode() handles the overhead of changing the theme between night and dark, when we change the mode to AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
it will automaticllay uses the values-night .

If we want multiple themes, then use setTheme and change manually.

The changeStatusBar() is used for changing status bar background and icon color.

Changing Modes.

Normally we uses a menu item or a switch for changing the dark mode

Here we change the preference and the setDarkMode() method will be called on recreate() which in turn switches the mode.

Note:- if you are using fragments, the default fragment state can be restored in onRestoreInstanceState(Bundle savedInstanceState) method.




View More Designs here:-

https://appsnipp.com/category/android/android-ui-design-elements/

If you like this post, please leave your suggestions and comments below 

Did you know? 
your comments can motivate us to create wonders.

We are planning to start complete tutorial on designing, if you are interested please leave a comment. If we receive enough comments, we will start rolling out designing tutorials.


Kapil Mohan

Like to add color to developers life and apps. Can create smile using Android, iOS, PHP, codeignitor, web technologies, etc... Feel free to contact me at [email protected] .