Progressbar - How can I change the content item color of an indeterminate progres bar

jeanmilost

My issue is very simple. On a qml interface using the Qt Quick Controls 2.14 I have this code:

ProgressBar
{
    id: progressBar
    x: 250
    width: 275
    height: 4
    anchors.top: parent.top
    anchors.topMargin: 322
    anchors.horizontalCenter: parent.horizontalCenter
    indeterminate: true
    smooth: true

    background: Rectangle
    {
        anchors.fill: parent
        color: "#5a516e"
    }
}

Which gives this marquee progress bar:

But I need this one:

I spent my afternoon to find how to achieve that, without success, because no color property is available. And overriding the contentItem property seems to not provide a solution in my case, unless I want to rewrite the whole indeterminate state manually.

So can someone explain me how to just change the color of my progress bar content?

Markkyboy

I'm tired, it's late, my eyes are crusty, but try the following;

Create a file called 'qtquickcontrols2.conf', populate it with the following text and place it directly into your project folder;

[Controls]
Style=Material

[Universal]
Theme=
Accent=
Foreground=
Background=


[Material]
Theme=
Accent=
Variant=
Primary=
Foreground=
Background=

[Fusion]
Palette\Window=
Palette\WindowText=

While in your project folder, you need to append the 'qml.qrc' file with the following line;

<file>qtquickcontrols2.conf</file>

Then, basically, you need to add only one line to your existing code, as follows;

        Material.accent: Material.Purple

My complete code with the above line added into the code;

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12

Window {
    visible: true
    width: 640; height: 480
    color: "grey"
    title: qsTr("Colour progress bar")

    ProgressBar {
        id: progressBar
        x: 250; width: 475; height: 44
        anchors {
            top: parent.top
            topMargin: 322
            horizontalCenter: parent.horizontalCenter
        }
        indeterminate: true; smooth: true

        Material.accent: Material.Purple

        background: Rectangle {
            color: "black"
            radius: 3
        }
    }
}

Jkimmy

Try setting the palette.dark color (https://doc.qt.io/qt-5/qml-palette.html).

Markkyboy

I'm tired, it's late, my eyes are crusty, but try the following;

Create a file called 'qtquickcontrols2.conf', populate it with the following text and place it directly into your project folder;

[Controls]
Style=Material

[Universal]
Theme=
Accent=
Foreground=
Background=


[Material]
Theme=
Accent=
Variant=
Primary=
Foreground=
Background=

[Fusion]
Palette\Window=
Palette\WindowText=

While in your project folder, you need to append the 'qml.qrc' file with the following line;

<file>qtquickcontrols2.conf</file>

Then, basically, you need to add only one line to your existing code, as follows;

        Material.accent: Material.Purple

My complete code with the above line added into the code;

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12

Window {
    visible: true
    width: 640; height: 480
    color: "grey"
    title: qsTr("Colour progress bar")

    ProgressBar {
        id: progressBar
        x: 250; width: 475; height: 44
        anchors {
            top: parent.top
            topMargin: 322
            horizontalCenter: parent.horizontalCenter
        }
        indeterminate: true; smooth: true

        Material.accent: Material.Purple

        background: Rectangle {
            color: "black"
            radius: 3
        }
    }
}

jeanmilost

@Jkimmy said in Progressbar - How can I change the content item color of an indeterminate progres bar:

Try setting the palette.dark color (https://doc.qt.io/qt-5/qml-palette.html).

I just tried to do that, unfortunately it doesn't work, or I didn't understood how to achieve that. The ProgressBar component contains effectively a palette property, but trying to change the palette.dark property causes a "this property does not exists" error.

I also tried to write a .conf file and to change the color value, but nothing happened.

Can you please explain how I may change this color?

jeanmilost

@Markkyboy Thank you very much, it works!

Markkyboy

@jeanmilost said in Progressbar - How can I change the content item color of an indeterminate progres bar:

@Markkyboy Thank you very much, it works!

You're welcome!

Jkimmy

import QtQuick 2.14
import QtQuick.Controls 2.14

ApplicationWindow {
    visible: true

    ProgressBar {
        indeterminate: true
        palette.dark: "blue"
        anchors.centerIn: parent
    }
}

You tried this? It works for me... Weird.

Markkyboy

@Jkimmy said in Progressbar - How can I change the content item color of an indeterminate progres bar:

import QtQuick 2.14
import QtQuick.Controls 2.14

ApplicationWindow {
visible: true
ProgressBar {
    indeterminate: true
    palette.dark: "blue"
    anchors.centerIn: parent
}
}

huh, this works for me too and is a much simpler approach than mine. Although, I notice 'palette' is underlined with a warning saying "palette" does not have members. (M17) but the code compiles anyway! +1

I am now able to set my import statements to versions 2.14 but previously I got an error and would set them back to versions 2.12. I also note that I usually use 'Window' not 'ApplicationWindow', maybe that is the difference?, but how to get rid of the ' "palette" does not have members(M17) ' warning would be nice.

Ah, looks like I have answered my own query, see here regarding 'palette' and 'ApplicationWindow'; https://doc.qt.io/qt-5/qml-qtquick-controls2-control.html#palette-prop

jeanmilost

For info I found also another alternative:

...
import QtQuick.Controls 2.12
import QtQuick.Controls.Material.impl 2.12
...

ProgressBar
{
    ...
    id: pbProgress

    contentItem: ProgressBarImpl
    {
        implicitHeight: pbProgress.height
        anchors.fill: parent
        anchors.margins: 0
        scale: pbProgress.mirrored ? -1 : 1
        progress: pbProgress.position
        indeterminate: pbProgress.visible && pbProgress.indeterminate
        color: "#5014ad"
    }
    ...
}