Think international from the beginning

Even if you think, that you don’t need to support more then one language – it’s better to have this in mind from the beginning, because it’s hard to add later.

I’m developing business apps and business is international, so I’m always developing for multi-language support.

This article is a short summary what’s needed and covers configuration, translation and build process.

Configure Qt Creator External Tools

There’s an extra application Qt Linguist to translate and two important commands lupdate and lrelease. Using External Tools it’s easy to have access without leaving Qt Creator or the need of the command line. Here’s HowTo:

1. Configure easy access to Qt Linguist

Together with you Qt installation you got the Qt Linguist. Please take a look at the manual:


I’m living in Germany and always develop my APPs in english and immediately doing the translation to german. This way I always detect soon if I forgot to make a String translatable. (we’ll talk about this later) Also german words normaly need some more space so I can control how the app looks in german vs english. I already used the Qt Linguist for my BlackBerry 10 Cascades development and really like the tool.

You’ll find the Qt Linguist app here:


Thanks to tips I got from Qt community (creator list) I found out that you can open Qt Linguist directly from Qt Creator.

Preferences -> Environment –> External Tools is the key:


Fill out the description (Linguist) and path to the Executable (Tap Choose and Select Linguist)

It’s a good idea to set the Working Directory. Instead of a hardcoded path you can also use a variable: %{CurrentProject:Path} Now the Linguist always opens inside your current project.

Adding the External Tool will place it under ‘Uncategorized’ – move it via Drag-n-Drop under existing Linguist category.

Now it’s easy to start the Linguist from inside your Qt Creator:



From Linguist open the files to translate (.ts).

A first screenshot from Linguist so you’ll get the idea:


As I opened Qt Linguist first time, I got it in german. Unfortunately there’s no language settings as described for Qt Creator above.

This little trick does it:


Search the translation files for linguist and rename the linguist_de.qm file – now Linguist opens in english.

(I created a Feature Request:

2. Configure lupdate in External Tools

Under Preferences –> Environment –> External Tools there already exist access to commands for lupdate and lrelease. (lupdate is looking for the strings you marked as translatable and to create or update the translation files <app>.ts. Using Linguist or external tools you can then translate the strings. lrelease compiles these translations from *.ts into *.qm. Only *.qml files will be deployed to your device)

I found out that the default configuration doesn’t work on Android and iOS – please change the executable:


3. Configure lrelease in External Tools

Do the same for lrelease:


That’s all to configure.

Make your Strings translatable

You can read in detail about this in Qt documentation:

Here’s a short starter:

To enable your app to use a Translator you have to add some lines of code into your main.cpp:

#include <QTranslator>
    // ...
    QGuiApplication app(argc, argv);

    QTranslator translator;
    if (translator.load(QLocale(), QLatin1String("my_app"), QLatin1String("_"), QLatin1String(":/translations"))) {
    } else {
        qDebug() << "cannot load translator " << QLocale::system().name() << " check content of translations.qrc";

    QQmlApplicationEngine engine;
	// ...

Translation in your C++ sources is done using tr(), in QML files using qsTr()

QML: (simple text to be translated)

Label {
    text: qsTr("City")

QML: (text with arguments)

Label {
	property int theValue: 42
	text: qsTr("The answer of all is %1").arg(theValue)

QML: (text with arguments and quantity)

Label {
	property int count: 1
	text: qsTr("%1 piece(s)","",count).arg(count)

That’s all you need to know for your sourcecode.

HowTo extract translatable Strings

Now as your C++ and QML code contains all the stuff to make your Strings translatable – HowTo get these Strings out of your code to be able to translate using Qt Linguist or other solutions ?

lupdate does this. If you followed my tips above, you can use lupdate from External Tools inside Qt Creator. At first lupdate must know the languages used and also where to find the C++ and QML sources. Here are the relevant parts from

TARGET = my_app
# cpp sources
SOURCES += main.cpp
# qml sources
lupdate_only {
    SOURCES +=  main.qml \
    common/*.qml \
# Supported languages
LANGUAGES = de en fr
# used to create .ts files
 defineReplace(prependAll) {
     for(a,$$1):result += $$2$${a}$$3
 # Available translations
 tsroot = $$join(TARGET,,,.ts)
 tstarget = $$join(TARGET,,,_)
 TRANSLATIONS = $$PWD/translations/$$tsroot
 TRANSLATIONS += $$prependAll(LANGUAGES, $$PWD/translations/$$tstarget, .ts)

The compiler needs all C++ sources, lupdate also needs the qml sources. Using lupdate_only {} does the trick not to confuse the compiler. To avoid the need to create .ts files for each language the $$prependAll – stuff does this:

  • create my_app.ts
  • create my_app_de.ts
  • create my_app_en.ts
  • create my_app_fr.ts

All files are created inside project working dir at /translations – so this directory should be there.

Translate your Strings

Now open Qt Linguist from External Tools and select the .ts files.

Attention: Never open the rootfile my_app.ts – this file will always be regenerated from lupdate !.

Build and Run your APP on Android or iOS Devices

The compiled APP won’t use the *.ts files – the APPs always need the compressed compiled version *.qm.

lrelease compiles your .ts files into .qm files. Here’s the part for this in your

# run LRELEASE to generate the qm files
qtPrepareTool(LRELEASE, lrelease)
 for(tsfile, TRANSLATIONS) {
     command = $$LRELEASE $$tsfile
     system($$command)|error("Failed to run: $$command")

This will create the *.qm files where your *.ts files are: at root of your project dir in /translations folder.

If you take a look at the code in your main.cpp (see above) where QTranslater was loaded using :/translations as path to my_app_xx.qm files, you know from :/ that *.qm files must be part of Qt Resources.

For this from we’re providing a .qrc file containing all the qm files:

RESOURCES += qml.qrc \

Unfortunately the .qm files won’t automatically become part of translations.qrc. You have to add them manually. This only must be done if adding new languages. In this case you have to at the language to LANGUAGES in .pro, then run lupdate and build your project to create the new .ts and .qm files. Then you can right-click on translations.qrc and use Add Existing Files to add the .qm for the new language.

That’s it:)


I spent much time to figure this out and to find a way without use of command line. Hopefully I described it in a way to make it easy for you to start translations in your Android and iOS APPs.

Here are the most important workflows HowTo translate your text and HowTo add more supported languages.

(The app from the screenshots below is named ‘one_page_x’)

Workflow adding / editing translatable Strings


Workflow supporting a new language


Cascades does it different

Doing x-platform apps also for BlackBerry 10 (C++/Qt 4.8/Cascades) it’s really easy:

Only add the languages to your project file (bar-descriptor.xml) …


… then build the project and all the lupdate/lrelease ts/qm stuff is done by magic under the hood:


← Back (Qt Creator – First Deployment)

→ Next Article (HowTo survive as a Qt Newbie)

⇐ Home (Overview / Topics)

This blog series is about the new Qt Quick Controls 2 to develop mobile apps for Android and iOS.

Qt Quick Controls 2 are introduced as a Technical Preview in Qt 5.6 and willbecome Qt Quick Controls 2 in Qt 5.7.

Qt 5.7 Beta was announced 2016-04-21. This Beta is only available as a download – not from Online Installers.

If you only want to do first steps to try out you can go on with the Qt 5.6 – if you want to get the newest features it makes sense to install Qt 5.7 Beta.

Attention: the new UI Controls are still named ‘qt.labs.controls’ – beginning with the Qt 5.7 RC the renaming into Qt Quick Controls 2 will befinished, so be warned: you must change the imports in your QML files as soon as Qt 5.7 RC is out.

Besides Qt 5.7 Beta you’ll also get a new Qt Creator 4.0 RC.

Here are the steps to download and install Qt 5.7 Beta:

Install Qt 5.7 Beta

Go to your Qt Account – Downloads and select Qt – 5.7.0-beta:


Here’s my download on OSX:


Double click to install:


Log into your Account:


Select the folder where to install:


As next select your components:


and wait for the installer:



Start Qt Creator with -settingsPath

All Qt Creator instances by default share the settings. Having the new Qt Creator 4 and old 3.6.2 using the same settings is no good idea. Also I want to use different working directories for my Qt 5.6 and the new Qt 5.7 Beta.

You can start Qt Creator wit parameter -settingsPath – here’s HowTo do this from OSX:

Search for the Qt from Qt 5.7 Beta and do a right-click on the app. Here’s the content:


rename Qt Creator to something like Qt Creator-bin:


From a Text Editor create a Script to execute the Qt Creator-bin with a parameter:


Save this file named “Qt Creator” besides the Qt Creator-bin:_


Now you can start Qt Creator, which will execute the script:


Qt Creator will create the QtProject folder where all the configuration settings are stored.

Now you can start Qt Creator 3.6.1 from Qt 5.6.0 together with Qt Creator 4.0 RC from Qt 5.7 Beta without any collision.

Qt Creator 4.0 RC

First thing you’ll notice after starting Qt Creator 4.0 is the new default flat design. If you don’t like it you can go back to the old one or a dark theme:


And here’s the new flat design:


Qt Creator Preferences Working Directory

Set your working directory for 5.7 Beta:


Qt Creator Preferences Android

Take a look at your Android preferences:


Select your SDK and NDK locations and check ‘Gradle’:


Qt Creator External Tools

I’m developing business apps and business apps always need support of languages (i18n). Configuring the External Tools for Linguist (Qt’s Tool to translate text from your QML and C++ sources) will make it more comfortable.

As first step we’ll add the Linguist App.You’ll find the Linguist at 5.7 –> clang_64 –> bin:


I like to use Tools in english, but the language cannot be changed yet for Linguist, so the trick is to rename the translations file, which in my case is 5.7 –> clang_64 –> translations –> linguist_de.qm:


Under Preferences –> Environment –> External Tools there already exist access to commands for lupdate and lrelease. (lupdate is looking for the strings you marked as translatable and to create or update the translation files <app>.ts. Using Linguist or external tools you can then translate the strings. lrelease compiles these translations from *.ts into *.qm. Only *.qml files will be deployed to your device)

I found out that the default configuration doesn’t work on Android and iOS – please change the executable:



Test if Linguist will start. From External Tools


Linguist should start:


Verify Installation: New qt.labs.controls Project

As last step verify if all is correct configured. Normaly I do this using the qt.labs.controls Gallery app, but because of work on the renaming from qt.labs.controls into Qt Quick Controls 2 it’s missed as part of  Qt 5.7 Beta. So let’s try out a brand new qt.labs.controls Project wizard:



Select your Kits – I selected Android and iOS devices:


You’re done. Connect your device via USB and hit ‘Run’:


The app should run on your devices.

Congrats – now you have installed Qt 5.7 Beta. Please follow my blog series:

As soon as Qt 5.7 RC is out I’ll edit the articles containing 5.6 screenshots.

Qt High DPI

Since Qt 5.6 HighDPI is supported for all platforms. All details here:

Read more about Qt 5.6+ scalability:

Also new Qt Quick 2 Controls (qt.labs.controls in Qt 5.6) support High DPI :

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;
    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:

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 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:

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 … wip …

⇐ Home (Overview / Topics)


Qt for Mobile Business Apps

I want to motivate other mobile APP developers to try out Qt for mobile and decided to publish a blog series. If you are an Android, BlackBerry 10 or iOS developer these articles are for you ! See also the Video about Qt – x-platform development at the bottom of this page if you need an appetizer.


Video MobileTechCon 2016 Munich

My talk at MobileTechCon gives you a first overview and explains in detail why I – besides BlackBerry 10 – am using Qt 5.6+ for native x-platform development.


Patch Qt 5.6.0

April 8, 2016 — Leave a comment

While testing Qt 5.6.0 and qt.labs.controls on Android and iOS I noticed a problem.

Please take a look at this screenshot:


qt.labs.controls provide three styles: Material, Universal, Default. Controls are different but should have similar size.

As you can see the text in Material style is too small. So I reported a bug:

Bug was fixed soon by J-P Nurmi:)


As I reported the bug, branch 5.6.0 was already freezed, so the fix is in current 5.6 branch: 5.6.1

If you installed 5.6 you probably got 5.6.0.

You can verify your version from Qt Creator –> Preferences –> Build & Run –> Qt Versions


If you want to do some real apps from Qt 5.6.0 you should patch your installed Qt Version.

Qt is Open Source – so it’s no problem to get the changed module:)

From the bug you can get the info of the affected component (qt/qtquickcontrols2) and the branch (5.6) where it was fixed:


Now it’s easy to patch.

Hint: you must do this for all installed kits – so I have done it for Android and iOS.

Open a Terminal and do this to patch the Android Kit:

export ANDROID_NDK_ROOT=/your_path_to/android-ndk-r10e
cd /your-path-to-store-cloned-repo_android
git clone --branch 5.6 git://
cd qtquickcontrols2
make install

and similar for iOS:

cd /your-path-to-store-cloned-repo_ios
git clone --branch 5.6 git://
cd qtquickcontrols2
make install

thanks @jpnurmi helping me to make this work.

← Back (Install Qt 5.6)

→ Next Article (Qt Creator – Intro)

⇐ Home (Overview / Topics)

Edited 2016-04-28: Unfortunately Qt 5.7 Beta doesn’t include the Gallery because of some renaming-trouble. To test a first deployment running Qt 5.7 Beta please follow this article: qt-5.7-beta

Now it’s time to check if your installation and settings are well done. Easiest way to do this is to deploy an existing example to Android and iOS.

qt.labs.controls Gallery Example

Open Qt Creator, then goto Welcome –> Examples and search for labs.controls: (Qt 5.6) or search for Gallery from Qt 5.7


In 5.6 where qt.labs.controls are only a TechPreview there’s only one Example: Gallery

Build and Run Configuration

Click on Gallery selects ‘Project’ on the left side and opens two windows: Project Build and Help:


Click on Add Kit to add your Kits:


I always only test on real devices, so I’m using these two Kits: Android for arm and iPhone.


Hover with your mouse over the top-right corner of a Kit and you can Remove it.

Each Kit has Build and Run Tabs where you can configure the build. Qt Creator should have done most of the work automatically – so for running the Example it should work out of the box.

Here’s the Android Build:


check the APK Build, where you can select the SDK. Also there’s the checkbox to use Gradle and how Qt libraries are bundled:


Compile, Deploy and Run on Android

Now connect your Android Phone via USB.

At left-bottom side please select the correct Kit to be used: Android – Debug:


Now we can (Build and) Run the APP:


Qt Creator asks you which Device to use. We already have connected the Android Device: STV100-4 is the BlackBerry PRIV:


Select the Device and Qt Creator will compile and build. Open the Compile Output to see what happens:


As next the APP was deployed to the Device and started. You can verify the Console output from ‘Application Output’.


Compile, Deploy and Run on iOS

Now we want to do the same for iOS.

Connect your iPhone via USB and again select the right Kit:


This time there’s no extra Dialog to select the Device – it’s on top of Kit Selection. iPhone and Debug are selected – so we can Run again.

Project compiles, deploys and runs the APP on iPhone.




Go through this Gallery Example to see most of UI and Navigation Controls in Action.

From Settings you can switch between Material, Universal and  Default.

← Back (Qt Creator – Settings)

→ Next Article (HowTo Translations (i18n))

⇐ Home (Overview / Topics)

Edited 2016-04-28:

You should have read my Qt Intro before going on.

Please open Qt Creator –> Preferences


It would take some time to explain all the settings. We’ll do this step-by-step while developing mobile APPs next weeks.

Here are some important settings you should do before start.

Set your language


Qt Creator supports many languages and by default will open using your locale.

For me developing software I got a better feeling using english for the IDE.

From Preferences -> Environment -> Interface you can set the language.

Build and Run

Please check Build and Run Settings. From my POV it’s a good idea to see what happens while a project was compiled and deployed to / run on a mobile device:


There’s also the path to your build directory, which is by default outside your projects at root of your working directory.

External Tools – Linguist

There are some important settings to open Qt Linguist directly from inside Qt Creator and HowTo update translatable Strings-

This is covered in HowTo Translations (i18n) – going on to the next sites you’ll read about.

Configure for Android


If you followed my blog you already have installed Android SDK and NDK.

Take a look at Preferences -> Android -> Android Configurations. JDK, SDK and NDK locations should point to the correct folder.

There’s also a checkbox to enable Gradle instead of Ant. Gradle is the recommended configuration.

Now we can verify if our installation and settings are correct and run a first application on a real device.

← Back (Qt Creator – Intro)

→ Next Article (First Deployment on Android / iOS)

⇐ Home (Overview / Topics)