Drawing Overlapping Images in Libgdx with a Table

Question

Basically, I'm trying to draw an empty health bar as an image, and then the actual health bar on top of it as another image so that I can just shorten the actual health bar when I need to update it. This is what I have so far:

    TextureAtlas HUDatlas = new TextureAtlas(Gdx.files.internal("data/ui/HUDPack/textures.pack"));

    emptyPlayerHealthBar = new Image(HUDatlas.findRegion("empty-health-bar"));
    playerHealthBar = new Image(HUDatlas.findRegion("health-bar"));

    //Creating the table
    table = new Table(skin);
    table.debug();
    table.setBounds(0, 0, Gdx.graphics.getWidth(), 50);
    table.left();
    table.top();
    table.add(playerHealthBar);
    table.add(emptyPlayerHealthBar);
    stage.addActor(table);

But this draws them side-by-side. How do I draw it so that the images are overlapping (empty-health-bar on the bottom and health-bar on top)?

Answer 1

I used this code to place a diamond over a box:

Image boxImage = new Image(Assets.instance.gifts.box);
Image diamondImage = new Image(Assets.instance.gifts.diamond);
Stack diamondBox = new Stack();
diamondBox.addActor(boxImage);
diamondBox.addActor(diamondImage);
tbl.add(diamondBox).width(20).height(20);
tbl.row();