Quick and Simple Method to Implement Night Mode in Android with Example in Detail

ChangeMode

Project address:ChangeMode

Implementation of night mode for Android.

Implement night mode in the simplest way, supporting ListView, RecyclerView.

Preview

Usage xml

android:background="?attr/zzbackground"
app:backgroundAttr="zzbackground"//If the current page needs to be refreshed immediately, pass the attribute name here, for example, R.attr.zzbackground for zzbackground
android:textColor="?attr/zztextColor"
app:textColorAttr="zztextColor"//If you need to refresh the page effect immediately, do the same as above

java

@Override
protected void onCreate(Bundle savedInstanceState) {
//1. Call this method on the page where the effect needs to be switched immediately
ChangeModeController.getInstance().init(this,R.attr.class).setTheme(this, R.style.DayTheme, R.style.NightTheme);
//Call this method on other pages 
//ChangeModeController.setTheme(this, R.style.DayTheme, R.style.NightTheme);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Add additional view to night management
// ChangeModeController.getInstance().addBackgroundColor(toolbar, R.attr.colorPrimary);
//ChangeModeController.getInstance().addBackgroundDrawable(view, R.attr.colorAccent);
// ChangeModeController.getInstance().addTextColor(view, R.attr.colorAccent);
//2. Set switch
//ChangeModeController.changeDay(this, R.style.DayTheme);
//ChangeModeController.changeNight(this, R.style.NightTheme);
}
@Override
protected void onDestroy() {
super.onDestroy();
//3. In the onDestroy call
ChangeModeController.onDestroy();
}

Detailed operation description

First step: Customize attributes

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="zzbackground" format="color|reference"/>
<attr name="zzbackgroundDrawable" format="reference"/>
<attr name="zztextColor" format="color"/>
<attr name="zzItemBackground" format="color"/>
</resources>

Second step: Configure the night style file

<resources>
<!-- 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>
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="windowNoTitle">true</item>
</style>
<!--Day mode -->
<style name="DayTheme" parent="AppTheme">
<item name="zzbackground">@color/dayBackground</item>
<item name="zzbackgroundDrawable">@drawable/ic_launcher</item>
<item name="zztextColor">@color/dayTextColor</item>
<item name="zzItemBackground">@color/dayItemBackground</item>
</style>
<!--Night mode -->
<style name="NightTheme" parent="AppTheme">
<item name="zzbackground">@color/nightBackground</item>
<item name="zzbackgroundDrawable">@color/nightBackground</item>
<item name="zztextColor">@color/nightTextColor</item>
<item name="zzItemBackground">@color/nightItemBackground</item>
<item name="colorPrimary">@color/colorPrimaryNight</item>
<item name="colorPrimaryDark">@color/colorPrimaryDarkNight</item>
<item name="colorAccent">@color/colorAccentNight</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.DarkActionBar"> />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"> />
</resources>

Set the corresponding attribute values for the corresponding modes for the related attributes:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="dayBackground">#F2F4F7</color>
<color name="dayTextColor">#000</color>
<color name="dayItemBackground">#fff</color>
<color name="nightItemBackground">#37474F/color>
<color name="nightBackground">#263238</color>
<color name="nightTextColor">#fff</color>
</resources>

Third step: Configure the corresponding attributes in the layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="?attr/zzbackground"
app:backgroundAttr="zzbackground"
tools:context="com.thinkfreely.changemode.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@"+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:backgroundAttr="colorPrimary"
app:titleTextColor="?attr/zztextColor"
app:popupTheme="@style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
<Button
android:layout_width="match_parent"
android:layout_height="120dp"
android:gravity="center"
android:textColor="?attr/zztextColor"
app:textColorAttr="zztextColor"
android:background="?attr/zzItemBackground"
app:backgroundAttr="zzItemBackground"
android:padding="10dp"
android:layout_marginBottom="8dp"
android:textSize="22sp"
android:textAllCaps="false"
android:text="Switch to Night Mode by Mr.Zk" />
<android.support.v7.widget.RecyclerView
android:id="@"+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"/>
</LinearLayout>

Note the three properties: textColorAttr, backgroundAttr, and backgroundDrawableAttr. If you need to refresh the current page immediately, you need to add the corresponding attribute.

Property Description

textColorAttr sets the font color. For example, pass zztextColor as R.attr.zztextColor. For example: app:textColorAttr="zztextColor"
backgroundAttr changes the background color/Set the background image. As above. For example: app:backgroundAttr="zzbackground"
backgroundDrawableAttr changes the background color/Set the background image. As above. For example: app:backgroundDrawableAttr="zzbackground"

Step 4: Call java code on the page

@Override
protected void onCreate(Bundle savedInstanceState) {
//1. Call this method on the page where the effect needs to be switched immediately
ChangeModeController.getInstance().init(this,R.attr.class).setTheme(this, R.style.DayTheme, R.style.NightTheme);
//Call this method on other pages 
//ChangeModeController.setTheme(this, R.style.DayTheme, R.style.NightTheme);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//2. Set to switch between night and day modes
//ChangeModeController.changeDay(this, R.style.DayTheme);//Switch to day mode
//ChangeModeController.changeNight(this, R.style.NightTheme);//Switch to night mode
}
@Override
protected void onDestroy() {
super.onDestroy();
//3. In the onDestroy call
ChangeModeController.onDestroy();
}

Three steps of code calls can start the night journey. If there are newly created views on the page that need to be added to the night mode control, the code call is as follows:

//Add additional view to night management
// ChangeModeController.getInstance().addBackgroundColor(toolbar, R.attr.colorPrimary);
//ChangeModeController.getInstance().addBackgroundDrawable(view, R.attr.colorAccent);
// ChangeModeController.getInstance().addTextColor(view, R.attr.colorAccent);

If there are other non-standard defined attributes when changing the night mode, you can call the following code after ChangeModeController.changeDay or ChangeModeController.changeNight to assign values to the relevant attributes:

TypedValue attrTypedValue = ChangeModeController.getAttrTypedValue(this, R.attr.zztextColor);
toolbar.setTitleTextColor(getResources().getColor(attrTypedValue.resourceId));
About me
An Android Developer in Zhengzhou.

License
======= Copyright 2016 zhangke
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

The above-mentioned is a quick and simple method example of implementing night mode in Android introduced by the editor. Hope it will be helpful to everyone. If you have any questions, please leave me a message, and the editor will reply to everyone in time. At the same time, I would also like to express my heartfelt thanks to everyone for their support of the Yell Tutorial website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report violations. Provide relevant evidence, and once verified, this site will immediately delete the infringing content.)