Android Dynamic skinning open Source Library colorful released

Source: Internet
Author: User

Recently I need to use the night mode, but after some search does not seem to see a good open source implementation, see a similar library multipletheme, but need to customize all to achieve the skin function of the view, feel more trouble. When found that the existing solution can not be a good solution to the problem, often only to achieve their own, so I took a little time to make a simple implementation of the function of the open source Library, named colorful.

Colorful is based on theme, no need to restart activity, no custom view, easy to implement daytime, night mode, GitHub address is https://github.com/bboyfeiyu/Colorful.

Colorful dynamic skin-changing open Source Library

The theme-based Android dynamic skinning Open Source Library is a simple way to implement night mode.

The effect is as follows:

I. How to use 1.1 Custom properties
<?xml version= "1.0" encoding= "Utf-8"?><resources>    <!--Custom properties --    <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 Using custom properties in layouts to set the background, text color, and other properties of the view

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  = tools:context  =" com.example.androidthemedemo.MainActivity " ;     <textview  android:id  = "@+id/textview"  android:layout_width  = "match_parent"  android:layout_height  = "wrap_content"  android:gravity  =< Span class= "Hljs-value" > "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  =< Span class= "Hljs-value" > "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" />     <ListViewandroid: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 the Root_view to a "?attr/root_view_bg" value that represents the custom property ROOT_VIEW_BG, and the TextColor property of TextView and button is set to "?attr/text_color" .

1.3 Defining multiple Theme

Then set different values for these properties in different theme, for example, we usually have both daytime and night mode color modes. 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>    <!--Day 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>    <!--Night 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_col or "> @color/white_tx_color</item> </style></Resources>

Two themes set different values for the same property to change the view's related properties when switching themes. For example, define the color values in Colors.xml.

<?xml version= "1.0" encoding= "Utf-8"?><resources>    <!--day 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 Setting the properties of the view to be modified

Here are the skin-changing settings for the view in Activity_main.xml:

ListView Mnewslistview = (ListView) Findviewbyid (R.id.listview);//Set the properties to be modified for the ListView without modifying the properties of the ListView itselfViewgroupsetter Listviewsetter =NewViewgroupsetter (Mnewslistview,0);//Bind the News_title view in the ListView's item view to modify its text_color properties when skinningListviewsetter.childviewtextcolor (R.id.news_title, R.attr.text_color);//Build Colorful objectsColorful mcolorful =NewColorful.builder ( This). Backgrounddrawable (R.id.root_view, R.ATTR.ROOT_VIEW_BG)//Set the view background image. 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 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 the ListView, and the value of the text color is the color value of the custom property Text_color. The colorful object is then built, and the IDs for Change_btn, Root_view, and TextView are bound to specific property values, such as backgrounddrawable (R.id.root_view, R.attr.root_ VIEW_BG) represents the Root_view background drawable The value of the custom attribute ROOT_VIEW_BG, TextColor (R.id.textview, R.attr.text_color) A value that represents the text color of the TextView control with ID TextView as R.attr.text_color. These properties all have different values in different theme, so the change occurs when you switch theme. We then add listviewsetter to the colorful object, iterate through all item View in the ListView when the theme is modified, and then modify the text color of the News_title control.

1.5 Toggle Theme

Finally, the theme is set through the colorful object to switch, the code is as follows:

booleanfalse ;// 切换主题privatevoidchangeThemeWithColorful() {    if (!isNight) {        mColorful.setTheme(R.style.DayTheme);    else {        mColorful.setTheme(R.style.NightTheme);    }    isNight = !isNight;}

Time is short, the function is simple, hope has the time schoolmate actively joins, will function slowly consummates up!

Copyright NOTICE: This article is mr.simple original article, cannot reprint without permission.

Android Dynamic skinning open Source Library colorful released

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.