title: How to keep the same form of a Qt Quick application after resizing window
body: <p>The problem is that after I build the app on low-resolution Android devices the screen doesn't look compatible. There is not enough spaces for some pages of application. For instance text inputs overflow the screen, some pages have half view images. I would like the application must keep its form even though I resize it to the minimal screen. There are examples in Qt Software like Gallery sample which can be scalable. But I couldn't find what I missed.</p>
  
  <p>Here is part of my application:</p>
  
  <pre><code>import QtQuick 2.0
  import QtQuick.Controls 2.0
  import QtQuick.Controls.Material 2.0
  import QtQuick.Controls.Universal 2.0
  import Fluid.Controls 1.0
  
  Flickable {
      id:optionsPage
      anchors {
          left: parent.left
          top: parent.top
          bottom: parent.bottom
          margins: 5
      }
      width: parent.width
      clip: true
      contentHeight: Math.max(optionsColumn.implicitHeight, height)
      ScrollBar.vertical: ScrollBar {}
      z: 2
      Material.background: "white"
      Material.elevation: 1
      Universal.background: Universal.accent
  Column{
      anchors.horizontalCenter: parent.horizontalCenter
      id:optionsColumn
      spacing: 40
      anchors.fill : parent
      anchors.topMargin    : 15
      anchors.bottomMargin : 15
      anchors.leftMargin :15
      anchors.rightMargin  : 15
  TextField {
      anchors.horizontalCenter: parent.horizontalCenter
      id:abg_to3
      anchors.margins: 1
      Text {
          color: "#002aff"
          anchors.right: abg_to3.left
          text: "(AB): "
          font.pointSize: 15
      }
  }
  TextField {
      anchors.horizontalCenter: parent.horizontalCenter
      id:beta_to3
      anchors.margins: 1
  
      Text {
          color: "#002aff"
          anchors.right: beta_to3.left
          text: "Beta: "
          font.pointSize: 15
      }
  }
  Row{
      anchors.horizontalCenter: parent.horizontalCenter
      spacing:50
      Button {
          id:hesapla_to3
          text: "Calculate"
      }
      Button {
          id:sil_to3
          text: "Delete"
      }
  }
  Column{
      anchors.horizontalCenter: parent.horizontalCenter
      spacing: 50
      TextField {
          anchors.horizontalCenter: parent.horizontalCenter
          id:bcg_to3
          anchors.margins: 1
  
      Text {
          color: "#002aff"
          anchors.right: bcg_to3.left
          text: "(BC): "
          font.pointSize: 15
      }
  }
      Rectangle{
          id:reco
          height:geri.height
          width:geri.width
          anchors.horizontalCenter: parent.horizontalCenter
          Image {
              id:geri
              source:"../images/third.png"
          }
        }
    }
  }
  }
  </code></pre>
  
  <p>This is normal app.
  <a href="https://i.stack.imgur.com/Iyc4c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iyc4c.png" alt="enter image description here"></a></p>
  
  <p>This is after resizing the window.</p>
  
  <p><a href="https://i.stack.imgur.com/M3smI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M3smI.png" alt="enter image description here"></a></p>