Change color of QML Button

Nantunest

Hello,

I am developing a mobile application in QML and I need a rounded "Add" button.

For that I am using the QML component RoundButton which gives me a nice rounded, shadowed button, with clicking animation.

The problem is that it comes with its default gray color, which casually is the same as the background color that I am using.

So my first option was to try to use the attribute color, with no success because "color is a non-existent property" in RoundButton.

Then I googled a little and found in the docs that to customize a QML RoundButton you should follow the same method as described to customize a Button, which is to change its background attribute, so this I did:

    RoundButton {
    //...
        background: Rectangle {
            color: "blue"
        }
    }

And that returned me a not so nice, squared, no shadow, not rounded or animated blue Button.

So my question is if there is a way to change just the color (or another property) of an already stylized component.

Thank you.

mranger90

Try setting the background radius to the roundButton radius.
This gets pretty close:

   RoundButton {
        id: myRoundButton
        text: "\u2713" // Unicode Character 'CHECK MARK'
        background: Rectangle {
            radius: myRoundButton.radius
            color: "blue"
        }

        onClicked: mainWindow.title = "Clicked!!"
    }

Leon_2001

All Qt Quick Controls 2 come with a selection of Styles, which define the look and feel of the controls.

So for example you can use the Material Style (for example by setting the environment variably to material, there are also other ways to set this)

int main(int argc, char* argv[]) {

  qputenv("QT_QUICK_CONTROLS_STYLE", "material");
}

For every Qml Element you can now specify some attributes as you desire

import QtQuick.Controls.Material 2.4

...
RoundButton {
  width: 50 
  heigth: 50 
  anchors: { 
   ...
  }

  Material.background: Material.Blue
}

Now you have a fancy button with a blue background and a dark blue background when clicked. If you don't like the pre-defined colors, you can use the color function

Material.background: Material.color(Material.blue, Shade100)

Be aware that all children of your element will get this background color too if you don't set another color explicit. So if you want all buttons and all panes ... to be blue just write this line into your ApplicationWindow.

Please take a lot at:
https://doc.qt.io/qt-5.11/qtquickcontrols2-material.html
for more about Material Style

Here is an Overview of all available styles
https://doc.qt.io/qt-5.11/qtquickcontrols2-styles.html

If the attributes are not enough customization .... for example if you want a blue background, but when clicked red, then you can still modify the background attribute as mranger90 told you.
Of course you override the default background as you noticed, but you can look it up here:
https://github.com/qt/qtquickcontrols2/blob/5.11/src/imports/controls/material/RoundButton.qml
(this would be the material implementation of the RoundButton template)

Please mark the Thread as solved, if this is a solution for your problem.

Nantunest

@Leon_2001 Thank you for your answer, that is exactly what I was looking for.

itfanr

                        Button{
                            text: "aaa"
                            Layout.maximumWidth: 100
                            Layout.leftMargin: 50
                            palette {
                                  button: "#aaddaa"
                              }                       
                        }

Amir Reza Sadeghi

Hi there!

dear @Leon_2001, As you've said, by setting the Material.background and other properties of Material attached property in the root Item of the application, All the children components, like buttons and other controls, should use the same background color. but this does not work and I have to set the Material.background for each Item that I am using in my application. I could not find out what causes this to happen while in the documents, it is stated that by setting the background for the root Item, it propagates for all children items. could you clarify this for me?