DrawableButton paints bounds with black background when toggled

I have this black background showing on the button’s bounds when I turn on the toggle state of a DrawableButton. I can’t see what I’m doing wrong.

Screenshot 2020-02-25 at 12.20.29 Screenshot 2020-02-25 at 12.20.36

Here is a minimal code example:


    This file was auto-generated!


#include "MainComponent.h"


    playButtonImage = Drawable::createFromImageData(BinaryData::button_play_svg, BinaryData::button_play_svgSize);
    pauseButtonImage = Drawable::createFromImageData(BinaryData::button_pause_svg, BinaryData::button_pause_svgSize);

    playButton.reset(new DrawableButton("playButton", DrawableButton::ButtonStyle::ImageFitted));
    playButton->setImages(playButtonImage.get(), playButtonImage.get(), playButtonImage.get(), nullptr,
                          pauseButtonImage.get(), pauseButtonImage.get(), pauseButtonImage.get(), nullptr
    setSize (600, 400);


void MainComponent::paint (Graphics& g)
    g.fillAll (Colours::blanchedalmond);


void MainComponent::resized()
    playButton->setBounds(getLocalBounds().reduced(getWidth()/4, getHeight()/4));

void MainComponent::buttonClicked (Button* buttonThatWasClicked)
    isOn = !isOn;
    playButton->setToggleState(isOn, NotificationType::dontSendNotification);

Example source with assets :
Source.zip (7.5 KB)

backgroundColourId and backgroundOnColourId are transparent ?


That solved it yes!

As a reference to others, I just added

playButton->setColour(DrawableButton::backgroundOnColourId, Colours::transparentWhite);

in the constructor.

It’s a little weird that one has to specify that for only one of the states IMHO. no?

Anyway, problem solved, thanks a lot!

N.B. if you set the colour in the lookAndFeel, it is set for all buttons that use that lookandfeel instance:

getLookAndFeel().setColour (DrawableButton::backgroundOnColourId, Colours::transparentWhite);

i also believe that it is wierd this needs a specific setting.
the problem is that this setting is not needed for the OFF colour.
I wish i found this post earlier because this problem made me waste so much time, but at least there is a solution :slight_smile: