How to make a QML app full screen on android devices

[tomy]

Hi all,

I've got a code which is shown full screen on the Desktop kit when run, but only part of it is shown when run by the Arm7 kit on Android devices as shown below:

Here's part of main.qml:

import QtQuick 2.12
import QtQuick.Window 2.11
import QtQuick.Controls 2.4

Window {
    id: window
    visible: true
    visibility: Window.Maximized 
    title: qsTr("The PingPong Game - A QML Game")
    color: "gray"

    Rectangle {
        id: table
        width: window.width / 1.15; height: window.height / 1.15
        x: window.x + 100; y: 10;
        border.width: 10
        border.color: "white"
        color: "royalblue"
         ...

I also tried to use visibility: Window.FullScreen instead of visibility: Window.Maximized, but no changes on the Android device!

What is the problem please? And how to make it cover all the Android device's screen , please?

[KazuoAsano]

@tomy

I feel correct this operation as far as looking your code.

X-property of "Rectangle" is +100 offset from X-Property of "Window".
If you want to view "Rectangle" QML Object in center, you can do with the following correction code.

  Rectangle {
      id: table
      width: window.width / 1.15; height: window.height / 1.15

-     x: window.x + 100; y: 10;
+     y: 10;
+     anchors.horizontalCenter: parent.horizontalCenter

...

[tomy]

@KazuoAsano

Do you mean that I should use this code instead of the other?

import QtQuick 2.12
import QtQuick.Window 2.11
import QtQuick.Controls 2.4

Window {
    id: window
    visible: true
   visibility: Window.FullScreen
    title: qsTr("The PingPong Game - A QML Game")
    color: "gray"

    Rectangle {
        id: table
        width: window.width / 1.15; height: window.height / 1.15
        y: 10;
        anchors.horizontalCenter: parent.horizontalCenter
        border.width: 10
        border.color: "white"
        color: "royalblue"
        ...

[KazuoAsano]

@tomy

Yes, Were you able to see blue part of all with this code?

[tomy]

@KazuoAsano

Yes. It solved the issue astonishingly! :) Thanks. (I wish I could say "thanks" in Japanese too! :) )

Few notes:
1- I think "horizontalCenter" here acts like a vertical line from the center of the window (parent) contrary to what its name suggests!

2- I wanted to remove y: 10; too, and use this: anchors.verticalCenter: parent.verticalCenter instead. But apparently parent hasn't such a feature! Why?

3- The astonishing part, as I said before, is this: How could that simple line of code solve that problem? Could you please explain this?

4- Do you use QML for making Android apps too?

[KazuoAsano]

@tomy ,

1- I think "horizontalCenter" here acts like a vertical line from the center of the window (parent) contrary to what its name suggests!

3- The astonishing part, as I said before, is this: How could that simple line of code solve that problem? Could you please explain this?

You can understand more by looking at the below documents.
I also had the same issue as you in the past.

Qt Documentation: Positioning with Anchors

2- I wanted to remove y: 10; too, and use this: anchors.verticalCenter: parent.verticalCenter instead. But apparently parent hasn't such a feature! Why?

I wrote a code that you might be helpful in gist.
Please see as below.
I think that the point of issue can be solved by using the Layout(RowLayout/ColumnLayout/GridLayout) QML Type.

https://gist.github.com/sazus/a9240f94f8cb1cdaa8a83354ce48813e

4- Do you use QML for making Android apps too?

It can also be used on Android!