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.
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.
-
Create one sample project on Android Studio with an Activity as MainActivity
-
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 values-night 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 :)