LibGDX - ImageButton - Setting Image With Background

Question

From my understanding, the ImageButton within LibGDX is a frame containing an image. Is it possible to set the background of the frame?

For example, I would like to use a Button background, and apply an Icon on top of that image.

Current Code

Skin with the background:

"com.badlogic.gdx.scenes.scene2d.ui.ImageButton$ImageButtonStyle": {
    "default": {
        "imageDown": "button-down", 
        "imageUp": "button-up"
    }
}

Creating the ImageButton:

// Getting imageButtonStyle with "default" style, as it just has the background.
ImageButton.ImageButtonStyle imageButtonStyle = skin.get( "default", ImageButton.ImageButtonStyle.class );
ImageButton button = new ImageButton( imageButtonStyle );
// Set the image on the button to something.

Background image.

Background image with icon overlayed.

Thank you for your help.

Answer 1

The trick is using the 2 different Styles available. ImageButtonStyle to set the icon attributes, but since ImageButtonStyle extends ButtonStyle, the background attributes are set in ButtonStyle. Something like:

ImageButtonStyle style = new ImageButtonStyle();
style.up           = background;
style.down         = background;
style.checked      = background;
style.imageUp      = icon_up;
style.imageDown    = icon_down;
style.imageChecked = icon_checked;
style.unpressedOffsetY = -20; // to "not" center the icon
style.unpressedOffsetX = -30; // to "not" center the icon

ImageButton heartButton = new ImageButton(style);
ImageButton envelopeButton = new ImageButton(envelopeStyle);

Something like that (for me, backround, icon_* are Drawable). But that's the basics and worked like a charm for me.