Implementation of AndroidQ(10) dark mode adaptation

Preface: As an Android programmer, the most anticipated Google launch conference every year! ! Now, this year's AndroidQ is here as scheduled. Here is a brief introduction to the new features of Android:

• AndroidQ Global Dark Mode
• Update on privacy rights
• AndroidQ's new version of gesture navigation (actually imitating IOS)
• Optimization of system schedule UI (and other optimizations on system UI)
• Recommended Google Components (jetpack)

As soon as the annual Google Conference ends, the beginning of programmers' busy work, various adaptations, various new functions... After a lot of things, they are in a mess. However, after this year's press conference, if we look carefully at Q's update list, we actually don't need to adapt and optimize it. The main reason is that privacy rights and dark mode require us to urgently adapt. Moreover, the dark mode is the same as the previous multi-theme adaptation, so our follow-up optimization work will be easier. Without further ado, here we will introduce the adaptation of dark mode under the native system.

AndroidQ dark mode adaptation:

Introduction to the adaptation principle: Dark mode and normal mode are nothing more than switching between two themes (mainly various background colors, font colors and Icons). Therefore, we only need to define two sets of different themes and switch the theme according to whether it is dark mode.

Detailed steps:

Determine whether it is currently in dark mode: used to start up with a different topic

 //Check whether the current system has turned on dark mode  public static boolean getDarkModeStatus(Context context) {
    int mode = ().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 styles in the style file, but the parent must be specified as ‘', as shown below:

//Theme in normal mode <style name="main_theme_light" parent="">
    <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>

//Theme in dark mode <style name="main_theme_dark" parent="">
    <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 out the properties required to adapt to the dark mode (mainly color attributes: background color, font color, Icon color, etc. and assign values ​​to the attributes), similar to the following definition:
For reference in the style of the previous step, 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:

//Use our custom properties in the xml file< xmlns:andro
  xmlns:app="/apk/res-auto"
  xmlns:tools="/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" />

</>

// Toggle different themes in BaseActivity to make our customized properties take effect. You must set it before the setContentView() method: @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    if (getDarkModeStatus(this)) {
      setTheme(.main_theme_dark);
    }else {
      setTheme(.main_theme_light);
    }
    setContentView(.activity_main)
   }

//To achieve better adaptation effect, the following properties can be added to the activity node of the xml file:android:configChanges="uiMode"

The adaptation of ps:Icon can use the tint attribute to switch colors in different modes.

Summary: So far, even if we switch in the two modes is completed, you can try to turn on the system's dark mode, which shows that our sides will also be replaced with themes in the dark mode. If there are more different themes, our work will be simple. We just need to add the theme to the style file and add the color value under the theme.

This is the end of this article about the implementation of Android Q(10) dark mode adaptation. For more related content on Android Q(10) dark mode, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!