Button with Text and Icon

General JUCE discussion
1

I’m currently working on making a button that has both, an icon and text. The icon will be on the left side and the text will be on the right side in a custom font. I was wondering what the best method for doing this would be?

One approach (not ideal at all) would be to create 2 buttons that are linked by some sort of state. I would make a drawable button for the icon and a textbutton for the text. I would then style the two buttons to look as if they were a single one. This by no means is ideal at all, but I believe it would get the job done.

Another approach would be to create a single drawable button that has a single drawable in it. This would consist of a drawable made from the icon image data and another drawable text. However, I could not find a way to combine these two drawables into a single drawable to put into the drawable button. How could I go about combining 2 drawables into 1?

Any other approaches for doing this would be really helpful! I believe that the second approach explained above would be better than the first, but I am not sure how to fully go about combining drawables, which is making me think the first approach may be the only way, Any help on this is appreciated!

2

You could derive your button subclass from DrawableButton, then:

  1. Override its getImageBounds() method to have your Drawables painted in the spot that you desire (on the left in your case)
  2. Override its paint() method to call the base class DrawableButton::paint() for the overall look, then paint the name of the button to the right of the rectangle returned by getImageBounds() (or wherever you want it).

I’ve said “the name of the button” assuming that could suffice in your case, but you can obviously also add a String member for the button text and set/getButtonText() in your subclass.

3 Likes