Android – DayNight View Tutorial

Published by admin on

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

Related Android posts :


4 Comments

kılıç arslan · July 15, 2018 at 7:24 pm

thx for the great code, but when i implement it on my aplicatioın only the actionbar color changes why do you think it can happen can you help me please?
Thank you very much again for the greaat code:)

admin · July 16, 2018 at 4:46 pm

I have tried it but it is working fine for me. Could you please try again by pulling the code ? I have updated it on Github.

Kılıç Arslan · July 17, 2018 at 10:36 am

it worked this time, my mistakes (not code’s), thank you very much admin:)

    admin · July 17, 2018 at 10:38 am

    you are welcome. keep visiting our blog 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *