Designing dark mode apps in Android studio – Tutorial

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.
6. Create a general color variable for text color and background color.

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 for dark mode-->
    <color name="contentBodyColor">#000</color>
    <color name="contentTextColor">#fff</color>

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.

    <!--colors for light mode-->
    <color name="contentBodyColor">#FCFCFC</color>
    <color name="contentTextColor">#020000</color>

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:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
    <!-- This will set the fade in animation on all your activities by default -->
    <style name="WindowAnimationTransition">
        <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    </style>

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

        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>

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

package com.gteceducation.alumni.support;

/**
 * Created by kapil on 20/01/17.
 */
import android.content.Context;
import android.content.SharedPreferences;


public class DarkModePrefManager {
    SharedPreferences pref;
    SharedPreferences.Editor editor;
    Context _context;

    // shared pref mode
    int PRIVATE_MODE = 0;

    // Shared preferences file name
    private static final String PREF_NAME = "alumni_dark_mode";

    private static final String IS_NIGHT_MODE = "IsNightMode";


    public DarkModePrefManager(Context context) {
        this._context = context;
        pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
        editor = pref.edit();
    }

    public void setDarkMode(boolean isFirstTime) {
        editor.putBoolean(IS_NIGHT_MODE, isFirstTime);
        editor.commit();
    }

    public boolean isNightMode() {
        return pref.getBoolean(IS_NIGHT_MODE, false);
    }

}

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.

setDarkMode(getWindow());

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.

    public void setDarkMode(Window window){
        if(new DarkModePrefManager(context).isNightMode()){
//        if(AppCompatDelegate.getDefaultNightMode()==AppCompatDelegate.MODE_NIGHT_YES){

            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
            changeStatusBar(0,window);
        }else{
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
            changeStatusBar(1,window);
        }
    }
    public void changeStatusBar(int mode, Window window){
        if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.M){
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(context.getResources().getColor(R.color.contentBodyColor));
            //white mode
            if(mode==1){
                window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
            }
        }
    }

Changing Modes.

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

DarkModePrefManager darkModePrefManager = new DarkModePrefManager(mContext);
            darkModePrefManager.setDarkMode(!darkModePrefManager.isNightMode());
            recreate();

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 are really interested in learning more about dark mode UI, please follow the link: https://www.toptal.com/designers/ui/dark-ui-design

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.