Theme Color Configuration BizBundle

Theme Color Configuration BizBundle for Android is used to configure different UI color schemes in the Smart Life App SDK. You can generate static resource files by using this plug-in and dynamically get color values by using the Smart Home App SDK. Then, you can apply these colors to your app development. This way, the BizBundle can maintain consistency with your color schemes.

Preparation

Create a project

Smart Home App SDK for Android is integrated into your project with Android Studio. The BizBundle is added to your project. For more information, see Integration with UI BizBundle SDK for Android.

Configure a theme

The Theme Color Configuration BizBundle is an optional plug-in. To use this plug-in and its components, when you integrate the BizBundle SDK for Android, you do not need to configure the theme resources in res/values/colors.xml and theme color assets resources in assets/tyTheme/ui_theme_config.json.

In this case, you must delete both types of resources to avoid resource conflict after the plug-in is integrated.

Integrate the plug-in

// in rootProject build.gradle
buildscript{
    dependencies{
        // Declares the plug-in version.
        classpath "com.thingclips.smart:thingsmart-theme-open-plugin:2.0.1"
    }
}

// in application / library build.gradle
dependencies {
    // Depends on the run-time library.
    implementation "com.thingclips.smart:thingsmart-theme-open:2.0.2"
}

Initialize the plug-in

You can apply the settings in the following code block to build.gradle of your project to automatically generate the resources of static theme color values.

You can also go to the App Theme Color tab on the Tuya IoT Platform to configure the color schemes. For more information, see Customize the UI style.

apply plugin: 'com.thingclips.open.theme'
thingOpenTheme{
    // The light theme. Currently, the dark theme is not supported.
    lightTheme {
        color{
            // The background color.
            backgroundColor "#F8F8F8"
            // The theme color.
            themeColor "#FF5A28"
            // The warning color.
            warningColor "#FF4444"
            // The tip color.
            tipColor "#00CC99"
            // The guide color.
            guideColor "#1989FA"
            // The background color for an active tab.
            tabBarSelectColor "#FF5A28"
            // The background color of the navigation bar.
            navigationBarColor "#FFFFFF"
        }
        colorAlpha{
            // The transparency of the mask for a dialog box.
            alertMaskAlpha 0.8
        }
    }
}

Implement the plug-in

You can implement required features from ThingOptimusSdk.getManager(IThingThemeManager.class).

interface IThingThemeManager {
    /**
     * The theme color that is used as the background color of a button in most cases.
     * @return Int
     */
    @ColorInt
    fun getThemeColor() : Int

    /**
     * The warning color that is used as the background color of a warning control in most cases. This color can attract users' strong attention.
     * @return Int
     */
    @ColorInt
    fun getWarningColor() : Int

    /**
     * The tip color that is used as the background color of a tip control in most cases. This color applies to the interactions with users.
     * @return Int
     */
    @ColorInt
    fun getTipsColor() : Int

    /**
     * The guide color that is used as the background color of a guide control in most cases. This color applies to the guides for users.
     * @return Int
     */
    @ColorInt
    fun getGuideColor() : Int

    /**
     * The color for an active tab.
     * @return Int
     */
    @ColorInt
    fun getTabBarSelectedColor() : Int

    /**
     * The background color of the app pages.
     * @return Int
     */
    @ColorInt
    fun getBackgroundColor() : Int

    /**
     * The background color of the navigation bar.
     * @return Int
     */
    @ColorInt
    fun getNavigatorBgColor() : Int

    /**
     * The background color of a bottom tab.
     * @return Int
     */
    @ColorInt
    fun getBottomTabBarBgColor() : Int

    /**
     * The background color of a card.
     * @return Int
     */
    @ColorInt
    fun getCardBgColor() : Int

    /**
     * The background color of a dialog box.
     * @return Int
     */
    @ColorInt
    fun getAlertBgColor() : Int

    /**
     * The mask color of a dialog box.
     * @return Int
     */
    @ColorInt
    fun getAlertMaskColor() : Int

    /**
     * The background color of a cell in a list.
     * @return Int
     */
    @ColorInt
    fun getListCellBgColor() : Int

    /**
     * The text color of a headline.
     * @return Int
     */
    @ColorInt
    fun getHeadLineColor() : Int

    /**
     * The text color of a heading.
     * @return Int
     */
    @ColorInt
    fun getSubHeadColor() : Int

    /**
     * The color of auxiliary text.
     * @return Int
     */
    @ColorInt
    fun getAuxiLibiaryColor() : Int

    /**
     * The color of disabled text.
     * @return Int
     */
    @ColorInt
    fun getDisableColor() : Int

    /**
     * The text color for a theme background.
     * @return Int
     */
    @ColorInt
    fun getThemeTextColor() : Int

    /**
     * The text color that is used for a warning control in most cases. This color can attract users' strong attention.
     * @return Int
     */
    fun getWarningTextColor() : Int

    /**
     * The text color that is used for a tip control in most cases. This color applies to the interactions with users.
     * @return Int
     */
    @ColorInt
    fun getTipsTextColor() : Int

    /**
     * The text color that is used for a guide control in most cases. This color applies to the guides for users.
     * @return Int
     */
    @ColorInt
    fun getGuideTextColor() : Int

    /**
     * The text color in a navigation bar.
     * @return Int
     */
    @ColorInt
    fun getNavigatorTextColor() : Int
}

To use the static resources, apply the color values in the resource files that are generated in the path thingsrc/ui-open-theme-values of application module.

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <!--
Automatically generated files. Do not modify it manually!
-->
    <color name="thing_theme_open_color_theme">#ffff5a28</color>
    <color name="thing_theme_open_color_warning">#ffff4444</color>
    <color name="thing_theme_open_color_tips">#ff00cc99</color>
    <color name="thing_theme_open_color_guide">#ff1989fa</color>
    <color name="thing_theme_open_color_tab_bar_selected">#ffff5a28</color>
    <color name="thing_theme_open_color_background">#fff8f8f8</color>
    <color name="thing_theme_open_color_navigator_bg">#ffffffff</color>
    <color name="thing_theme_open_color_bottom_tab_bar">#ffffffff</color>
    <color name="thing_theme_open_color_card_bg">#ffffffff</color>
    <color name="thing_theme_open_color_alert_bg">#ffffffff</color>
    <color name="thing_theme_open_color_alert_mask">#ffff5a28</color>
    <color name="thing_theme_open_color_list_cell_bg">#ffff5a28</color>
    <color name="thing_theme_open_color_head_line_text">#e6000000</color>
    <color name="thing_theme_open_color_sub_head_text">#b3000000</color>
    <color name="thing_theme_open_color_auxi_libiary_text">#80000000</color>
    <color name="thing_theme_open_color_disable_text">#4c000000</color>
    <color name="thing_theme_open_color_theme_text">#ffffffff</color>
    <color name="thing_theme_open_color_warning_text">#ffffffff</color>
    <color name="thing_theme_open_color_tips_text">#ffffffff</color>
    <color name="thing_theme_open_color_guide_text">#ffffffff</color>
</resources>