For this tutorial series, we will be crafting a video collection manager and player using MauiKit.

We won’t cover any QML or C++ stuff, but rather fully focus on how to use MauiKit controls.


We want to play videos, manage, and list the collection of videos available in the system: allowing to tag, copy, delete and share the files.

For this app, we will have three main views:

  1. player: for playback and queue list
  2. collection: for seeing all the system video collection, also allows to sort and filter
  3. tags: to quickly browse and organize the files by favorites videos, recent videos, or arbitrary tagged videos.


The following images sources will work as an initial design iteration for our app.

When creating the UI, we will break down the needed elements and see what Kirigami, QQC2, or MauiKit controls can do the trick.

#dailyui #057 - Video Player player videoplayer html video player html player video player html video material design daily ui material ui materialui material–dailyui-057-Video-Player

Video Player Design dribbbler dribbblers video app videoplayer video webdesign uidesign appdesign affinitydesigner madeinaffinity dailyuichallenge dailyui057 dailyui



For simplicity, we will use qmake to deploy the app on other platforms than GNU/Linux, and for GNU/Linux CMake.

In case we might need some KF5 libraries later on:

For Windows, you can make use of Craft, for macOS the Homebrew KDE repo, and Android, you can have the KDE Android docker image and extract the required library binaries.

Requirements, Tools & Deploy Environment

You will need to have Qt installed, Kirigami and MauiKit, and depending on where you are doing the deployment and where you intend to deploy the app the requirements may change, so this is a quick overview:

if you need more info, get in touch with us on telegram or leave a comment.


Depending on which distribution you use, the packages’ names will change.

For example, for an arch-based distro, these are some needed packages:

qt5-base qt5-declarative qt5-svg qt5-quickcontrols2 kio git cmake extra-cmake-modules

For Debian based, this is a complete dependency list:

ecm qtbase5-dev build-essential git gcc g++ qtdeclarative5-dev qml-module-qtquick-controls libqt5svg5-dev qtmultimedia5-dev automake cmake qtquickcontrols2-5-dev libkf5config-dev libkf5service-dev libkf5notifications-dev libkf5kiocore5 libkf5kio-dev qml-module-qtwebengine gettext extra-cmake-modules libkf5wallet-dev qtbase5-private-dev qtwebengine5-dev libkf5wallet-dev qt5-default qt5-default libqt5websockets5-dev libtag1-dev libkf5people-dev libkf5contacts-dev libkf5coreaddons-dev libgstreamer-plugins-bad1.0-dev gstreamer1.0-plugins-ugly gstreamer1.0-plugins-good

You will need to build MauiKit from source to keep up to date with the latest features:

git clone

cd mauikit; mkdir build; cd build



sudo make install

And you can use the Kirigami system-wide installation as it is.


Read the Qt guide to set up the Qt environment.

And in the source structure of our app directory, under 3rdparty, you will need to clone mauikit and kirigami sources, since it will be linked statically with the app.


Read the Qt guide to set up the Qt environment.

A recommendation is to use the Microsoft Visual compiler and Craft Qt binaries, if possible.

And in the source structure of our app directory, under 3rdparty, you will need to clone mauikit and kirigami sources, since it will be linked statically with the app.


To deploy to an Android device, you will need to have Java, JDK 8, Android NDK, and SDK and Qt binaries for Android. With Qt Creator on the kit configures options, you just set the paths to all previous requirements.

And in the source structure of our app directory, under 3rdparty, you will need to clone mauikit and kirigami sources, since it will be linked statically with the app.


You need a developer free account, and the XCode to get the IOS SDK, and to be able to deploy it to the device.

Read the QT documentation instructions on it.

And in the source structure of our app directory, under 3rdparty, you will need to clone mauikit and kirigami sources, since it will be linked statically with the app.


We will have support for Windows, Android, macOS, and GNU/Linux; therefore, we will have some other directories for the specific platform integration files.

  • src //all the sources
    • assets //images, config files, extra fonts, etc...
    • views //the user interface app views
    • models //models that will populate our views, like recent videos and tagged videos and the collection view
    • controllers //backend utils for handling tasks like remote video playing, youtube integration, subtitles handling, video playback, frames capture, and other features
  • android_files //files needed for android, like the icon assets, manifest and java sources for system integration
  • windows_files //the metadata files for creating the executable using Qt windeploy tools
  • macos_files //the icon assets and files for system integration with macOS
  • ios_files //manifest, icon assets, and native source files for system integration
  • 3rdparty //libraries and frameworks used by the app when deploying it on a platforms like Windows, IOS, Android or macOS.
    • kirigami
    • mauikit

Episode 1

You can clone the app from the repo and read the descriptions about what MauiKit is doing.

Let’s start by setting up the entry point of the app in src/main.cpp

Let’s check if MauiKit and Kirigami will be statically linked or not. For Windows, macOS, IOS, and Android, that use statically linked mauikit and kirigami we will use the sources under 3rdparty/mauikit and 3rdpart/kirigami

#include <QGuiApplication>
#include <QApplication>

#include "3rdparty/kirigami/src/kirigamiplugin.h"

#include "3rdparty/mauikit/src/mauikit.h"
#include "mauiapp.h"
#include <MauiKit/mauiapp.h>

For Android, we need to check if the app has permissions to read from external storage and if not then request it, MAUIAndroid::checkRunTimePermissions() takes a list of permissions labels, for more permissions you can refer to the Android documentation:

    QGuiApplication app(argc, argv);
    if (!MAUIAndroid::checkRunTimePermissions({"android.permission.WRITE_EXTERNAL_STORAGE"}))
        return -1;
    QApplication app(argc, argv);

We will set the app information that will get picked up by the about dialogs, like name, organization, credits, icon, and extra info like a description, donation link, and website:

MauiApp::instance()->setDescription("Video collection manager and player.");
MauiApp::instance()->setCredits ({QVariantMap({{"name", "Camilo Higuita"}, {"email", ""}, {"year", "2019-2020"}})});

For macOS, we can request to have the window controls to be drawn within the app:

#ifdef Q_OS_MACOS

Now let’s move on to the UI with src/main.qml, which is the file being loaded by the engine.

By now, this is what we have so far:

To implement the three views, we will use MauiKit control AppViews, and for each view a MauiKit Page, and we will enable CSD( client-side decorations) to achieve a more immersive UX when watching videos.

import org.kde.mauikit 1.0 as Maui
import org.kde.mauikit 1.1 as MauiLab
import QtQuick 2.10
import QtQuick.Controls 2.10
import org.kde.kirigami 2.8 as Kirigami
import QtQuick.Layouts 1.3

    id: root

    Maui.App.enableCSD: true

        id: _appViews
        anchors.fill: parent

            id: _playerView
            MauiLab.AppView.title: qsTr("Player")
            MauiLab.AppView.iconName: qsTr("quickview")

            footBar.leftContent: ToolButton

            footBar.middleContent: Slider
                Layout.fillWidth: true

            id: _collectionView
            MauiLab.AppView.title: qsTr("Collection")
            MauiLab.AppView.iconName: qsTr("folder-videos")

            id: _tagsView
            MauiLab.AppView.title: qsTr("Tags")
            MauiLab.AppView.iconName: qsTr("tag")

MauiKit will restore the window geometry on the desktop and set a default size by default for the first time, so no need to set the height or width of the ApplicationWindow explicitly, unless needed

Resulting with this:

And now, let’s organize the Player component a bit better, so we will use the following structure: PlayerView will have a Player control.

Player.qml will contain the player controls and do the playback, and the PlayerView will embed the Player and add extra functionality, like a queue list, possible dialogs, etc.

So now we have in src/views/player Player.qml and PlayerView.qml, so we will import that path in the main.qml and use it as the player app view:


import "views/player"


        id: _appViews
        anchors.fill: parent

            id: _playerView
            MauiLab.AppView.title: qsTr("Player")
            MauiLab.AppView.iconName: qsTr("quickview")
            url: "file:///home/camilo/Videos/Marlene Dumas miss interpreted-veexrm7BLxQ.mp4"


We are setting the player source URL to an arbitrary file for now.

Check the Player.qml for the simple video playback implementation, there we are using Qt built-in video player control, and some MauiKit utilities to transform the progress time to a more legible format.

So we now have this:

By using CSD and the floatingHeader and autoHideHeader, we are a bit closer to what we want:

So, what we can see in this quick first tutorial is how to use:

  • MauiKit app information,
  • AppViews control to handle the app views, and with the attached AppView properties, we can set the view title and icon.
  • MauiKit ToolBar to position elements into the left, right, or middle sides of the toolbar. (these toolbars become scrollable when the contents do not fit the available width)
  • The MauiKit Page, which by default has two MauiKit Toolbars in the header and footer named headBar and footBar, and the properties to tweak the Page toolbars behavior, like floatingHeader, floatingFooter and autohideHeader.
  • And also, we tested the CSD MauiKit implementation. Under Qt 5.14, to be able to drag the windows around, we can use the Alt key while dragging or resizing.
  • And some minor MauiKit function utilities like transform the time into a legible format

Next time we will use the MauiKit browsing views to implement the Collection view to browse the videos collection as a list with detailed information or as a grid view with thumbnails, and the backed templated model handlers, which make development quicker.

And also review integration details for mobile devices, on Android and Plasma Mobile

See you soon!

Notify of
Newest Most Voted
Inline Feedbacks
View all comments
1 year ago

Thank you for the tutorial! That’s a good starting point. Looking forward for more.

Hesam Gholami
Hesam Gholami
1 year ago

Nice toturial! Looks very interesting!

© 2017-2021 Some Rights Reserved. Made with ♥ by Nitrux Latinoamericana S.C.