BusyIndicator custom colour

[Bob64]

I know that QML is quite flexible in terms of customisation possibilities, but it seems to me that it's also pretty poor in many ways.

I wanted to customise the colour of the "indicator" part of the BusyIndicator for better contrast with the background I have applied. However, the only way that can be achieved is to provide a custom contentItem. In this case, the contentItem pretty much is the bulk of the BusyIndicator implementation. So, it's necessary to provide a new one just to get a different colour!

Am I missing anything? It seems ridiculous.

[GrecKo]

@Bob64 If you are using the Basic Style for your BusyIndicator, it uses the palette.dark color, you can change it like so:

BusyIndicator{
    palette.dark: "pink"
}

You can see it in the code here : https://github.dev/qt/qtdeclarative/blob/1baa7fc3e7956773e6da6d062bc0f1c84a5ec3f3/src/quickcontrols/basic/BusyIndicator.qml

[Marko Stanke]

@Bob64 You can use Material. After importing it and choosing a theme (optional), all you have to do is

import QtQuick.Controls.Material

BusyIndicator{
        Material.accent: "blue"
    }

[Bob64]

@Marko-Stanke Unfortunately, that does not seem to work. It tells me that BusyIndicator is not a type. Is it possible to use individual components from a style without running that style on an application-wide basis? I have tried switching styles in the past and the UI went haywire, possibly because I have so much customisation.

I find the whole topic of styles and theming in QML to be quite confusing. Official documentation is very sparse. I asked a question on this forum a few weeks ago about where I could find more information and there were no replies.

[mzimmers]

@Bob64 a couple things:

1. In addition to what @Marko-Stanke wrote, you also have to use QQuickStyle::setStyle() to change your style.
2. If Creator is telling you that BusyIndicator isn't a type, you probably didn't import QtQuick.Controls.
3. yeah, styles are something of a black box in Qt-land (at least compared to most other things). I can tell you from recent experience that the Material 3 style is still a bit buggy. But don't blame Qt; blame Google.

EDIT:

You might find this helpful: customizing BusyIndicator

[Bob64]

@mzimmers Thanks.

I can import "normal" QtQuick.Controls and access BusyIndicator. It was just when I switched to the QtQuick.Controls.Material import as suggested that it stopped working.

I didn't do QQuickStyle::setStyle(). I thought if you set the application style, all controls are automatically picked up from the style without the need of an explicit .Material import or whatever? As I say, I am largely baffled by styles!

Thanks for the customisation link. I will probably follow the example there. I had in fact seen that and, in a way, it was what prompted my initial post. It involves pretty much swapping out the guts of the implementation, which is actually a C++ implementation if you look in the source, for a QML approximation that is inferior in appearance - all for the sake of changing a colour!

[GrecKo]

@Bob64 If you are using the Basic Style for your BusyIndicator, it uses the palette.dark color, you can change it like so:

BusyIndicator{
    palette.dark: "pink"
}

You can see it in the code here : https://github.dev/qt/qtdeclarative/blob/1baa7fc3e7956773e6da6d062bc0f1c84a5ec3f3/src/quickcontrols/basic/BusyIndicator.qml

[Bob64]

@GrecKo thanks. That looks a bit better but I don't think it is available in 5.9.6, which I am stuck on for the time being. Still useful information though as, fingers crossed, we should finally be transitioning to 5.15 very soon.

[GrecKo]

@Bob64 An other option would be to use the Colorize Graphical Effects meanwhile.

[jhayar]

import Qt5Compat.GraphicalEffects
import QtQuick.Controls
BusyIndicator{
layer.enabled: true
layer.effect:ColorOverlay{
antialiasing: true
color: "#D8D8D8" //change it to your prefer color
}
}