Libgdx Table too small, does not fill viewport

Question

I'm trying to use a Table to create a menu with lined-up Buttons and Labels. I'm using the latest nightly builds of libgdx, which changed the Table API (amongst other things).

Here's the code in my Screen constructor:

this.mStage = new Stage();
this.mTable = new Table();
this.mTable.setFillParent(true);
this.mTable.debugTable();
this.mStage.addActor(this.mTable);

// now I add some stuff to the table
// ...

My resize function looks like this:

this.mStage.setViewport(width, height, true);
this.mTable.setFillParent(true);
this.mTable.invalidate();

My render function has the following:

System.out.println("Table size is " + 
    this.mTable.getWidth() + " by " + 
    this.mTable.getHeight());
this.mStage.draw();
Table.drawDebug();

Although my console shows the correct size:

Table size is 480.0 by 640.0

the Table size is shrink-wrapped around its children, and does not extend to the correct size of 480x640.

Any ideas?

Answer 1

Answering my own question for the benefit of others. The way I was adding widgets to the table was incorrect:

this.mTable.row();
this.mTable.add(button).fillX();

I needed to call the fillX() method of the row() :

this.mTable.row().fillX();
this.mTable.add(button);

Hope this helps someone.

Answer 2

Your incorrect version of adding widget to the table can be easily corrected by expanding a cell first using .expandX() method and then by filling that cell with a widget by calling fillX() . so your initial code:

this.mTable.row();
this.mTable.add(button).fillX();

should be corrected to the following version:

this.mTable.row();
this.mTable.add(button).expandX().fillX();

these 2 lines can be shorten to one:

this.mTable.add(button).expandX().fillX().row();

Answer 3

To add to the above answers, it may be helpful to know that you can make these setting defaults for the table like so:

this.mTable.defaults().expandX().fillX();

The settings will apply uniformly to all rows and cells.