Android DayNight Theme Example using AppCompat v23.2

Please follow and like us:

Android DayNight Theme Example using AppCompat v23.2 support library

Android DayNight Theme Example using AppCompat v23.2 support library provides simple solution for auto switching between Day and Night Theme. DayNight Theme choose Theme as per current time and last known location. This DayNight Theme works on API 14+ devices. Let’s explore Android DayNight Theme Tutorial step by step.

Download Android DayNight Theme Example

For integrating Android DayNight Theme in your application, we need to add latest AppCompat v23.2 support library in your app’s build.gradle dependency.

compile 'com.android.support:appcompat-v7:23.2.0'

Now you need to set DayNight Theme in your style.xml file

you can use any of the following theme

Theme.AppCompat.DayNight
Theme.AppCompat.DayNight.NoActionBar
Theme.AppCompat.DayNight.DarkActionBar

here in this example i have used always DarkActionBar Theme.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.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:textColorPrimary">@color/textColorPrimary</item>
        <item name="android:textColorSecondary">@color/textColorSecondary</item>
    </style>

</resources>

Sometimes you need separate resources according night or day mode. For this you can use night resource qualifier to differentiate from default resources

for example

Drawable (for default mode)
Drawable-night (for night mode)

values (for default mode)
values-night (for night mode)

like this you can differentiate all resources if you need different view for night mode.

In this example we are showing different image based on Mode type. So create drawable and drawable-night folder and put auto_image.png with same name and different image(sun image for drawable and moon image for drawable-night).

we also want to change background color and text color according mode type. So add colors to colors.xml file in values and values-night folder.

colors.xml file in values folder

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="textColorPrimary">#212121</color>
    <color name="textColorSecondary">#787878</color>
    <color name="background">#ffffff</color>
</resources>

colors.xml file in values-night folder

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="textColorPrimary">#ffffff</color>
    <color name="textColorSecondary">#ffffff</color>
    <color name="background">#555555</color>
</resources>

add three buttons (auto mode, night mode and day mode) in activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.nkdroid.daynighttheme.MainActivity">


    <Button
        android:id="@+id/btnAutoMode"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Auto Mode" />


    <Button
        android:id="@+id/btnNightMode"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Night Mode" />


    <Button
        android:id="@+id/btnDayMode"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Day Mode" />
</LinearLayout>

Create activity_auto.xml for showing DayNight Theme result as Image and mode type text

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".ModeActivity">


    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:src="@drawable/auto_image" />

    <TextView
        android:id="@+id/txtModeType"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Default Mode:"
        android:textColor="@color/textColorPrimary"
        android:textSize="18sp"
        android:textStyle="bold" />

</RelativeLayout>

Put Main logic of setting Auto Switching DayNight Theme in MainActivity.java file

We can set default mode programmatically using setDefaultNightMode() method like bellow

For Setting Default Auto Switching Night Mode

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);

For Setting Default Night Mode

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

For Setting Default Day Mode

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
package com.nkdroid.daynighttheme;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.app.AppCompatDelegate;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {


    private Button btnAutoMode, btnNightMode, btnDayMode;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Default Night Mode as Auto Mode
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);
        btnAutoMode = (Button) findViewById(R.id.btnAutoMode);
        btnNightMode = (Button) findViewById(R.id.btnNightMode);
        btnDayMode = (Button) findViewById(R.id.btnDayMode);


        btnAutoMode.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Set Auto Mode
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);
                Intent i = new Intent(MainActivity.this, ModeActivity.class);
                startActivity(i);
            }
        });

        btnNightMode.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Set Default Night Mode
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
                Intent i = new Intent(MainActivity.this, ModeActivity.class);
                startActivity(i);
            }
        });

        btnDayMode.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Set Default Day Mode
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                Intent i = new Intent(MainActivity.this, ModeActivity.class);
                startActivity(i);
            }
        });
    }
}

We can get current Mode status using getDefaultNightMode() method. Add ModeActivity.java file for getting mode status result and show image according mode type

package com.nkdroid.daynighttheme;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.app.AppCompatDelegate;
import android.widget.TextView;

public class ModeActivity extends AppCompatActivity {

    private TextView txtModeType;
    int modeType;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_auto_mode);
        txtModeType = (TextView) findViewById(R.id.txtModeType);
        modeType = AppCompatDelegate.getDefaultNightMode();

        if (modeType == AppCompatDelegate.MODE_NIGHT_AUTO) {
            txtModeType.setText("Default Mode: Auto");
        } else if (modeType == AppCompatDelegate.MODE_NIGHT_YES) {
            txtModeType.setText("Default Mode: Night");
        } else if (modeType == AppCompatDelegate.MODE_NIGHT_NO) {
            txtModeType.setText("Default Mode: Day");
        }
    }
}

Download Android DayNight Theme Example

Output of Android DayNight Theme Mode Types

Android DayNight Theme Example using AppCompat v23.2 support library

Android DayNight Theme Example using AppCompat v23.2 support library
Hope you like our simple solution of Android Auto Switching DayNight Theme Example.

nirav kalola