Drawable Button with Text Button feature

Been playing with Drawable Button, just wish it could also have text on top of it like the Text Button. It seems like a lot of work was done in Text Button to automagically adjust the size of the text to fit.

Has a Drawable Button with a text “surface” been implemented in the Juce world? If not, I’m wondering what experience users would suggest as the best approach.

A Drawable Button can have text below it, major just inheriting from that class an moving the text higher up would work, at least for small text strings. The text probably wouldn’t move with a press of the button, but that might be OK.

Another option is to start with the Text Button and rewrite the button drawing part, leaving the text implementation.

And of course the most important question, what approach would be easiest?

My first attempt was to build a composite button using a label appearing over the drawable button. A problem
is that the label blocks clicks from reaching the button. Took another look at the inheritance chain and saw my wrong assumption.

Drawable Button inherits from Button which already has a text String, I wrongly assumed that TextButton was the first implementation
of text within a button.

It’s just that ButtonStyle only has ImageAboveTextLabel when I’d like something like TextLabelFrontsImage as a choice.

The actual drawing of the text for the ImageAboveTextLabel style seems straightforward, and maybe all I need to do
is just change the y of where the text is drawn from getHeight() - textH - 1 to (getHeight() - textH - 1)/2

And maybe getHeight needs to be recalculated too, more like the ImageFitted style.


The text is being drawn behind (before) the drawable image is being drawn.

For any other Juce noobs, there are apparently two passes at painting a component. The first paint is the parent, which would be
underneath the children which are painted later. Guess what the gods gave us?

virtual void Component::paintOverChildren ( Graphics & g )

It’s working well

1 Like

im trying to do the same, but im more noob !!


could you explain a bit more or give me a example of this. where do you change the y of the label ?

where and how should i use Component::paintOverChildren (Graphics & g) ?


thanks !





If you did want to use something like a Label, but didn't want it to intercept mouse clicks, you could use Component::setInterceptsMouseClicks().