Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Mobile and Embedded
  4. QML on android does not fill the entire screen

QML on android does not fill the entire screen

Scheduled Pinned Locked Moved Unsolved Mobile and Embedded
32 Posts 6 Posters 5.0k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    tubbadu
    wrote on last edited by
    #1

    I'm trying to write android apps in QML, so I followed the official guides, but I have this problem:
    with this simple code:

    import QtQuick
    import QtQuick.Controls
    import QtQuick.Layouts
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("hello world")
    
        Rectangle{
            color: "red"
            anchors.fill: parent
        }
    }
    
    

    I expected my entire screen to be covered by the application (except of course the bottom buttons and the top statusbar) but instead this is the result:

    alt text

    why is there that white line at the bottom? how can I cover it?
    changing Window height and width or unspecifying those attributes doesn't change the result

    thanks in advance!

    1 Reply Last reply
    0
    • TomZT Offline
      TomZT Offline
      TomZ
      wrote on last edited by
      #2

      I can confirm this on one of my phones. An annoying white background, while the palette doesn't have any white in it.
      My other Android phones with the exact same binary do not have this issue.

      I'm thinking this is a bug in Qt.

      T 1 Reply Last reply
      0
      • TomZT TomZ

        I can confirm this on one of my phones. An annoying white background, while the palette doesn't have any white in it.
        My other Android phones with the exact same binary do not have this issue.

        I'm thinking this is a bug in Qt.

        T Offline
        T Offline
        tubbadu
        wrote on last edited by
        #3

        @TomZ so this bug is device-dependent? may it be a wrong setting in AndroidManifest.xml that may mess up with some specific devices, perhaps with unusual screen size etc?

        1 Reply Last reply
        0
        • TomZT Offline
          TomZT Offline
          TomZ
          wrote on last edited by TomZ
          #4

          Its a good question where it comes from. The actual resolution is quite different, but things like the aspect ratio is identical between the phones.
          I'm not sure how a full screen image would not be full-screen..

          Here the screenshots, notice he similarity with your screenshot. ps. this uses a ApplicationWindow QML for top-level.

          See album at https://imgur.com/a/GEO5aay

          1 Reply Last reply
          0
          • T Offline
            T Offline
            tubbadu
            wrote on last edited by
            #5

            That's really strange, I don't really know how to resolve or workaround this bug

            1 Reply Last reply
            0
            • JoeCFDJ Offline
              JoeCFDJ Offline
              JoeCFD
              wrote on last edited by
              #6

              @tubbadu said in QML on android does not fill the entire screen:

              import QtQuick
              import QtQuick.Controls
              import QtQuick.Layouts

              Window {
              width: 640
              height: 480
              visible: true
              title: qsTr("hello world")

              Rectangle{
                  color: "red"
                  anchors.fill: parent
              }
              

              }
              can you try the following? My app has not border.

              import QtQuick
              import QtQuick.Controls
              import QtQuick.Layouts
              
              Window {
                  visible: true
                  visibility: Window.FullScreen
                  title: qsTr("hello world")
              
                  Rectangle{
                      color: "red"
                      anchors.fill: parent
                  }
              }
              
              T 1 Reply Last reply
              0
              • JoeCFDJ JoeCFD

                @tubbadu said in QML on android does not fill the entire screen:

                import QtQuick
                import QtQuick.Controls
                import QtQuick.Layouts

                Window {
                width: 640
                height: 480
                visible: true
                title: qsTr("hello world")

                Rectangle{
                    color: "red"
                    anchors.fill: parent
                }
                

                }
                can you try the following? My app has not border.

                import QtQuick
                import QtQuick.Controls
                import QtQuick.Layouts
                
                Window {
                    visible: true
                    visibility: Window.FullScreen
                    title: qsTr("hello world")
                
                    Rectangle{
                        color: "red"
                        anchors.fill: parent
                    }
                }
                
                T Offline
                T Offline
                tubbadu
                wrote on last edited by
                #7

                @JoeCFD said in QML on android does not fill the entire screen:

                visibility: Window.FullScreen
                

                yeah this allowed my app to be real fullscreen without showing that ugly while line! thank you!

                this btw hides the system buttons and the top notification bar, which I'd like to see in my application. Until I'll find a fix I'll use this workaround, thanks you very much!

                JoeCFDJ 2 Replies Last reply
                0
                • T tubbadu

                  @JoeCFD said in QML on android does not fill the entire screen:

                  visibility: Window.FullScreen
                  

                  yeah this allowed my app to be real fullscreen without showing that ugly while line! thank you!

                  this btw hides the system buttons and the top notification bar, which I'd like to see in my application. Until I'll find a fix I'll use this workaround, thanks you very much!

                  JoeCFDJ Offline
                  JoeCFDJ Offline
                  JoeCFD
                  wrote on last edited by
                  #8

                  @tubbadu for that you may try:

                  Window {
                  width: Screen.width
                  height: Screen.height
                  }
                  

                  but remove visibility: Window.FullScreen

                  T 1 Reply Last reply
                  0
                  • JoeCFDJ JoeCFD

                    @tubbadu for that you may try:

                    Window {
                    width: Screen.width
                    height: Screen.height
                    }
                    

                    but remove visibility: Window.FullScreen

                    T Offline
                    T Offline
                    tubbadu
                    wrote on last edited by
                    #9

                    @JoeCFD sadly this didn't work :(
                    Window's height and width attributes seems to have no effect at all in android application, I can set them to 1 or 1000000 or do not set them at all, but nothing changes, always that white line

                    JoeCFDJ 1 Reply Last reply
                    0
                    • T tubbadu

                      @JoeCFD sadly this didn't work :(
                      Window's height and width attributes seems to have no effect at all in android application, I can set them to 1 or 1000000 or do not set them at all, but nothing changes, always that white line

                      JoeCFDJ Offline
                      JoeCFDJ Offline
                      JoeCFD
                      wrote on last edited by
                      #10

                      @tubbadu sorry. I did it long ago and sort of forgot it wile I did not need it. Try

                      Window {
                      minimumWidth: Screen.width
                      minimumHeight: Screen.height
                      }
                      

                      if it does not work, add

                      Window {
                      minimumWidth: Screen.width
                      minimumHeight: Screen.height
                      maximumWidth: Screen.width
                      maximumHeight: Screen.height
                      }
                      
                      T 1 Reply Last reply
                      0
                      • JoeCFDJ JoeCFD

                        @tubbadu sorry. I did it long ago and sort of forgot it wile I did not need it. Try

                        Window {
                        minimumWidth: Screen.width
                        minimumHeight: Screen.height
                        }
                        

                        if it does not work, add

                        Window {
                        minimumWidth: Screen.width
                        minimumHeight: Screen.height
                        maximumWidth: Screen.width
                        maximumHeight: Screen.height
                        }
                        
                        T Offline
                        T Offline
                        tubbadu
                        wrote on last edited by
                        #11

                        @JoeCFD nothing to do... always that awful white line :(

                        thanks for your efforts, I really appreciate!

                        JoeCFDJ 1 Reply Last reply
                        0
                        • T tubbadu

                          @JoeCFD nothing to do... always that awful white line :(

                          thanks for your efforts, I really appreciate!

                          JoeCFDJ Offline
                          JoeCFDJ Offline
                          JoeCFD
                          wrote on last edited by
                          #12

                          @tubbadu Just tested my app. I can see the bottom, but not the top bar. However, I can not see the white line.

                          ApplicationWindow {
                          minimumWidth: Screen.width
                          minimumHeight: Screen.height
                          }
                          

                          Replace Window with ApplicationWindow

                          T 1 Reply Last reply
                          0
                          • JoeCFDJ JoeCFD

                            @tubbadu Just tested my app. I can see the bottom, but not the top bar. However, I can not see the white line.

                            ApplicationWindow {
                            minimumWidth: Screen.width
                            minimumHeight: Screen.height
                            }
                            

                            Replace Window with ApplicationWindow

                            T Offline
                            T Offline
                            tubbadu
                            wrote on last edited by
                            #13

                            @JoeCFD said in QML on android does not fill the entire screen:

                            ApplicationWindow

                            still nothing...

                            JoeCFDJ 1 Reply Last reply
                            0
                            • T tubbadu

                              @JoeCFD said in QML on android does not fill the entire screen:

                              ApplicationWindow

                              still nothing...

                              JoeCFDJ Offline
                              JoeCFDJ Offline
                              JoeCFD
                              wrote on last edited by JoeCFD
                              #14

                              @tubbadu what are your qt version and android version?
                              Mine is Qt 5.15.2 and Android 12

                              T 1 Reply Last reply
                              0
                              • JoeCFDJ JoeCFD

                                @tubbadu what are your qt version and android version?
                                Mine is Qt 5.15.2 and Android 12

                                T Offline
                                T Offline
                                tubbadu
                                wrote on last edited by
                                #15

                                @JoeCFD I'm using Qt 6.2 in android 10, I'll try to compile it in Qt 5 and see what will happen

                                JoeCFDJ 1 Reply Last reply
                                0
                                • T tubbadu

                                  @JoeCFD I'm using Qt 6.2 in android 10, I'll try to compile it in Qt 5 and see what will happen

                                  JoeCFDJ Offline
                                  JoeCFDJ Offline
                                  JoeCFD
                                  wrote on last edited by
                                  #16

                                  @tubbadu Maybe the latest Qt6.4 is better.

                                  1 Reply Last reply
                                  0
                                  • TomZT Offline
                                    TomZT Offline
                                    TomZ
                                    wrote on last edited by
                                    #17

                                    I found a 3rd phone that has an even taller white line.

                                    The reference to Screen.width etc did give me an idea.
                                    I created a big empty app and just a label with those numbers printed in the center.

                                    The fun result is that I got the low-res number. Not the actual number. (360 x 780 instead of 720x1560).
                                    And I got the exact same number on both phones, including the one with the white.

                                    So, next step. Show the size of my big empty app. It gives me 360x706 on the phone where I do not have a white bar.
                                    The one with the white bar gives me 360x686.

                                    So, concluding, the "Screen" part is irrelevant here as that is the 'fullscreen' size. Additionally, this is a problem that looks like it can not be solved from QML as we simply don't get the full graphics area to draw on...
                                    So, lets try a simple QtGui-only app. No QML. Just a QWindow. Darn, no clue how to draw on that. Ok, QWidget it is. And, voila. same problem there...

                                    This is not a QML issue. I'm 90% certain this is a bug in Qt (QWindow, or more likely some Android specific thing code or plugin).

                                    Reported; https://bugreports.qt.io/browse/QTBUG-109268

                                    JoeCFDJ T 2 Replies Last reply
                                    1
                                    • TomZT TomZ

                                      I found a 3rd phone that has an even taller white line.

                                      The reference to Screen.width etc did give me an idea.
                                      I created a big empty app and just a label with those numbers printed in the center.

                                      The fun result is that I got the low-res number. Not the actual number. (360 x 780 instead of 720x1560).
                                      And I got the exact same number on both phones, including the one with the white.

                                      So, next step. Show the size of my big empty app. It gives me 360x706 on the phone where I do not have a white bar.
                                      The one with the white bar gives me 360x686.

                                      So, concluding, the "Screen" part is irrelevant here as that is the 'fullscreen' size. Additionally, this is a problem that looks like it can not be solved from QML as we simply don't get the full graphics area to draw on...
                                      So, lets try a simple QtGui-only app. No QML. Just a QWindow. Darn, no clue how to draw on that. Ok, QWidget it is. And, voila. same problem there...

                                      This is not a QML issue. I'm 90% certain this is a bug in Qt (QWindow, or more likely some Android specific thing code or plugin).

                                      Reported; https://bugreports.qt.io/browse/QTBUG-109268

                                      JoeCFDJ Offline
                                      JoeCFDJ Offline
                                      JoeCFD
                                      wrote on last edited by
                                      #18

                                      @TomZ Good tests! One way to work around this is to get display size from Java code and resize qml window to that size.

                                      TomZT 1 Reply Last reply
                                      0
                                      • T tubbadu

                                        @JoeCFD said in QML on android does not fill the entire screen:

                                        visibility: Window.FullScreen
                                        

                                        yeah this allowed my app to be real fullscreen without showing that ugly while line! thank you!

                                        this btw hides the system buttons and the top notification bar, which I'd like to see in my application. Until I'll find a fix I'll use this workaround, thanks you very much!

                                        JoeCFDJ Offline
                                        JoeCFDJ Offline
                                        JoeCFD
                                        wrote on last edited by
                                        #19

                                        @tubbadu swipe the top or bottom part of your app and you will be able to see top or bottom bar.

                                        1 Reply Last reply
                                        0
                                        • JoeCFDJ JoeCFD

                                          @TomZ Good tests! One way to work around this is to get display size from Java code and resize qml window to that size.

                                          TomZT Offline
                                          TomZT Offline
                                          TomZ
                                          wrote on last edited by
                                          #20

                                          @JoeCFD said in QML on android does not fill the entire screen:

                                          One way to work around this is to get display size from Java code and resize qml window to that size.

                                          Sounds like something that should be added to Qt.

                                          1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved