Android

How to Include a Dark Theme in your Android App

For developers, creating an Android app is an easy process – designing an appealing UI is what’s actually difficult. That’s why we wrote the guide “How to Design an Android App UI That Doesn’t Suck”, for developers who need some inspiration in creating simple yet appealing UIs. In that guide we briefly mentioned adding a dark / night mode theme to your apps, and in this guide we will walk you through it.

Adding a dark / night mode theme to your app can be a great option for your users – it saves battery life, and is much easier on the eyes at night. A white background on black text, or any combination of ‘bright’ colors in your UI, is really stressful on the eyes, particularly at night. Thus, a dark background with lighter text is much less stressful and harmful to the eyes, which is why many popular apps have started including a dark theme – YouTube and Reddit most recently, although Facebook still hasn’t published theirs after promising one back in May.

If you’d like to easily add a toggleable dark mode to your Android app, follow this Appuals guide and comment if you run into any issues!

Creating the XML Attributes

First you need to create an XML attributes file that will handle the theming. This is much better than including two sets of resources in your APK for two different themes, and thus bloating your APK size, as Android can natively change colors on attributes through this XML.

So in your app’s ‘resources’ folder, create a file named attrs.xml and add these lines (these are styleable attributes):

<declare-styleable name="CTAppTheme">
      <attr name=”primaryTextColor” format=”color”/> 
      <attr name=”secondaryTextColor” format=”color”/> 
      <attr name=”dividerColor” format=”color”/>
      <attr name=”backgroundCardColor” format=”color”/> 
      <attr name=”iconPlaceholder” format=”integer”/>
</declare-styleable>

Prior to Lollipop we could not specify attributes for drawables, so we had to specify the resource IDs for drawables – however, this is no longer the case.

Adding the Styles

To make this work, we need to create two separate styles which will share the same base. The first will obviously be your primary ‘light’ theme, and the second will be your ‘dark’ theme.

<!-- Light base activity theme -->
<style name="ActivityTheme.Primary.Base.Light" parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#F4F4F6</item>
    <item name="secondaryTextColor">#96F4F4F6</item>
    <item name="backgroundCardColor">#FFFF</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_light_plholder</item>
</style>

<!-- Dark base activity theme -->
<style name="ActivityTheme.Primary.Base.Dark"    parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#33343B/item>
    <item name="secondaryTextColor">#8033343B</item>
    <item name="backgroundCardColor">#28292e</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_dark_pholder</item>
</style>

Here are the actual styles for a given activity:

<!-- Specific Feed activity theme -->
<style name="FeedActivityThemeLight" parent="ActivityTheme.Primary.Base.Light">
    <item name="android:windowBackground">#F4F4F6</item>
</style>

<style name="FeedActivityThemeDark" parent="ActivityTheme.Primary.Base.Dark">
    <item name="android:windowBackground">#33343B</item>
</style>

You need to specify one of these themes into the Manifest for the app’s activity, which in this case is FeedActivity.

Stylizing the Views

Here’s an example of stylizing your views – in this example, its for a “Page not found” redirect error.

<ImageView
           android:id="@+id/placeHolderAssetImageView"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:src="?attr/iconPlaceholder"
           android:layout_marginBottom="8dp" />

       <TextView
           android:id="@+id/placeHolderTitleTextView"
           android:text="Page not found."
           android:textSize="16dp"
           android:textColor="?attr/primaryTextColor"
           android:layout_margin="16dp" />

How to Enable Dynamic Theme Switching

The best and most efficient way to enable dynamic theme switching is to load the SharedPreference valued which is used to store the setting into the Application instance using the Singleton pattern, which means we won’t have to do it at the start of each Activity.

public class App extends Application {
 public static final String TAG = "App";

private boolean isNightModeEnabled = false;

@Override
 public void onCreate() {
 super.onCreate();

// We load the Night Mode state here
 SharedPreferences mPrefs =  PreferenceManager.getDefaultSharedPreferences(this);
 this.isNightModeEnabled = mPrefs.getBoolean(“NIGHT_MODE”, false);
 }

public boolean isNightModeEnabled() {
 return isNightModeEnabled;
 }

public void setIsNightModeEnabled(boolean isNightModeEnabled) {
 this.isNightModeEnabled = isNightModeEnabled;
 }
}

Because this instance is being launched before anything else, it allows you to call isNightModeEnabled() Boolean whenever you want, in any activity belonging to the app once it has been opened.

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (MyApplication.getInstance().isNightModeEnabled()) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

However, if you want to apply a different theme than the one that is specified in the manifest file, it must be done before calling the parent onCreate() method.

Setting The State Using AppCompat

AppCompat is really useful for a wide range of things, and in this case, we’ll be using it to set the mode state. This means that you no longer need to use the app instance to create a cached state, thus cutting down on app cache bloat (albeit by a very tiny margin).

AppCompatDelegate
.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

Here, you can either use:

  • AppCompatDelegate.MODE_NIGHT_YES
    AppCompatDelegate.MODE_NIGHT_NO
    AppCompatDelegate.MODE_NIGHT_AUTO

Retrieving The State

AppCompatDelegate.getDefaultNightMode();

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (AppCompatDelegate.getDefaultNightMode()
    ==AppCompatDelegate.MODE_NIGHT_YES) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

That should be it – you can continue customizing and tweaking values to your liking, but this guide is a great introduction to get you started with including a native dark theme in your Android app.

Leave a Reply

Your email address will not be published.

Expert Tip

How to Include a Dark Theme in your Android App

If the issue is with your Computer or a Laptop you should try using Reimage Plus which can scan the repositories and replace corrupt and missing files. This works in most cases, where the issue is originated due to a system corruption. You can download Reimage by clicking the Download button below.

Download Now

I'm not interested

Close