Android DayNight Theme Example using AppCompat support library

With the Arrival of the new version 23.2 of library support Android brings a new components that can enrich the user interface. There’s a new theme added to AppCompat in this release: Theme.AppCompat.DayNight.
Before adding this theme to AppCompact developers have to make adjustments to their designs to account for different ambient light levels or time of day, but AppCompat is now offering to automate a little bit of that. Based on your last known location, the latest version can switch between regular and “night” themes for apps.This means developers now have to maintain two sets of themes, but it should also make it better for users.

Let’s Get it Working

In this tutorial we are going to learn how to use Day Night Theme. To really understand the usage of this theme we will create an app . The App contains simple buttons which will demonstrate the different usages of Theme.AppCompat.DayNight. So Firstly , We create a new android project and follow the steps below.


Step 1 ) Update build.gradle file .

Before you can use DayNight Theme in your projects you need to add the following compile line to your Gradle dependencies block in your build.gradle file and rebuilt the project .

Step 2 ) Update styles.xml .

Add the below string values to the string.xml located in res => values => styles.xml. you can use any of the following Theme.AppCompat.DayNight, Theme.AppCompat.DayNight.NoActionBar, Theme.AppCompat.DayNight.DarkActionBar.
Here in this example i have used always DarkActionBar Theme.

Step 3 ) Update colors.xml .

Add the below color values to the colors.xml located in res => values => colors.xml and res => values-night => colors.xml.
colors.xml file in values(for default mode) folder

colors.xml file in values-night(for night mode) folder

Step 4 ) Add images to drawables .

we are showing different image based on Mode type. So create drawable and drawable-night folder and put image.png with same name and different image(sun image for drawable and moon image for drawable-night) located in res => drawable and res => drawable-night .

Step 5 ) Update strings.xml . .

Add the below string values to the string.xml located in res => values => strings.xml .

Step 6 ) Update activity_main.xml .

Open the layout file for the i.e activity_main.xml located in res => layout => activity_main.xml and add the below code in your layout file . The code will create three buttons.

Step 7 ) Update MainActivity Class .

Now Open and make some changes in code . Here we will see the how to handle DayNight Theme switching . Here onClick of buttons i open another activity named ModeViewActivity to show the theme switching. There are three modes of DayNight Theme we can set it programatically by using AppCompatDelegate.setDefaultNightMode(/*Here we pass the mode type parameter*/). Following are the DayNight Theme modes
->To Set Default Auto Switching Night Mode
->To Set Default Day Mode
->To Set Default Night Mode

Step 8 ) create activity_mode_view.xml .

Create a layout xml named activity_mode_view.xml in res => layout and update the below code in that xml file. This code will create view for theme demonstration. Here TextView will show the theme mode and ImageView will show the sun or moon image depending on the Day and Night Mode.

Step 9 ) create ModeViewActivity class .

Create a class named ModeViewActivity and add the below code to the class .We can get current Mode status using AppCompatDelegate.getDefaultNightMode() method .

Step 10 ) Update AndroidManifest.xml .

Now open the AndroidManifest.xml and declare Activity name ModeViewActivity in manifest to handle the intent.

The above code would result a screen like this:

MainActivity and Auto Mode

MainActivity and Auto Mode

Night Mode and Day Mode

Night Mode and Day Mode


Enjoy Coding and Share Knowledge