Theme Color Configuration BizBundle

Theme Color Configuration BizBundle is used to configure different UI color schemes in Smart Life App SDK. You can generate static resource files by using this plug-in and dynamically get color values by using the Smart Life 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

Integrate Smart Life App SDK for Android into your project with Android Studio and add the BizBundle framework to your project.

Configure theme colors

The Theme Color Configuration BizBundle is an optional plug-in. To use this plug-in and its components, when you add the BizBundle framework, 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 with the BizBundle

// in rootProject build.gradle
buildscript{
    dependencies{
        // Declares the plug-in version.
        classpath "com.tuya.smart:tuyasmart-theme-open-plugin:1.1.0"
    }
}

// in application / library build.gradle
dependencies {
    // Depends on the run-time library.
    implementation "com.tuya.smart:tuyasmart-theme-open:1.1.0"
}

Initialize an object

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 Development Platform to configure the color schemes. For more information, see Customize UI.

apply plugin: 'com.tuya.open.theme'
tuyaOpenTheme{
    // 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 features

You can implement required features from TuyaOptimusSdk.getManager(ITYThemeManager.class).

interface ITYThemeManager {
    /**
     * 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 tysrc/ui-open-theme-values of the application module.

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <!--
Automatically generated files, please do not modify it manually!!!
-->
    <color name="ty_theme_open_color_theme">#ffff5a28</color>
    <color name="ty_theme_open_color_warning">#ffff4444</color>
    <color name="ty_theme_open_color_tips">#ff00cc99</color>
    <color name="ty_theme_open_color_guide">#ff1989fa</color>
    <color name="ty_theme_open_color_tab_bar_selected">#ffff5a28</color>
    <color name="ty_theme_open_color_background">#fff8f8f8</color>
    <color name="ty_theme_open_color_navigator_bg">#ffffffff</color>
    <color name="ty_theme_open_color_bottom_tab_bar">#ffffffff</color>
    <color name="ty_theme_open_color_card_bg">#ffffffff</color>
    <color name="ty_theme_open_color_alert_bg">#ffffffff</color>
    <color name="ty_theme_open_color_alert_mask">#ffff5a28</color>
    <color name="ty_theme_open_color_list_cell_bg">#ffff5a28</color>
    <color name="ty_theme_open_color_head_line_text">#e6000000</color>
    <color name="ty_theme_open_color_sub_head_text">#b3000000</color>
    <color name="ty_theme_open_color_auxi_libiary_text">#80000000</color>
    <color name="ty_theme_open_color_disable_text">#4c000000</color>
    <color name="ty_theme_open_color_theme_text">#ffffffff</color>
    <color name="ty_theme_open_color_warning_text">#ffffffff</color>
    <color name="ty_theme_open_color_tips_text">#ffffffff</color>
    <color name="ty_theme_open_color_guide_text">#ffffffff</color>
</resources>