Implementation of AndroidQ of 10 Dark Mode Adaptation

As an Android programmer, I look forward to the Google conference every year! ! No, this year's AndroidQ arrived as scheduled. Here is a brief introduction to the new features of Android under 1:

AndroidQ Global Diablo Mode Update of privacy rights The new version of AndroidQ gesture navigation (actually imitating IOS) Optimization of system schedule UI (and optimization on other systems UI) Recommendations for Google Components (jetpack)

The end of Google Conference 1 every year is the beginning of programmers' busy work, all kinds of adaptations, all kinds of new functions... 1 pile of things come down, and they are in a state of exhaustion. However, after this year's press conference, a closer look at the updated list of Q shows that there are not many things that need us to adapt and optimize, mainly because privacy rights and dark modes need us to adapt urgently. Moreover, the dark mode is the same reason as the previous multi-theme adaptation, so our follow-up optimization work is simpler. Needless to say, here we will introduce the adaptation of dark mode under the native system.

AndroidQ Dark Mode Adaptation:

Introduction to Adaptation Principle: Dark mode and normal mode are nothing more than switching between two themes (mainly various background colors, font colors and Icon). Therefore, we only need to define two different themes and switch themes according to whether it is dark mode or not.

Detailed steps:

Determine whether you are currently in dark mode: for different topics when you start up

 // Check whether the current system has dark mode turned on 
  public static boolean getDarkModeStatus(Context context) {
    int mode = context.getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK;
    return mode == Configuration.UI_MODE_NIGHT_YES;
  }

Define two sets of themes (normal mode and dark mode): That is, customize two style under the style file, but you must specify parent as' Theme. AppCompat. DayNight. DarkActionBar ', as follows:

// Themes in Normal Mode 
 <style name="main_theme_light" parent="Theme.AppCompat.DayNight.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="main_text_color">@color/main_text_color_light</item>
    <item name="main_bg_color">@color/main_bg_color_light</item>
  </style>

// Themes in Dark Mode 
 <style name="main_theme_dark" parent="Theme.AppCompat.DayNight.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="main_text_color">@color/main_text_color_dark</item>
    <item name="main_bg_color">@color/main_bg_color_dark</item>
  </style>

Find and assign the attributes (mainly color attributes: background color, font color, Icon color, etc.) needed to adapt to the dark mode, similar to the following definition:
For reference in style in Step 1, different values are provided in different modes

 <!--   Main font color -->
  <attr name="main_text_color" format="color" />
 <!--   Main background color -->  
  <attr name="main_bg_color" format="color" />


 // Color attribute values in different modes 
 <color name="main_text_color_light">#000000</color>
  <color name="main_text_color_dark">#ffffff</color>
  <color name="main_bg_color_light">#ffffff</color>
  <color name="main_bg_color_dark">#000000</color>

Reference our custom properties in activity and xml:

// In xml Use our custom attributes in the file 
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="?attr/main_bg_color">

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:textColor="?attr/main_text_color"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

// In BaseActivity To make our custom attributes take effect, we must switch different themes in setContentView() Method before setting: 
 @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    if (getDarkModeStatus(this)) {
      setTheme(R.style.main_theme_dark);
    }else {
      setTheme(R.style.main_theme_light);
    }
    setContentView(R.layout.activity_main)
   }

// In order to achieve better adaptation effect, it can be found in xml Documentary activity Add the following attributes under the node: 
android:configChanges="uiMode"

ps: The adaptation of Icon can switch colors of different modes with the help of tint attribute.

Conclusion: At this point, even if our switching between the two modes is completed, you can try to turn on the dark mode of the system, which shows that several aspects of us will be changed to the theme in the dark mode. If there are more different themes, then our work is simple, just add themes under the style file and add color values under themes.