libGDX TextButton image resize

Question

in libGDX, I have a TextButtonStyle defined like this:

TextButtonStyle style = new TextButtonStyle();
style.font = header;
style.up = Resources.guiSkin.getDrawable("buttonUp");
style.down = Resources.guiSkin.getDrawable("buttonDown");

My TextButton is defined like this:

TextButton textButton = new TextButton("text",style);

I add the TextButton to a table like this:

table.add(playButton);

The table is configured to: (I have tested with and without this configuration and nothing changes)

setFillParent(true);

The problem I am having is that the TextButtonStyle's textures, style.up and style.down, resize to the text of the button. For example, if I write "t" as the text, the style.up and style.down textures will resize themselves to surround only the "t", rather than staying at their native image size.

In this image, different lengths of text show different sizes of buttons, though they are all the same texture. Also, as you can see, the ends of the text do not fit as desired inside the button, for the text extends from one end to the other, starting at the beginning and ending at the end, when really I would like it to start at just after the beginning and end just before the end. Also, the text is at the bottom portion of the image, which just looks awkward. Overall, the whole thing just looks awkward and I am wondering whether or not there is a way to fix this.

My thoughts are that since I am using a very small image as the button texture (something like 34x11 pixels), the button always resizes the image. If the image was greater than the size needed to house the text, it would not resize. However, I am using a pixelly themed button, and the easiest way to do this is by using a small image, so is there any way to get around this resize?

Any help would be greatly appreciated.

Answer 1

Try setting a width of your table cell:

table.add(playButton).width(100);

Instead of:

table.add(playButton);

This should solve the width problem with your background image.