QML - Lesson 009. Scalable interface in Qt QML Android

If we talk about Scalable interface, that is scalable interfaces for developing applications on Qt, this is the main problem is that you need to create an interface that will be read perfectly on all screens, whether computer screen or a smartphone screen.

Parameters of the GUI, such as the width and height are specified in pixels in Qt , but with the same screen resolution on your computer and on your phone (for example, 1366 x 768 pixels) get completely different results. On your computer, button size 40 by 60 pixels would be convenient, I would even say a large, and on the screen of the smartphone is already on it will be difficult to get a finger.

Therefore the development of a single application interface for multiple platforms and screens must be some way to solve the interface problem of scalability.

Scalable interface

The fundamental decision on how to create a scalable interface, is to determine the size of the elements depending on the density of pixels per millimeter or inch.

dpi - the number of pixels per inch. This feature is used much more often than the number of pixels per mm. Using this feature, you can recalculate the pixels that will be in the key of 1 to 2 centimeters, and thus create an interface application, which will look absolutely the same on all devices, under which you will lead the development. Regardless of the size of the application will display.

After recalculation of pixels you get an abstract value, which is called:

dip or dp - Density-independent Pixels . Pixel is independent of density. That will allow the interface to write applications without worrying about how many pixels is the width and height of the screen on a smartphone or tablet.

Development of a scalable interface for Android

As is known, devices running Android are many large and they all have a variety of screen resolutions, so, Google gives the following recommendation on the development of a scalable interface:

  • The interface must be created on the basis of dip (independent of the density of pixels)
  • And, in general, use the following formula to convert a dip in the number of pixels:

px = dp * (dpi / 160)

This formula takes the ratio of the density of the pixels of the target device to the pixel density devices mdpi screen, that is, medium dpi . The formula works perfectly for a 5-inch full HD screen.

If we talk specifically about Qt , then in this case it should be noted that Qt does not allow setting the interface parameters directly into the dip. It is necessary to produce the recalculating of a pixel density of dpi in pixels relative dip. That is, the reduced use of the above formula.

When developing Scalable interface to the Qt QML You can use a separate entity that will take your dip pixels and return the equivalent in the physical screen pixels, as in the code below.

pixelDenstity function returns the density of pixels per millimeter, so the resulting value we multiply by 25.4 to convert to inches. And then the function of the object receiving dip pixels already scaled back the number of physical pixels on the screen of the target device. At the same time I added a check on the pixel density is less than 120 dpi . It is necessary for normal dekstopov, such as my laptop with a diagonal of 15.6 inches and a resolution of 1366 by 768. In this case, the density is equal to 72 dpi. And if this value more and divide by 160, then the interface will be a very small size, which is not acceptable for a desktop PC. Therefore it is not produced in the dip transfer px for desktops. dip in this case is equal to px .

import QtQuick 2.0
import QtQuick.Window 2.0

Item {

    property int dpi: Screen.pixelDensity * 25.4

    function dp(x){
        if(dpi < 120) {
            return x; // For the usual computer monitor
        } else {
            return x*(dpi/160);

Conclusion. Scalable interface

As a result, the work function of the object I was able to get the following picture of your application on the screen of the smartphone Meizu m1 note with full HD screen of 5.5 "and 15.6" screen notebook

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate


Only authorized users can post comments.
Please, Log in or Sign up
How to become an author?

Contribute to the evolution of the EVILEG community.

Learn how to become a site author.

Learn it

Good day, Dear Users!!!

I am Evgenii Legotckoi, developer of EVILEG. And it is my hobby project, which helps to learn programming another programmers and developers

If the site helped you, and you want also support the development of the site, than you can donate by following ways


Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting Timeweb
May 26, 2020, 11:29 a.m.
Artem Sun-Dun-Chan

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:50points,
  • Rating points-4
May 25, 2020, 11:33 a.m.
Mitja Nagibin

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:50points,
  • Rating points-4
May 25, 2020, 5:05 a.m.

C++ - Test 001. The first program and data types

  • Result:66points,
  • Rating points-1
Last comments
May 28, 2020, 3:14 p.m.
Evgenij Legotskoj

Qt/C++ - Lesson 039. How to paint stroke in QSqlTableModel by value in the column?

Ну в моём примере, который в статье сработало так model->setData(model->index(1, 1), 7); Поскольку model->index(1, 0) - это индекс колонки id, которая скрыта, поэтому…
May 28, 2020, 3:08 p.m.
Mihail A

Qt/C++ - Lesson 039. How to paint stroke in QSqlTableModel by value in the column?

Спасибо, завтра првоерю. А model->setData(model->index(1, 0), 7); Тоже заработало?
May 28, 2020, 3:06 p.m.
Evgenij Legotskoj

Qt/C++ - Lesson 039. How to paint stroke in QSqlTableModel by value in the column?

Да, метод data всё-таки влиял, я переписал его так и заработало удаление QVariant TableModel::data(const QModelIndex &idx, int role) const{ if (role == Qt::BackgroundColorRole) {…
May 28, 2020, 2:49 p.m.
Evgenij Legotskoj

Django - Tutorial 011. Adding comments to the site based on Django

Он более функциональный и его функционал объективно лучше поддерживается Django. Из первого, что приходит на ум: Это наличие полей типа Array Поддержка полей для JSON …
May 28, 2020, 2:42 p.m.

Django - Tutorial 011. Adding comments to the site based on Django

а в чем явное преимущество postgresql над mysql?)
Now discuss on the forum
May 29, 2020, 1:55 a.m.
Igor' Poroshin

QTablwView + QSqlQueryModel скрыть пустой столбец

Да, понятно. В данном случае лучше использовать серверную процедуру (если такие поддерживаются), в которой будет проверяться наличие всех пустых строк у нужного столбца и вызываться соответ…
May 28, 2020, 6:21 p.m.
Rovshan Gurbanov

Сборка под старые версии Android

У меня SDK почти все версии есть, NDK есть версии 10, 17, 21. Но собирается приложение только с NDK v21 под Android версии 7.0 и выше Версия Qt у меня 5.14.2
May 28, 2020, 7:58 a.m.
Evgenij Legotskoj

Освобождение памяти QMainWindow::setCentralWidget

Да, соглашусь. Просто удаление происходит позже, а не сразу.
May 28, 2020, 5:43 a.m.

При подключении к git как указать пароль?

Нужно сделать ssh-keygen и потом полученый из файла код скопировать в ssh ключ в бикбакете
May 28, 2020, 1:42 a.m.


Да, проблема ушла, спасибо.
© EVILEG 2015-2020
Recommend hosting TIMEWEB