Android dynamic skin replacement open source library Colorful released, androidcolorful

Android dynamic skin replacement open source library Colorful released, androidcolorful

Recently I need to use the night mode, but after some searches, I don't seem to see a good open-source implementation. I see a similar library MultipleTheme, but I need to customize all the views to implement the skin swap function, it is troublesome. Prism does not support Theme and is no longer updated. Therefore, this solution cannot be used. When you find that the existing solution cannot solve the problem well, you can only implement it by yourself. Therefore, I spent some time simply creating an open-source library to implement this function and named it Colorful.

Colorful is based on Theme. You do not need to restart the Activity or customize the View to conveniently implement the daytime and nighttime modes. The github address is https://github.com/bboyfeiyu/colorful.

Colorful dynamic skin replacement open source Library

The Theme-based Android dynamic skin replacement open source library implements night mode in a simple way.

The effect is as follows:

I. Usage 1.1 Custom Attributes

<? Xml version = "1.0" encoding = "UTF-8"?> <Resources> <! -- Custom Attributes --> <attr name = "root_view_bg" format = "reference | color"/> <attr name = "btn_bg" format = "reference | color"/> <attr name = "text_color" format = "reference | color"/> </resources>

1.2 set attributes such as the background and text color of the View using custom attributes in the layout

Layout in activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/root_view"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="?attr/root_view_bg"    tools:context="com.example.androidthemedemo.MainActivity" >    <TextView        android:id="@+id/textview"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:text="@string/change_theme"        android:textColor="?attr/text_color"        android:textSize="20sp" />    <Button        android:id="@+id/change_btn"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/textview"        android:layout_marginTop="20dp"        android:text="@string/change_theme"        android:textColor="?attr/text_color" />    <Button        android:id="@+id/second_btn"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/change_btn"        android:layout_marginTop="20dp"        android:text="@string/sec_act"         />    <ListView        android:id="@+id/listview"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/second_btn"        android:layout_marginTop="20dp" /></RelativeLayout>

For example, in the above layout, we set the background of root_view"?attr/root_view_bg"It indicates that the background is the value of the custom property root_view_bg, And the textColor attribute of Textview and Button is set"?attr/text_color".

1.3 define multiple Theme

Then set different values for these attributes in different Theme. For example, we usually have two color modes: daytime and nighttime. The complete code in styles. xml is as follows:

<Resources> <style name = "AppBaseTheme" parent = "Theme. AppCompat. Light"> </style> <! -- Application theme. --> <style name = "AppTheme" parent = "AppBaseTheme"> </style> <! -- Daytime theme --> <style name = "DayTheme" parent = "AppTheme"> <item name = "root_view_bg"> @ drawable/bg_day </item> <item name = "btn_bg "> @ color/white_btn_color </item> <item name =" text_color "> @ color/black_tx_color </item> </style> <! -- Nighttime theme --> <style name = "NightTheme" parent = "AppTheme"> <item name = "root_view_bg"> @ drawable/bg_night </item> <item name = "btn_bg "> @ color/black_btn_color </item> <item name =" text_color "> @ color/white_tx_color </item> </style> </resources>

Different values are set for the same attribute under the two topics to modify the attributes of the View when switching the topic. For example, define the color value in colors. xml.

<? Xml version = "1.0" encoding = "UTF-8"?> <Resources> <! -- Daytime mode --> <color name = "white_btn_color"> # 3BB32E </color> <color name = "black_tx_color" >#333333 </color> <! -- Night mode --> <color name = "black_btn_color"> # aa7788 </color> <color name = "white_tx_color"> # f0f0f0 </color> </resources>

1.4 set the attributes of the View to be modified

Next we will change the skin settings for the view in activity_main.xml:

ListView mNewsListView = (ListView) findViewById (R. id. listview); // set the attribute to be modified for the ListView. ViewGroupSetter listViewSetter = new ViewGroupSetter (mNewsListView, 0) is not modified for the attributes of the ListView ); // bind news_title View in the Item View of ListView. Modify its text_color attribute listViewSetter during skin replacement. childViewTextColor (R. id. news_title, R. attr. text_color); // construct the Colorful object Colorful mColorful = new Colorful. builder (this ). backgroundDrawable (R. id. root_view, R. attr. root_view_bg) // sets the background image of the view. backgroundColor (R. id. change_btn, R. attr. btn_bg) // set the background color of the button. textColor (R. id. textview, R. attr. text_color) // set the text color. setter (listViewSetter) // manually set setter. create ();

First, we define a listViewSetter, which is used to set the text color for the news_title control in each Item View of ListView. The text color value is the color value of the custom property text_color. Then construct a Colorful object, and bind the control IDs of change_btn, root_view, and textview to specific attribute values, such as backgroundDrawable (R. id. root_view, R. attr. root_view_bg) indicates that the background Drawable of root_view is the value of the custom attribute root_view_bg, textColor (R. id. textview, R. attr. text_color) indicates that the text color of the textview control whose id is TextView is R. attr. the value of text_color. These attributes have different values in different Theme, so Theme changes when switched. Then, we add listViewSetter to the Colorful object. When the topic is modified, all the Item views in the ListView are traversed, and the text color of the news_title control is modified.

1.5 switch topic

Finally, you can use the Colorful object to set the topic to implement switching. The Code is as follows:

Boolean isNight = false; // switch the topic private void changeThemeWithColorful () {if (! IsNight) {mColorful. setTheme (R. style. DayTheme);} else {mColorful. setTheme (R. style. NightTheme);} isNight =! IsNight ;}

The time is too short and the functions are simple. I hope that students who have time can join us and gradually improve the functions!

Copyright Disclaimer: This article is an original Mr. Simple article and cannot be reproduced without permission.