Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to make a QML app full screen on android devices



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

    0_1546032388113_$REQYZVH.PNG

    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?


  • Qt Champions 2018

    @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
    
    ...
    


  • @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"
            ...
    

  • Qt Champions 2018

    @tomy

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



  • @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?


  • Qt Champions 2018

    @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!


Log in to reply