How to set background color or image on a Table?

Question

I'm making an RTS game and I want to have a similar UI to Ages of Empires with the UI at the bottom. I have difficulties setting the background of the Table that holds the specific elements.

I tried a lot of things, like:

setBackground() with Color
setBackground() with an image from the skin
using a custom solution found here: Libgdx | Scene2d | Set background color of table?

but nothing seems to work. I think the problem is that I try to apply the background color to the back-most table that holds other tables. I can set color for the front tables, but not for the main, back one.

Here is where I draw the UI:

        skin = new Skin(Gdx.files.internal("core/assets/skinComposerExport/uiskin.json"));
        stage =         new Stage(new ScreenViewport());
        mainTable =     new Table(skin);
        unitInfoTable = new Table(skin);
        unitSpecTable = new Table(skin);

        className =     new Label("Placeholder scnm", skin);
        ...
        abilityCD =     new Label("Placeholder acdn", skin);

        mainTable.setPosition(Gdx.graphics.getWidth() / 2.0f, 0);
        mainTable.center().bottom();
        mainTable.setBackground("UI_background");


        addLabelsToTable(unitInfoTable, className, hitPoints, mana, dmg, range);

        addLabelsToTable(unitSpecTable, abilityName, abilityMana, abilityDmg, abilityRange, abilityCD);

        mainTable.add(unitInfoTable).padRight(20);
        mainTable.add(unitSpecTable);


        stage.addActor(mainTable);

I want the whole bottom of the screen to be white (about 200px tall and fill the whole x axis) and draw elements on it, but I can not set the background color.

score 3 · Accepted Answer · answered Apr 17 '19 at 05:28

You can give your table a size so your stage knows how to render it correctly. (Or use setFillParent(true) on your outer table). Typically, I create a root table that is the stage's size, then I add additional scene2d elements to that root table, aligning as needed.

Here is a simple example using ShadeUI

@Override
public void create() {
    stage = new Stage(new ScreenViewport());
    batch = new SpriteBatch();
    skin = new Skin(Gdx.files.internal("shadeui/uiskin.json"));

    // create a root table, sized to our stage, and add it to the stage
    Table root = new Table();
    root.setBackground(skin.getDrawable("dialogRed"));
    root.setSize(stage.getWidth(), stage.getHeight());
    stage.addActor(root);

    // now create our menu, bottom-aligned, filled to width, and add it to root
    Table menu = new Table();
    menu.setBackground(skin.getDrawable("dialogDim"));
    root.add(menu).expand().bottom().fillX().height(50);

    // add additional labels to the menu
    menu.defaults().expandX().center().uniformX().uniformX();
    menu.add(new Label("HP", skin));
    menu.add(new Label("MP", skin));
    menu.add(new Label("My Name", skin));
    menu.add(new Label("My Class", skin));
}

@Override
public void render() {
    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    batch.begin();
    stage.draw();
    batch.end();
}

And here is how it looks when I run it:

Thank you very much! I was able to do it by specifying the table size. — Kr3Ep, Apr 17 '19 at 07:20

How to set background color or image on a Table?

1 Answers1