How can I draw image and label on another image

Question

The idea is to make a shop structure like in Arrow game from KetchApp.

As I think I need to create ShopCell class, add objects of this class to Table, then add this Table to ScrollPane(so I can scroll my shop). But not really sure how to implement this.

The main problem for me is to create ShopCell class. It seems reasonable to start this way:

public class ShopCell extends ImageButton {

But how can I draw a Texture (item image) and Label (price) on another Texture (background)?

Answer 1

You can also use A Group class. Like that

Group grp=new Group();
grp.addActor(baseImage);        // your background image
grp.addActor(Label) ;           // your Label 
grp.addActor(image);           // your 2nd image(item image)

Answer 2

You could try and extend an Actor with what you need instead of using the ones supplied in LibGdx.

This example below(not tested) should give you an idea of what's needed.

private class ShopCell extends Actor{
    public String text = "Item"; // item text
    private TextureRegion image; // image to show
    private BitmapFont font; // font used for text


    public ShopCell (TextureRegion reg, String itemText, BitmapFont fnt){
        image = reg;
        text = itemText;
        font = fnt;
    }
    @Override
    public void draw(Batch batch, float parentAlpha) {
        super.draw(batch, parentAlpha);
        // draw image in center of actor
        batch.draw(image, getX(), getY(), getOriginX(), getOriginY(),
                getWidth(), getHeight(), getScaleX(), getScaleY(), getRotation());
        // draw text below image
        font.draw(batch, text, getX(), getY() - 10);
    }
}

As this extends Actor it reacts like all other actors so can respond to clicks like a button.