DEVELOPERS BLOG

Color Your App Beautiful with the 10.3 Release

Want to add color to your app? Aside from the fact that colors add beauty to life and in turn to your app, you might have been waiting for this feature to add uniqueness to your app, to meet your branding requirements or to maintain the same visual style of your app across all mobile platforms.
Again, we have sincerely listened to your feedback and in the 10.3 gold release of the BlackBerry 10 Native SDK, we have added three updates that will help you color your app beautiful.

Colorization Update #1

We have added support to custom theme settings. Prior to the 10.3 release, you could only choose between a dark theme and a light theme for your application. Now, you can apply a custom theme to your application by specifying custom “Primary” and “Primary base” colors in the Application tab of the application’s bar-descriptor.xml file (you can also do so by directly updating the source of the file through the Source tab). The primary color is simply the brand color that the platform will use to create a custom UI palette to apply to all UI components used in your app, while the primary base color is what it will use to create the gradients that will go with the primary color.

Here is a screenshot of the newly added section of the Application Tab of the bar-descriptor.xml file:

colorization1

But, that’s not all in terms of custom themes!! Not only did we add the option to configure your app with a custom theme during app configuration, but we have also added functions to the ThemeSupport API that will allow you to update the theme of your app during runtime. The three newly added functions that would allow you to do so are: 1) the setVisualStyle(), 2) the setPrimaryColor() and 3) the setVisualStyleAndPrimaryColor() functions. Note, however, that those three functions are resource-heavy and it is advised to use them only sparingly.

Colorization Update #2

In this release, we have also brought to you the option of image colorization of your image resources.

Image Colorization method #1:

The 10.3 release has introduced the .amd file version 1.1 with the new “type” property. The “type” property basically tells the platform how to treat each image in terms of colorization. A value of “normal” means: use image as is without any modification to its original color. And, a value of “template” means: apply colored theme (or filterColor as described below) to the image. Here’s an example .amd file with the type property set to “template”:

#RimCascadesAssetMetaData version=1.1
source: "colorpalette.png"
type: template

Image Colorization method #2:

You can also add colorization to your images through the newly added filterColor attribute of the ImageView API. Here is how it is used in QML:

    Container {
       ImageView{
           imageSource: "asset:///images/colorpalette.amd"
           filterColor:Color.Red
       }
    }

Note that, in order for the filterColor to be applied, the “type” attribute of the .amd file has to be set to “template”.

colorization2

Colorization Update #3

Finally, the third update we have added in terms of colorization is the new backgroundColor property of the AbstractActionItem API (and hence all ActionItems that inherit from it). Currently, this attribute works only with the also newly added Signature attribute of the ActionBarPlacement API. Together, the two attributes allow you to place emphasis on ActionItems that are most important to your user on a given screen. Here’s how the ActionItem looks like, if you set the ActionBarPlacement to Signature, (which understandably also places it on the ActionBar) and give it a Red backgroundColor:

colorization3

And here is the QML implementation:

   actions: [
        ActionItem {
            ActionBar.placement: ActionBarPlacement.Signature
            backgroundColor:Color.Red
        }
    ]

I hope you will find the above three newly added features as colorful and as easy to use as I do. Let me know if you have any questions in the comments’ section below. I’ll be happy to answer those…

@SamarAbdelsayed

About sabdelsayed