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.
  • raven-worxR raven-worx

    @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 last edited by Violet Giraffe
    #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.

    p3c0P raven-worxR 2 Replies Last reply
    0
    • V Violet Giraffe

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

      p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on 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
      2
      • V Violet Giraffe

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

        raven-worxR Offline
        raven-worxR Offline
        raven-worx
        Moderators
        wrote on 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
        • p3c0P p3c0

          @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 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
          • p3c0P Offline
            p3c0P Offline
            p3c0
            Moderators
            wrote on last edited by
            #7

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

            157

            1 Reply Last reply
            1
            • GTDevG Offline
              GTDevG Offline
              GTDev
              wrote on last edited by GTDev
              #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 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.9 https://t1p.de/ekkeChecklist
                QMake --> CMake https://t1p.de/ekkeCMakeMobileApps

                1 Reply Last reply
                4
                • E Offline
                  E Offline
                  Eeli K
                  wrote on 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
                  1
                  • E Eeli K

                    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 last edited by
                    #11

                    @Eeli-K
                    Interesting, thank you!

                    1 Reply Last reply
                    0
                    • E Offline
                      E Offline
                      Eeli K
                      wrote on 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