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. Android: How to move views above keyboard when it’s opened (Qml)

Android: How to move views above keyboard when it’s opened (Qml)

Scheduled Pinned Locked Moved Solved Mobile and Embedded
8 Posts 4 Posters 1.7k 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
    track
    wrote on 10 Aug 2022, 16:56 last edited by track 8 Oct 2022, 16:58
    #1

    I have a Qml ApplicationWindow with Rectangles(Forms),Listmodel delegates, and many other Items. The problem I have is that the Android Key board on android device, which appears when filling Forms blocks some input fields and buttons especially when getting responses from server because the Keyboard does not stay below the views.
    Is there a way to get the android keyboard to below the view or Applicationwindow in Qml especial when a new view appears.

    A 1 Reply Last reply 10 Aug 2022, 17:51
    0
    • T track
      10 Aug 2022, 16:56

      I have a Qml ApplicationWindow with Rectangles(Forms),Listmodel delegates, and many other Items. The problem I have is that the Android Key board on android device, which appears when filling Forms blocks some input fields and buttons especially when getting responses from server because the Keyboard does not stay below the views.
      Is there a way to get the android keyboard to below the view or Applicationwindow in Qml especial when a new view appears.

      A Offline
      A Offline
      ali-aydin
      wrote on 10 Aug 2022, 17:51 last edited by
      #2

      @track
      Hi,
      if there is not any text field or text area I think it is not possible
      because out of text object keyboard not reachable

      1 Reply Last reply
      0
      • J Offline
        J Offline
        JoeCFD
        wrote on 10 Aug 2022, 18:00 last edited by JoeCFD 8 Oct 2022, 18:00
        #3

        On Android, native keyboard is used. There could be a way in Android to do it.
        Just curious: can you move your views(whole app) up above the keyboard if it is needed?

        1 Reply Last reply
        0
        • T Offline
          T Offline
          track
          wrote on 10 Aug 2022, 22:00 last edited by
          #4

          There is a Textinput field(e.g. TextField) which causes the keyboard to popup when a cursor is available .If for example, I press submit button to send data to server, when the response comes back the keyboard does not hide which usually blocks some input fields or buttons that appear with the new view or window.
          If the keyboard could hide when the submit button is pressed or when there response comes back it could be an alternative solution. The best solution however is to have the Keyboard below the view or window . Android Studio has the functionality to move views(whole App) up above the keyboard.

          J 1 Reply Last reply 10 Aug 2022, 22:06
          0
          • T track
            10 Aug 2022, 22:00

            There is a Textinput field(e.g. TextField) which causes the keyboard to popup when a cursor is available .If for example, I press submit button to send data to server, when the response comes back the keyboard does not hide which usually blocks some input fields or buttons that appear with the new view or window.
            If the keyboard could hide when the submit button is pressed or when there response comes back it could be an alternative solution. The best solution however is to have the Keyboard below the view or window . Android Studio has the functionality to move views(whole App) up above the keyboard.

            J Offline
            J Offline
            JoeCFD
            wrote on 10 Aug 2022, 22:06 last edited by JoeCFD 8 Oct 2022, 22:06
            #5

            @track set focus of Textinput to false when the response comes back.
            also set focus of Textinput to false when the submit button is pressed. You can hide/show it at any time.

            1 Reply Last reply
            0
            • T Offline
              T Offline
              track
              wrote on 18 Aug 2022, 21:20 last edited by track
              #6

              Setting TextInput focus to false when response comes back works fine but in my case I also have to handle key input especial the back button .the focus I set to true cancels out the Textinput focus and it fails to function . Here is an example code -

              import QtQuick
              //import QtQuick.VirtualKeyboard
              import QtQuick.Controls
              import Qt.labs.platform
              import QtQuick 2.0

              Window {
              id: window
              width: 200
              height: 480
              visible: true
              title: qsTr("Hello World")

              Rectangle {
              
                  width: 250;
                  height: 400
                  color: "green"
              
                  TextEdit {
                      id:hhh
                      width: 240
                      height: 40
                       text: " "
                      font.family: "Helvetica"
                      font.pointSize: 20
                      color: "blue"
                       focus: true
                  }
              
                  MouseArea{
                      anchors.fill: parent
                      onClicked: {
                            hhh.focus= false
                           parent.color = 'red'
                      }
              
              
              
                  }
              
              
              MessageDialog
              {
                 id: noPublic
              title: "Track Gate"
              text: "move left"
              onAccepted:
              {
              
              }
              
              
              
              }
              
              MessageDialog
              {
                 id: noPublic1
              title: "Track Gate"
              text: "Pressed return"
              onAccepted:
              {
              
              }
              
              
              
              }
              
              focus: true
              
              
              Keys.onPressed: (event)=> {
                      if (event.key === Qt.Key_Left) {
                          console.log("move left");
                                          noPublic.open()
              
                          event.accepted = true;
              
                      }
                  }
                  Keys.onReturnPressed: {
                      noPublic1.open()
              
                      console.log("Pressed return");
              }
              

              }
              }

              J.HilkJ 1 Reply Last reply 19 Aug 2022, 06:42
              0
              • T track
                18 Aug 2022, 21:20

                Setting TextInput focus to false when response comes back works fine but in my case I also have to handle key input especial the back button .the focus I set to true cancels out the Textinput focus and it fails to function . Here is an example code -

                import QtQuick
                //import QtQuick.VirtualKeyboard
                import QtQuick.Controls
                import Qt.labs.platform
                import QtQuick 2.0

                Window {
                id: window
                width: 200
                height: 480
                visible: true
                title: qsTr("Hello World")

                Rectangle {
                
                    width: 250;
                    height: 400
                    color: "green"
                
                    TextEdit {
                        id:hhh
                        width: 240
                        height: 40
                         text: " "
                        font.family: "Helvetica"
                        font.pointSize: 20
                        color: "blue"
                         focus: true
                    }
                
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                              hhh.focus= false
                             parent.color = 'red'
                        }
                
                
                
                    }
                
                
                MessageDialog
                {
                   id: noPublic
                title: "Track Gate"
                text: "move left"
                onAccepted:
                {
                
                }
                
                
                
                }
                
                MessageDialog
                {
                   id: noPublic1
                title: "Track Gate"
                text: "Pressed return"
                onAccepted:
                {
                
                }
                
                
                
                }
                
                focus: true
                
                
                Keys.onPressed: (event)=> {
                        if (event.key === Qt.Key_Left) {
                            console.log("move left");
                                            noPublic.open()
                
                            event.accepted = true;
                
                        }
                    }
                    Keys.onReturnPressed: {
                        noPublic1.open()
                
                        console.log("Pressed return");
                }
                

                }
                }

                J.HilkJ Online
                J.HilkJ Online
                J.Hilk
                Moderators
                wrote on 19 Aug 2022, 06:42 last edited by
                #7

                @track you can also have a "secondary" root object, that one you can move to your hearts content:

                For Example:

                ApplicationWindow {
                    id:mainwindow
                    height: 768
                    width: 1280
                    visible: true
                
                    title: qsTr("My App")
                    color: "white"
                    minimumHeight: 768
                    minimumWidth:  1280
                    Item{
                        id: root
                        width:parent.width
                       height: parent.height
                        
                       //rest of your app content in here
                    }
                }
                

                than you can manipulate y property of root, to move it "up" when you show keyboard input


                Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                Q: What's that?
                A: It's blue light.
                Q: What does it do?
                A: It turns blue.

                1 Reply Last reply
                0
                • T Offline
                  T Offline
                  track
                  wrote on 19 Aug 2022, 19:12 last edited by
                  #8

                  Using J.Hilk and JoeCFD's last response, I am able to get the solution for my use case. When I click on the secondary root object ,the TextEdit focus is set to false and the android keyboard hides allowing the secondary root item focus to be true. The code to accomplish the above mentioned :

                  ApplicationWindow {
                  id:mainwindow
                  height: 400
                  width: 250
                  visible: true

                  title: qsTr("My App")
                  color: "white"
                  

                  // minimumHeight: 768
                  // minimumWidth: 1280
                  Item{
                  id: root
                  width:parent.width
                  height: parent.height
                  y:0
                  anchors.centerIn: parent
                  //rest of your app content in here
                  Rectangle {

                         width: 250;
                         height: 400
                         color: "green"
                         anchors.centerIn: parent
                  
                         Rectangle {
                  
                             width: 240;
                             height: 40
                             color: "yellow"
                           z:200
                          anchors.horizontalCenter: parent.horizontalCenter
                  
                         TextEdit {
                             id:hhh
                             width:parent.width
                            height: parent.height
                              text: " "
                             font.family: "Helvetica"
                             font.pointSize: 20
                             color: "blue"
                              focus: true
                         }
                          }
                         MouseArea{
                             anchors.fill: parent
                             onClicked: {
                                    hhh.focus= false
                  

                  //noPublic.open()
                  console.log("Clicked")
                  // parent.color = 'red'
                  }

                         }
                  
                  
                     MessageDialog
                     {
                        id: noPublic
                     title: "Track Gate"
                     text: "move left"
                     onAccepted:
                     {
                  
                     }
                  
                  
                  
                     }
                  
                     MessageDialog
                     {
                        id: noPublic1
                     title: "Track Gate"
                     text: "Pressed return"
                     onAccepted:
                     {
                  
                     }
                  
                  
                  
                     }
                  

                  }

                     focus: true
                  
                  
                           Keys.onPressed: (event)=> {
                                   if (event.key === Qt.Key_Left) {
                                       console.log("move left");
                                                       noPublic.open()
                  
                                       event.accepted = true;
                  
                                   }
                               }
                               Keys.onReturnPressed: {
                                   noPublic1.open()
                  
                                   console.log("Pressed return");
                           }
                  
                  }
                  

                  }

                  Thanks one more time for your quick assistance.

                  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