Mitch Curtis

Qt Quick Controls 2: Imagine Style

Published Thursday November 23rd, 2017
7 Comments on Qt Quick Controls 2: Imagine Style
Posted in Biz Circuit & Dev Loop, Design, Dev Loop, Qt Quick 2, Qt Quick Controls, Styles, UI

Back in April we wrote about image-based styling for Qt Quick Controls 2. Since then, we have made good progress and nailed down some aspects that were still under consideration. We call the new style “Imagine”.

The style works by scanning a directory of images and applying those images to the controls. For example, when a Button is created, the style will look for button-background.9.png (or button-background.png for non-resizable buttons). As an example of what that image could look like, here’s button-background.9.png from the default assets:

Imagine Style Button background image.

When the user presses the button, the style then looks for button-background-pressed.9.png (or button-background-pressed.png). In the case of the default assets, that would look like this:

Imagine Style pressed Button background image.

The .9.png extension represents 9-Patch images. Using this format, we’re able to encode information about how the control should look when it is resized into the image itself. Combine this with the pre-defined file naming convention and you’ve got a style that can be customized without ever touching QML, giving designers complete control over what they do best, and allowing developers to focus on writing applications, not styles.

To provide a starting point for creating your own style, we’ve created a complete asset template in Sketch:

Default Imagine style Sketch template

Default Imagine style Sketch template (Sketch)

For those who prefer Illustrator or Photoshop, we’ve provided smaller templates, each with their own example that uses the assets:

Qt Quick Controls 2 - Imagine Style Example: Automotive

Qt Quick Controls 2 – Imagine Style Example: Automotive (AI)

Qt Quick Controls 2 - Imagine Style Example: Music Player

Qt Quick Controls 2 – Imagine Style Example: Music Player (PSD)

The Imagine style is available with Qt 5.10. For more information, see the documentation.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Biz Circuit & Dev Loop, Design, Dev Loop, Qt Quick 2, Qt Quick Controls, Styles, UI


Stéphane says:

Is there any performance penalty using this style at startup or when the application is running ?

Will it use more RAM if there is a lot of buttons on a page because it will store a QImage for each button ?
Should we use it for prototyping only and then implement classic styling when design is finished ?

Thanks 🙂

J-P Nurmi J-P Nurmi says:

With a style based on images, there’s some natural overhead compared to e.g. the minimal Default style which is mostly based on rectangles. What comes to the images, there’s some caching involved on different levels in the stack. Qt Quick (core) takes care of caching images so that they are not unnecessarily reloaded.

Simon says:

Is it possible to use Imagine for a specific button but Material otherwise?

J-P Nurmi J-P Nurmi says:

Due to performance reasons, it is unfortunately not possible to mix and match QQC2 styles.

Chris Hills says:

Does Imagine support vector images?

It would be great if there was a template for Krita as well as Photoshop/Illustrator/Sketch.

J-P Nurmi J-P Nurmi says:

We use 9-patch images instead of vector images. Notice that 9-patch images do not only provide necessary meta information for resizing/scaling, but they provide also content padding and visual insets. This allows one to specify e.g. the padding between button label and background, and that shadows go outside a popup. All this meta information is stored into a 1px wide frame around the images, which is read and cropped at runtime.

We have actually only one complete template, which is for Sketch, mainly thanks to its superior export functionality. The templates for Illustrator and Photoshop are implementing only a subset of controls, those that are used in the respective examples. More examples would be very welcome additions, but we probably don’t have resources to maintain complete templates for all possible design tools out there. 😉

Michal Lazo says:

I don’t like this 9-patch images idea. I didn’t saw it outside the android world.
for example when I use hw image decoder with direct VPU -> GPU( into some sprite map/cache )
I will need to download some specific part of texture for 9-patch information.
And still when we have qml compiler all padding/clipping information from QML should be fast.
So what benefits do we have with 9-patch images??

Commenting closed.

Get started today with Qt Download now