Android DayNight Theme for Night Mode in App

In today's digital age, user experience is of utmost importance. One aspect that significantly enhances the user experience, especially during low-light conditions, is the implementation of a night mode in an Android app. Android provides a powerful feature called the DayNight theme that allows developers to easily switch between light and dark themes based on the system settings or user preference. In this blog, we will explore how to implement the Android DayNight theme for night mode in your app.

Table of Contents#

Prerequisites#

Before we start implementing the DayNight theme, make sure you have the following:

  • Android Studio installed on your machine.
  • Basic knowledge of Android development, including XML layouts and styles.

Enabling DayNight Theme in AndroidManifest.xml#

The first step is to enable the DayNight theme in your app's AndroidManifest.xml file. Open the AndroidManifest.xml file and add the following line inside the <application> tag:

<application
    android:theme="@style/AppTheme"
   ...>
   ...
</application>

Here, @style/AppTheme is the base theme for your app. Now, create a new style in the styles.xml file (usually located in res/values/styles.xml) for the DayNight theme. For example:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
</style>

The Theme.MaterialComponents.DayNight.NoActionBar is a predefined DayNight theme from the Material Components library. You can choose other appropriate base themes depending on your app's requirements.

Defining Styles for Day and Night Modes#

You can define separate styles for the day and night modes. For instance, if you want to change the background color of your app's main activity in night mode, you can create two styles in styles.xml (and also in styles-night.xml if you want more granular control).

In styles.xml (for day mode):

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:windowBackground">@color/white</item>
</style>

In styles-night.xml (for night mode, create this file in res/values-night/styles.xml):

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:windowBackground">@color/black</item>
</style>

Here, @color/white and @color/black are color resources defined in colors.xml (and colors-night.xml if needed).

Using Colors in DayNight Theme#

To use colors that adapt to the day and night modes, you can define color resources in a special way. In colors.xml:

<color name="text_color">@color/black</color>

In colors-night.xml:

<color name="text_color">@color/white</color>

Then, in your layout XML or code, you can reference @color/text_color, and it will automatically pick the appropriate color based on the current mode.

Updating UI Elements for Night Mode#

Most UI elements like TextView, Button, etc., from the Material Components library will automatically adapt to the night mode to some extent. However, for custom views or when you want more control:

  • For TextView:
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/text_color"
    android:text="Sample Text" />

As we defined text_color to change based on the mode, the text color will update accordingly.

  • For custom backgrounds: If you have a custom view with a background shape, you can use color resources in the shape XML. For example, in a shape.xml file for a button background:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/button_background_color" />
</shape>

And define button_background_color in colors.xml and colors-night.xml as needed.

Testing the DayNight Theme#

To test the DayNight theme:

  • You can change the system's night mode setting (usually in the device's display settings).
  • In Android Studio, you can also use the "Theme" dropdown in the Design tab of the layout editor to preview how your app looks in different themes (day and night).

Best Practices#

  • Use Material Components Library: It provides a lot of built-in support for DayNight themes and consistent UI behavior across modes.
  • Test Thoroughly: Check all UI elements, especially custom ones, in both day and night modes to ensure proper appearance.
  • Provide User Control: Consider adding an option in your app's settings to let users override the system's night mode setting (e.g., force day or night mode).
  • Handle Edge Cases: For example, when the app is in the background and the system mode changes, make sure the UI updates correctly when the app comes back to the foreground.

Example Usage#

Let's say we have a simple activity with a TextView and a Button.

Layout XML (activity_main.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
 
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/text_color"
        android:text="This is a sample text" />
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:background="@drawable/button_background" />
 
</LinearLayout>

Colors (colors.xml):

<resources>
    <color name="text_color">@color/black</color>
    <color name="button_background_color">@color/blue</color>
</resources>

Colors (colors-night.xml):

<resources>
    <color name="text_color">@color/white</color>
    <color name="button_background_color">@color/dark_blue</color>
</resources>

Button Background Shape (drawable/button_background.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/button_background_color" />
    <corners android:radius="4dp" />
</shape>

With this setup, when the system's night mode changes, the text color of the TextView and the background color of the Button will update automatically.

Conclusion#

Implementing the Android DayNight theme for night mode in your app can greatly enhance the user experience. By following the steps of enabling the theme, defining appropriate styles and colors, and updating UI elements, you can create an app that looks great in both day and night conditions. Remember to follow best practices for testing and providing a seamless experience.

References#

2026-06