Retina support in QML

Question

How to use retina support in QML? How to choose correct sizes and correct resolution of images? App needs to work on retina and not-retina devices.

Answer 1

A very good and comprehensive article on that topic by Morten Johan Sørvig can be found here.

Qt Quick 2 and the Qt Quick Controls work well out-of-the box when it comes to hdpi support. An important thing to take into consideration is raster content and as explained in the article:

As an app developer you have two options: (ignoring the “do-nothing” option)

Replace existing raster content with a high-resolution version
Provide separate high-resolution content

The first option is convenient since there is only one version of each resource. However, you may find (or your designer will tell you) that resources like icons look best when created for a specific resolution. To facilitate this, Qt as adopted the “@2x” convention for image filenames:

foo.png [e-mail]

High-resolution content can be provided side-by-side with the originals. The “@2x” version will be loaded automatically when needed by the QML Image element and QIcon:

Image { source = “foo.png” } QIcon icon(“foo.png”)

(remember to set AA_UseHighDpiPixmaps for QIcon)

---

Another thread on the topic here.