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. Material design Android dialogs in QML?
Forum Updated to NodeBB v4.3 + New Features

Material design Android dialogs in QML?

Scheduled Pinned Locked Moved Solved Mobile and Embedded
12 Posts 6 Posters 6.7k Views 3 Watching
  • 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.
  • V Offline
    V Offline
    Violet Giraffe
    wrote on 9 Oct 2016, 16:27 last edited by
    #1

    Can I easily create native-looking Android dialogs like these in QML? Right now I have no idea how:

    alt text

    alt text

    R 1 Reply Last reply 9 Oct 2016, 17:37
    0
    • V Violet Giraffe
      9 Oct 2016, 16:27

      Can I easily create native-looking Android dialogs like these in QML? Right now I have no idea how:

      alt text

      alt text

      R Offline
      R Offline
      raven-worx
      Moderators
      wrote on 9 Oct 2016, 17:37 last edited by
      #2

      @Violet-Giraffe
      i no it's not possible (directly).
      But i am currently working on a plugin for most elements in material design (including such dialogs). Additionally i will add wrappers + QML elements for Google, Amazon and Facebook APIs.
      But there is alot of work left to confirm Googles UX design and metrics.

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      V 1 Reply Last reply 9 Oct 2016, 18:03
      2
      • R raven-worx
        9 Oct 2016, 17:37

        @Violet-Giraffe
        i no it's not possible (directly).
        But i am currently working on a plugin for most elements in material design (including such dialogs). Additionally i will add wrappers + QML elements for Google, Amazon and Facebook APIs.
        But there is alot of work left to confirm Googles UX design and metrics.

        V Offline
        V Offline
        Violet Giraffe
        wrote on 9 Oct 2016, 18:03 last edited by Violet Giraffe 10 Sept 2016, 18:05
        #3

        @raven-worx
        That's interesting. Will it be available under one of the permissive licenses? What's the current status of the project?
        I'm trying to finish my app without using too many native Android Java UI, and not even because I don't want to, but because it conflicts with Qt whenever I'm trying something non-trivial.

        P R 2 Replies Last reply 10 Oct 2016, 05:58
        0
        • V Violet Giraffe
          9 Oct 2016, 18:03

          @raven-worx
          That's interesting. Will it be available under one of the permissive licenses? What's the current status of the project?
          I'm trying to finish my app without using too many native Android Java UI, and not even because I don't want to, but because it conflicts with Qt whenever I'm trying something non-trivial.

          P Offline
          P Offline
          p3c0
          Moderators
          wrote on 10 Oct 2016, 05:58 last edited by
          #4

          @Violet-Giraffe As per Qt 5.8 features list Dialog and several other types will be introduced in Qt Quick Controls 2 and which supports Material style so I think what you trying will be available in Qt 5.8

          157

          V 1 Reply Last reply 10 Oct 2016, 07:42
          2
          • V Violet Giraffe
            9 Oct 2016, 18:03

            @raven-worx
            That's interesting. Will it be available under one of the permissive licenses? What's the current status of the project?
            I'm trying to finish my app without using too many native Android Java UI, and not even because I don't want to, but because it conflicts with Qt whenever I'm trying something non-trivial.

            R Offline
            R Offline
            raven-worx
            Moderators
            wrote on 10 Oct 2016, 06:03 last edited by
            #5

            @Violet-Giraffe said in Material design Android dialogs in QML?:

            Will it be available under one of the permissive licenses? What's the current status of the project?

            i am not sure yet. The project is still in an very early stage.

            Also i just read about QtQuickControls 2.1 (Qt 5.8) MessageDialog

            --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
            If you have a question please use the forum so others can benefit from the solution in the future

            1 Reply Last reply
            2
            • P p3c0
              10 Oct 2016, 05:58

              @Violet-Giraffe As per Qt 5.8 features list Dialog and several other types will be introduced in Qt Quick Controls 2 and which supports Material style so I think what you trying will be available in Qt 5.8

              V Offline
              V Offline
              Violet Giraffe
              wrote on 10 Oct 2016, 07:42 last edited by
              #6

              @p3c0
              I was just reading the blog. Very good news indeed. I might as well postpone the development until prebuilt 5.8 Beta is available.

              1 Reply Last reply
              0
              • P Offline
                P Offline
                p3c0
                Moderators
                wrote on 10 Oct 2016, 07:51 last edited by
                #7

                @Violet-Giraffe Good idea. Hope there are no other blockers except these.

                157

                1 Reply Last reply
                1
                • G Offline
                  G Offline
                  GTDev
                  wrote on 3 Nov 2016, 11:28 last edited by GTDev 11 Mar 2016, 11:31
                  #8

                  Hi!

                  You can also have a look at the NativeDialog features by V-Play, which can show native device dialogs for iOS or Android.

                  It is also possible to create completely custom QML-based Dialogs by combining Qt Quick and V-Play Apps components.

                  For example like this:

                  import VPlayApps 1.0
                  import QtQuick 2.0
                  
                  App {
                  
                    // use native dialog
                    AppButton {
                      id: button1
                      text: "Open Native Dialog"
                      onClicked: NativeDialog.inputText(
                                   "title", "description", "placeholder", "default value",
                                   function(accepted, text) {
                                     if(accepted)
                                       console.log("Entered Text: "+text)
                                     else
                                       console.log("Dialog was cancelled")
                                   });
                    }
                  
                    // use custom dialog
                    AppButton {
                      anchors.top: button1.bottom
                      text: "Open Custom Dialog"
                      onClicked: customDialog.visible = true
                    }
                  
                    // custom dialog item
                    Rectangle {
                      id: customDialog
                      color: Qt.rgba(0,0,0,0.5)
                      anchors.fill: parent // fill whole screen with background
                      visible: false
                  
                      // handle dismiss
                      function dismiss(accepted, text) {
                        visible = false
                        if(accepted)
                          console.log("Entered Text: "+text)
                        else
                          console.log("Dialog was cancelled")
                      }
                  
                      // catch touch input and close dialog if clicked outside
                      MouseArea {
                        anchors.fill: parent
                        onClicked: customDialog.dismiss(false, textField.text)
                      }
                  
                      // the actual dialog
                      Rectangle {
                        id: dialogRect
                        color: "white"
                        width: dp(250)
                        height: content.y + content.height + buttons.height
                        anchors.centerIn: parent
                  
                        // dialog content
                        Column {
                          id: content
                          spacing: dp(10)
                          x: spacing
                          y: spacing
                          width: parent.width - 2 * spacing
                          anchors.horizontalCenter: parent.horizontalCenter
                  
                          AppText {
                            width: parent.width
                            text: "Your Name"
                            font.pixelSize: sp(16)
                          }
                  
                          AppTextField {
                            id: textField
                            width: parent.width
                            anchors.horizontalCenter: parent.horizontalCenter
                            placeholderText: "Enter Name"
                          }
                        }
                  
                        // ok / cancel buttons
                        Row {
                          id: buttons
                          anchors.right: parent.right
                          anchors.bottom: parent.bottom
                  
                          AppButton {
                            text: "Cancel"
                            flat: true
                            onClicked: customDialog.dismiss(false, textField.text)
                          }
                  
                          AppButton {
                            text: "Ok"
                            flat: true
                            onClicked: customDialog.dismiss(true, textField.text)
                          }
                        }
                      }
                    } // Custom Dialog
                  }
                  

                  The used comonents in the custom dialog (AppButton, AppTextField) also support native styling for iOs and Android.

                  Cheers,
                  GT

                  Senior Developer at Felgo - https://felgo.com/qt

                  Develop mobile Apps for iOS & Android with Qt
                  Felgo is an official Qt Technology Partner

                  1 Reply Last reply
                  0
                  • ekkescornerE Offline
                    ekkescornerE Offline
                    ekkescorner
                    Qt Champions 2016
                    wrote on 3 Nov 2016, 11:43 last edited by
                    #9

                    you can do Dialogs using Popup. see screenshot below
                    screenshot is from my example app at github: https://github.com/ekke/tab_pages_x
                    also blog here: https://appbus.wordpress.com/2016/06/07/tab-pages-app-tabbar/

                    Qt Quick Controls 2 are easy to customize

                    alt text

                    ekke ... Qt Champion 2016 | 2024 ... mobile business apps
                    5.15 --> 6.8 https://t1p.de/ekkeChecklist
                    QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

                    1 Reply Last reply
                    4
                    • E Offline
                      E Offline
                      Eeli K
                      wrote on 3 Nov 2016, 21:37 last edited by
                      #10

                      Why do people say you can't do it with 5.7 Controls 2? You can import QtQuick.Dialogs 1.2, create a Dialog, implement the contentItem with 2.0 controls:

                      Dialog {
                          contentItem: MyDialogForm {
                          }
                      }
                      
                      //MyDialogForm.qml:
                      import QtQuick.Controls.Material 2.0
                      Pane {
                          Material.theme: dark
                          Label{} //etc.
                      }
                      
                      V 1 Reply Last reply 4 Nov 2016, 07:35
                      1
                      • E Eeli K
                        3 Nov 2016, 21:37

                        Why do people say you can't do it with 5.7 Controls 2? You can import QtQuick.Dialogs 1.2, create a Dialog, implement the contentItem with 2.0 controls:

                        Dialog {
                            contentItem: MyDialogForm {
                            }
                        }
                        
                        //MyDialogForm.qml:
                        import QtQuick.Controls.Material 2.0
                        Pane {
                            Material.theme: dark
                            Label{} //etc.
                        }
                        
                        V Offline
                        V Offline
                        Violet Giraffe
                        wrote on 4 Nov 2016, 07:35 last edited by
                        #11

                        @Eeli-K
                        Interesting, thank you!

                        1 Reply Last reply
                        0
                        • E Offline
                          E Offline
                          Eeli K
                          wrote on 4 Nov 2016, 07:58 last edited by
                          #12

                          But I have to say it may not fit all your needs. Dialogs 1.2 Dialog may be implemented differently on different platforms, it's not a normal Item. For example, it may not be easy (possible?) to change the automatically selected location, which is centered on top of the main window. 5.8 Controls 2 dialog will be based on Popup and you can handle it like any other item, which may be a benefit. But you can implement you dialogs now with old Dialog and move the content item later to a new Dialog. Or just use a Popup and later change it to Dialog.

                          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