Changing image colour programatically in QML

BikashRDas

I am using:
Qt 5.9.4

I am working on some image icons. Depending on the state, the image colour needs to be changed accordingly.
For example:
Not selected state:

Selected state:

Note: Above images are for demo purpose only. These are not the images I am using in my application.

I have the image icon files for "not selected" state for my application.

My question:
Is it possible to dynamically change the image colour to another (keeping the alpha values unchanged)? In the above example suppose if I have the image for not selected state, can I dynamically change the colour in the image using QML coding to achieve selected state image?

mnesarco

Hi @BikashRDas , why not using icon fonts? I am using icon fonts now exclusivelly for all icons in QML, they are powerful, scalable, easy, and you can do anything that you can do with text to your icons.

I create all my icons in SVG using Inkscape, and import other icons from Free Internet libraries like bootstrap-icons. Then I create a font, add it to my App and thats it, All icons are available to be used anywhere where text can be used.

Cheers,
Frank.

fcarney

I remember doing this, but cannot remember what mechanism I used. It looks like however, there are a few ways:
https://stackoverflow.com/questions/16839198/qml-change-image-color

I am not sure if all of these are avialable in 5.9 though.

fcarney

@fcarney said in Changing image colour programatically in QML:

I remember doing this

I found how we colored images on a button:

        Button {
            icon.source: "https://www.qt.io/hubfs/2016_Qt_Logo/qt_logo_green_rgb_16x16.png"
            icon.color: "transparent"
        }
        Button {
            icon.source: "https://www.qt.io/hubfs/2016_Qt_Logo/qt_logo_green_rgb_16x16.png"
            icon.color: "#77ff0000"
        }

BikashRDas

Thanks every one for your reply. @fcarney The ColorOverlay is working fine for me. Thanks for the same.