QT/QML Material ProgressBar with rounded corners

Question

I wanted to have the Material style ProgressBar component, but with some modifications to make it's height adjustable. So far so good, I had the result I wanted.

So I just copied this code inside MyPb.qml to use it as a component:

import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4

T.ProgressBar {
    id: control
    property real radius: 3

    contentItem: ProgressBarImpl {
        implicitHeight: control.height

        scale: control.mirrored ? -1 : 1
        color: control.Material.accentColor
        progress: control.position
        indeterminate: control.visible && control.indeterminate
    }

    background: Rectangle {
        implicitWidth: control.width
        implicitHeight: control.height
        radius: control.radius

        color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
    }
}

Which gives this result for the sake of example:

With the code:

Rectangle {
    width: 600
    height: 300
    color: "black"

    MyPb {
        anchors.centerIn: parent
        id: prg
        width: 100
        height: 20
        indeterminate: false
        radius: 5
        visible: true
        value: 0.5
    }
}

Because ProgressBarImpl doesn't really support radius, the rounded corners are "buried" under the opaque progress rectangle as can be seen on the picture (left of progress bar).

Now, the reason I'm not making my own progress bar is that I want the "indeterminate" animation as well. So I thought it would be much simpler to reuse the Qt implementation than starting making my own animations.

So I wonder if there would be a way to have the Material progress bar, but apply to it some kind of treatment to get rounded corners both with indeterminate = false/true.

Any help would be appreciated!

What version of Qt are you using? I have many. Sometimes the specific version is really important, and sometimes it's not, but I'd rather start with the right one just in case. :) — sitting-duck
@AshleyTharp I'm using QT 5.11, but frankly any more recent version would do for me (if for instance it worked with 5.12 I'd be glad to switch) — Yannick
Try setting the padding property of ProgressBar to other than zero and as contentItem use Rectangle and set its radius to 3. I implemented the one you desired last week but I don't have it with me now. — xeco

tistolz tistolz · Accepted Answer · 2019-11-26T09:41:08

See the following post in the Qt forum: https://forum.qt.io/topic/91649/make-a-round-progress-bar/7

The progress bar proposed there consists of the following components:

a rounded Rectangle for the "trough" of the progress bar
an Item that acts as a rectangular clip path
a rounded Rectangle inside that Item, used as the coloured bar

Adapted to your question, I get the following code as a proof-of-concept:

import QtQuick 2.9

Rectangle {
    property int percentage: 40
    id: root
    width: 400
    height: 100
    radius: height / 2
    color: "#333"

    Item {
        id: cliprect
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width * parent.percentage / 100
        clip: true

        Rectangle {
            width: root.width                        
            height: root.height 
            radius: height / 2
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            color: "#e33"
        }
    }
}

It should be easy to move that into a template / make it compatible with the Material properties.

QT/QML Material ProgressBar with rounded corners

2 Answers