Thursday, June 15, 2017

Android Night Mode

welcome to this post.In this post we are going to learn about how to use night mode on Android app. you can turn on night mode in your app by using android support library. you can use this option in settings or in the menu item.

night_mode
Night mode


In this case, I use this on settings. In a past post, we learn how to make app settings you can take a look
Let's start-
First, add new file name colors.xml in values-night folder and some colors-
<resources>
  <color name="colorPrimary">#051358</color>
  <color name="colorPrimaryDark">#020620</color>
  <color name="colorAccent">#800931</color>
  <color name="textColorPrimary">#e2dede</color>

  <color name="colorFabPressed">#1e710b</color>
  <color name="colorFabRipple">#0b0b3d</color>
  <color name="colorFabShadow">#66030303</color>

  <color name="colorFabToday">#385437</color>
  <color name="colorFabEveryday">#54364a</color>

  <color name="colorFabLabel_txt">#f2f1f1</color>
  <color name="colorFabLabelNormal">#232520</color>
  <color name="colorFabLabelPressed">#66626660</color>
  <color name="colorFabLabelRipple">#66844182</color>

</resources>
Note: add this color but you can only just add that's the color you want to override in night mode. Take a look on my values->colors.xml file then you can take a clear look on it.
<resources>
  <color name="colorPrimary">#3F51B5</color>
  <color name="colorPrimaryDark">#303F9F</color>
  <color name="colorAccent">#FF4081</color>
  <color name="textColorPrimary">#0e0e0e</color>

  <color name="colorFabPressed">#50ea2d</color>
  <color name="colorFabRipple">#2a23e7</color>
  <color name="colorFabShadow">#66626660</color>

  <color name="colorFabToday">#5d895a</color>
  <color name="colorFabEveryday">#704862</color>

  <color name="colorFabLabel_txt">#f2f1f1</color>
  <color name="colorFabLabelNormal">#232520</color>
  <color name="colorFabLabelPressed">#66626660</color>
  <color name="colorFabLabelRipple">#66844182</color>
</resources>
Now time to change your style- your style might look like this-
<!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <!-- Customize your theme here. -->
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  
  </style>
Now change Theme.AppCompat.Light.DarkActionBar to Theme.AppCompat.DayNight.DarkActionBar. Let's do this-
<!-- 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>
  
  </style>
Look like you complete 50% work Now come to the java code- I am using settings so night is enabled not that's saved in a shared preference. Shared preferences key-
<string name="switchKey">SwitchKey</string>
Now create a method that is checked is night mode is enable or not. The default value is false-
public static boolean getNightModeEnabled(Context context) {

        SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences(context);

        return preferences.getBoolean(context.getString(R.string.switchKey), false);
    }
Now Create a new Methods that's set Night mode in any activity-
Follow those steps-
1. call the newly created methods and save the return value on a boolean.
2 If the value is true the we write AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) on the if condition.
3. If it false then we add AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)this line.

see the code-
//set night mode for app
    private void setNightMode() {

        //get from setting check bok preference is true or false
        boolean isEnabled = getNightModeEnabled(this);

        if (isEnabled) {
            AppCompatDelegate.setDefaultNightMode(
                    AppCompatDelegate.MODE_NIGHT_YES);
        } else {
            AppCompatDelegate.setDefaultNightMode(
                    AppCompatDelegate.MODE_NIGHT_NO);
        }
    }
Final Screen short

day_mode
Day Mode

night_mode
Night mode


Thank you for reading this post hope you can use this option in your app
Happy coding

About Author:

I am Shudipto Trafder,
Since 2015, I write android code. I love to implement new ideas. I use java and also kotlin. Now I am learning Flutter. I love to learn new things and also love to share. And that is the main reason to run this blog.


Let's Get Connected: Facebook Twitter Linkedin Github

No comments :