Android – DayNight View Tutorial

What is day night theme and how to use it on android application ?

Support Library 23.2 has introduced a new DayNight theme for Android Apps using which will automatically change the application theme to day or night mode based on the time of day and user’s last known location. Also, this theme can be used back up to Android Ice Cream Sandwich devices. 

android daynightview

 

Types of Day Night theme :
We can use any one of the following themes on our project :

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

Separate resources for night mode and day mode :
Sometimes we need to use different resources for different mode . This can be accomplished by using different drawable and different values folders.

a) Folder names for default mode :
     drawable
     values
b) Folder names for night mode :
     drawable-night

     values-night

In this tutorial, we will use two different drawable folders with two different images having same name. If night mode is enabled in the application, image from drawable-night will be picked up.

Similarly for showing different text colors on different mode , we will use different values folder.
  1. Create one sample project on Android Studio with an Activity as MainActivity
  2. Also, create one more Activity as DayNightActivity . We will add 3 Buttons on this Activity. Clicking on these buttons will Start DayNightActivity with different theme mode. MainActivity and DayNightActivity will look like as below :

    import android.content.Intent;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatDelegate;
    import android.view.View;
    import android.widget.Button;
    
    public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    
        private Button dayButton;
        private Button nightButton;
        private Button autoButton;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            dayButton = (Button)findViewById(R.id.buttonDay);
            nightButton = (Button)findViewById(R.id.buttonNight);
            autoButton = (Button)findViewById(R.id.buttonAuto);
    
            dayButton.setOnClickListener(this);
            nightButton.setOnClickListener(this);
            autoButton.setOnClickListener(this);
    
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);
        }
    
    
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.buttonAuto:
                    //change theme to auto mode
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO);
                    break;
                case R.id.buttonDay:
                    //Change theme to day mode
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                    break;
                case R.id.buttonNight:
                    //change theme to night mode
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
                    break;
            }
    
            Intent intent = new Intent(MainActivity.this, DayNightActivity.class);
            startActivity(intent);
        }
    }

     

    package com.codevscolor.daynightview;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatDelegate;
    
    public class DayNightActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_day_night);
    
            TextView title = (TextView) findViewById(R.id.textviewMain);
    
            int themeMode = AppCompatDelegate.getDefaultNightMode();
    
            if (themeMode == AppCompatDelegate.MODE_NIGHT_AUTO) {
                title.setText("Current Theme : Auto");
            } else if (themeMode == AppCompatDelegate.MODE_NIGHT_NO) {
                title.setText("Current Theme : Day");
            } else if (themeMode == AppCompatDelegate.MODE_NIGHT_YES) {
                title.setText("Current Theme : Night");
            }
        }
    }
    

     3.Update your Application’s theme inside style.xml as below :

    <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>
        </style>
    
    </resources>
    

     
    4. Create two “values” folders : values and values-night . And update colors.xml file on each of these folders:

    values/colors.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#afb53f</color>
        <color name="colorPrimaryDark">#5b520f</color>
        <color name="colorAccent">#FF4081</color>
        <color name="textColorPrimary">#000000</color>
        <color name="colorBackground">#FFFFFF</color>
    </resources>
    

    values-night/colors.xml

    <?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="colorBackground">#000000</color>
    </resources>
    

     If night mode is enabled, the application will use resources from valuesnight folder and if day mode is enabled, it will use from values folder.

          5. Similarly, create two different drawable folders and place two images with same name inside both of these folders.

That’s it. You can see that if Button auto is to enable auto mode, button day is to enable day mode and night is to enable night mode in the application. You can download this application from here , and if you have any doubt, please let me know 🙂

images credit : link1, link2

 

 

Leave a Reply