Few months ago, I started working on the menus for Mr. Tiddles and very quickly found the amazing
ImageTextButton that comes with libgdx. It is basically exactly what I needed: a button composed of an image and a label.
The default configuration is image on the left and text on the right which worked perfectly for the main menu. However, due to space/position, for the end game screen, I needed a button with the image on top and text below.
Since I don't recall finding the solution documented, here it is below. Hopefully it will save you several hours when you are in need of a vertial image text button, or an image text button with some funky layout configuration.
// Creates a button with image on top and label below ImageTextButton shareButton = new ImageTextButton("share", shareButtonStyle); shareButton.clearChildren(); shareButton.add(shareButton.getImage()).row(); shareButton.add(shareButton.getLabel());
As you can probably guess, the 'magic' is in
clearChildren() as you are now able to re-add the elements of the button in whatever configuration you need. When you want to create a new row for the next elements, simply use
row() and they will appear under the previous items.
Merry Christmas and happy button making :)