Resolution Independence (Qt, Android, iOS, BB10)

Qt High DPI

Since Qt 5.6 HighDPI is supported for all platforms. All details here: http://blog.qt.io/blog/2016/01/26/high-dpi-support-in-qt-5-6/

Read more about Qt 5.6+ scalability: http://doc.qt.io/qt-5/scalability.html

Also new Qt Quick 2 Controls (qt.labs.controls in Qt 5.6) support High DPI : https://doc-snapshots.qt.io/qt5-5.6/qtlabscontrols-highdpi.html

Enable High DPI Support

To enable High DPI Support you must enable Qt::AA_EnableHighDpiScaling :

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling); // <--
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

Device Pixel Ratio (Scaling Factor)

In Qt from display density (dpi) a scaling factor was calculated, where 160 dpi is scaling factor 1.

You can easy test this for your devices:

	qDebug() << qApp->primaryScreen()->devicePixelRatio();

For my two devices I got:

• Android (PRIV), 540 dpi –> scaling factor: 3.5
• iOS (iPhone 6S), 326 dpi –> scaling factor: 2.0

Use Pixels in QML

UI is defined in QML and all sizes, coordinates, … are in pixels. This is how Qt worked all the 20+ years.

Now with High DPI enabled the pixels are density-independent. Let’s take a look at the iPhone with Device Pixel Ratio 2.0

iPhone 6S has 750 x 1334 with 326 dpi. Let’s check the size:

	qDebug() << qApp->primaryScreen()->size();
	// we get: QSize(375, 667)

we get 375 x 667. So using a width of 120 will be calculated as 120 * 2.0 = 240 px

let’s compare this with other platforms:

Android Device Independent Pixels (dip / dp)

Android does it similar: Device Independent Pixels are 1:1 for 160 dpi (mdpi)

Android uses a set of generalized densities:

• ldpi (low) ~120dpi –> scaling factor: 0.7
• mdpi (medium) ~160dpi –> scaling factor: 1.0
• hdpi (high) ~240dpi –> scaling factor: 1.5
• xhdpi (extra-high) ~320dpi –> scaling factor: 2.0
• xxhdpi (extra-extra-high) ~480dpi –> scaling factor: 3.0
• xxxhdpi (extra-extra-extra-high) ~640dpi –> scaling factor: 4.0

Read more in detail here: http://developer.android.com/guide/practices/screens_support.html

As you can see Android also has a baseline at 160 dpi, so it’s the same as with Qt.

iOS Points and Pixels

What about iOS ? Coordinates and sizes are defined in points.

And it’s the same as for Android and Qt: At a density of 160 dpi the scaling factor is 1.

Take a look at http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions to compare all the sizes, pixels and points.

As you can see the iPhone 6 has 375 x 667 points for 750 x 1334 pixels – same as with Qt.

BlackBerry 10 Design Units (du)

Since OS 10.3 BlackBerry 10 also is resolution independent: https://developer.blackberry.com/native/documentation/best_practices/resolution/

BB10 uses Design Units (du) and groups the devices:

• BlackBerry Classic (720×720), 294 dpi –> 8 pixel per du
• BlackBerry Z30 (720 x 1280), 295 dpi –> 8 pixel per du
• BlackBerry Passport (1440 x 1440), 453 dpi –> 12 pixel per du

Coming from BlackBerry 10 development, you have to rethink / recalculate your dimensions.

There will be more articles about Icons, Images, Orientation, … stay tuned

---

← Back (Qt Quick Controls 2)

→ Next Article (Our first demo app)

⇐ Home (Overview / Topics)

---

 

Qt Quick Controls 2 / qt.labs.controls

Qt Quick Controls 1 vs Controls 2

Perhaps someone told you that Qt 5 APPs with complex UI or large scrollable Lists are slow. Follow my blog series and try it out: this has totally changed with new Qt Quick Controls 2. In fact: the new Controls are the reason why I recently started with Qt for mobile APP development.

The new Controls were first time introduced in march 2015 for Embedded Devices: http://blog.qt.io/blog/2015/03/31/qt-quick-controls-for-embedded/

At Qt World Summit 2015 in Berlin there was a live demo (see this Video) and in November 2015 a Status-Update providing Controls for Embedded and Mobile as Tech Preview in Qt 5.6. Now the Controls can be used with three styles:

• Material (Google Material Design)
• Universal (Windows 10 Universal Design)
• Default (Qt Design).

Together with High DPI support for all platforms from my POV the first time ever it is possible to develop mobile APPs for Android, iOS and Windows not only good looking but also performant using Qt as platform.

Qt Quick Controls 2 are also providing Controls for Navigation like Drawer or SwipeView. Developing mobile APPs you really need this. You’ll see this in action later.

What’s the main difference between Qt Quick Controls 1 and 2 Implementation ?

Qt Quick Controls 1 == pure QML

Here’s a Button in QML

There are many Objects and Loaders creating Objects which can slow things down.

Qt Quick Controls 2 == C++ / QML

Qt Quick Controls 2 changed this completely:

All the heavy stuff now is done in C++ (named Templates) – per ex. handling of Input Events is more efficient in C++ compared with the QML solution above where a MouseArea and Keys were needed for this. If you want to learn more take a look at the Video.

Here’s the result:

So – if someone tells you Qt 5 APPs are slow, don’t believe it and try it out using the new Controls.

BTW: Last years I developed many BlackBerry 10 Cascades APPs and all are running extremly performant. Cascades uses QML to describe the UI but designed an own UI Framework for BlackBerry 10 where all Controls are implemented in C++. So I’m lucky with this decision from Qt Quick Team also to go the C++ way.

Most examples yet are using Qt Quick Controls 1 – this will change step by step with Qt 5.7

Here’s a summary where you can compare the Controls: https://doc-snapshots.qt.io/qt5-5.6/qtlabscontrols-differences.html

Some of the names are same – others similar.

There’s an overview of all new Controls: http://doc.qt.io/qt-5/qtlabscontrols-index.html

HowTo get started: http://doc.qt.io/qt-5/qtlabscontrols-gettingstarted.html

Material / Universal Style

I really like Google Material Style and will use this as default for my Android and iOS APPs. The Controls are looking great and can be easy customized or extended. We’ll do this later in our Demo APPs we create as part of this blog series.

Qt Quick Controls 2 also support a light and dark Theme:

There’s a Qt Quick Controls 2 (qt.labs.controls) Gallery APP where you can see the new Controls in action. We’ll deploy this APP as a first exercise.

---

← Back (HowTo survive as a Qt Newbie)

→ Next Article (Resolution Independence)

⇐ Home (Overview / Topics)

---