Click here to Skip to main content
13,701,966 members
Click here to Skip to main content
Add your own
alternative version

Stats

5.2K views
116 downloads
Posted 20 Feb 2017
Licenced CPOL

An Easy Cross-Platform Floating Action Menu using Qt/QML

, 20 Feb 2017
Rate this:
Please Sign up or sign in to vote.
An easy to use C++/Qt/Qml Floating Action Menu providing the ability to add Floating Actions Menus to a Qt/Qml cross-platform project.

Introduction

I have created an easy to use  C++/Qt/Qml Floating Action Menu, 'fam' component, which provides the ability to add Floating Actions Menus to a Qt/Qml cross-platform project. Floating Actions Menus  were introduced in  Material Design. When using this component in a Qt project, one or more Floating Actions Menus can be added. Each menu can contain zero or more action buttons. These are a screenshot of an Android app and a WinRt (Universal) app with multiple Floating Action Menus.

 

 

 

 

 

 

 

 

Background

The platform Qt has been developed for 20+ years, remember Trolltech. Qt is a C++ cross-platform application framework that gives Qt developers the ability to build native applications on mobile, embedded, and desktop devices. Qt is used across multiple industries including, industrial automation systems, enterprise applications, medical, aerospace and defense, oil and gas, entertainment, in-vehicle infotainment, TV and set-top boxes, mobile and consumer devices.  They have created a robust declarative language called QML If you are unfamiliar with Qt/Qml, I have blog entry at  http://26apps.blogspot.com/2017/01/getting-started-with-qt.html.

Using the code

The source code is included with this article and also can be found here on GitHub. In the source code, the Floating Action Menu is named 'fam'.   In addition to the 'fam' component, there are 2 example projects included. This  Floating Actions Menu can be added to your application easily.  The following is a description on how to add the FloatingActionMenu to a C++/Qt project.

  • In Qt Creator, select project type, then select Next. Name the project and select Next. Set the minimum Qt project to version 5.8,  and select Next.  Select the "kit",  i.e. platforms, to create. You can include any / all platforms that you are able to build.  Since I am developing on a Windows system and also have Android Studio installed, I selected Android, Windows desktop, and Windows RT(Store apps). Verify the new app builds and runs successfully.

 

  • Now it's time to add the 'fam' component to the project.  Copy the 'fam' folder into the project folder. Add the 'fam' component by selecting the project's menu item "Add Exisiting Directory..." as shown here.  

 

 

 

 

 

  • Be sure the project Headers and Sources include the 'fam' files and that  Resources' prefix is named 'fam'. You also need to update your project file as shown.

 

 

  • Changes to main.cpp are needed to include FloatingActionsMenu support: include the required headers and initialize the FloatingActions as shown below. You can also refer to the sample apps. Once again, verify the app builds and runs successfully.

 

 

 

  • Now you are ready to add FloatingActionsMenus to the UI.  First import the 'fam' component.into the Qml. Next, add the FloatingActionsMenus signals as you see here.

 

 

  • To add a FloatingActionsMenus without actions buttons, add the following to the Qml file. Also, add a line to support for the button selection, See below.  Run the app.  The FloatingActionsMenus displays at the bottom right position in the app window which is default location of FloatingActionsMenu.  

 

 

  • The code complete feature of Qt Creator assists with the properties available for the FloatingActionsMenus.  In addition to the properties inherited from the Qml Item, the other available properties are described in fam/floatingactionmenu.hpp.

 

 

 

 

 

  • An example of a more complete FloatingActionsMenu is below.  It illustrates how the Action Menu's labels can be hidden by setting the width  to zero and how the FloatingActionsMenu icon can be assigned.  The FloatingActionsMenu buttons can be defined in the Qml using the ListModel.

 

 

 

 

 

 

  • The Action Button properties' are described in floatingactionbutton.hpp.

 

 

 

  • Next, we will add a C++ FloatingActionsMenu. From either example project, copy the files floatingactionsbottomright.cpp, floatingactionsbottomright.hpp, edit.png, add.png, and delete.png, into your project. Note FloatingActionsBottomRight is derived from FloatingActions. Then add C++ files to  the qmake (.pro) file and the image files to the resource collection file (.qrc) file.  Update main.cpp to include FloatingActionsBottomRight support as shown below. In the source file, floatingactionsbottomright.cpp, it may be necessary to update the references to the .png menu button images url's. 

 

 

 

 

 

  • In the Qml file, add the menu as shown. Verify the new app builds and runs successfully.

 

 

 

As you have seen, this Cross-platform Floating Action Menu usage is similar to the other Qml components.

Points of Interest

By running the two examples, you can quickly learn how easy it is to add FloatingActionsMenus to your Qt/Qml cross-platform applications.

The source code is included with this article and also can be found here on GitHub.

History

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

PatGulotta
Technical Lead Independent Consultant
United States United States
A successful information technology professional with a passion for software development who through research, innovation, and applying best engineering practices consistently exceeds the client's desired expectations. Researching mobile technologies, designing and developing cross-platform Android/Windows/iOS apps using C#/Xamarin, and C++/Qt/QML technologies. These apps implement various technologies including RESTful JSON web services, sync, storage, maps, location, and Android API.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionProblemas al implementar el FloatingActionMenu Pin
Jose Vela16-Aug-17 15:34
memberJose Vela16-Aug-17 15:34 
QuestionNo he logrado implementar las librerias Pin
Jose Vela16-Aug-17 15:35
memberJose Vela16-Aug-17 15:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04-2016 | 2.8.180906.1 | Last Updated 21 Feb 2017
Article Copyright 2017 by PatGulotta
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid