LibGdx Table layout

Question

I'm trying to layout a fairly simple Table on a menu screen. Using LibGdx, Android only, with Scene2D.

I need the first three rows to fill the table width, and be centered in the row, but not stretch across the whole screen.

Then have each Checkbox evenly take up the whole row, followed by the two bottom buttons evenly kind of centered in the row.

The Table Wiki doesn't help at all for this kind of layout and I can't find any tutorials or examples on the web that would help.

I've tried using fillX(), expandX(), colspan(), but it keeps turning out the same.

X                         L a b e l                      X

X                   S  l   i   d   e   r                 X

X                         L a b e l                      X

X     Checkbox     X     Checkbox     X     Checkbox     X

X               Button        X        Button            X

I'll worry about the padding later, at the moment I'll be happy just getting it looking something like the above.

It always ends up looking like this, with the first three rows only taking up half of the table width:

XXXXXX |
XXXXXX |
XXXXXX |
XXXXXX |XXXXXX | XXXXXXX
XXXXXX | XXXXXX

UPDATE:

I tried to look at some more examples and eventually figured out how to get the formatting looking fairly good, so I think I pretty much answered my own question.

I got it working before I saw the example posted below, but that's a really nice example, and I still might use some of it.

Thanks for your replies!

This was my Xth attempt that got it to initially look okay:

baseTable.add(label).colspan(3).center();
baseTable.row();

baseTable.add(slider).colspan(3).center();
baseTable.row();

baseTable.add(label2).colspan(3).center();
baseTable.row();

baseTable.add(Checkbox1).width(135f).center();
baseTable.add(Checkbox2).width(135f).center();
baseTable.add(Checkbox3).width(135f).center();
baseTable.row();

baseTable.add(imageButton1).colspan(2).width(202f).center();
baseTable.add(imageButton2).colspan(2).width(202f).center();

Answer 1

One approach that might help is to wrap the Table in a Container.

In the example above the logical structure is

Container
  Table
    Label
    Slider
    Label
    CheckBox|CheckBox|CheckBox
  Table
    Button|Button

I set the size on the Container to constrain the Table so that it doesn't fill the entire screen.

Each row in the outer Table except for the one with the CheckBoxes have a colspan of 3 and pretty much every cell is set to fillX and/or expandX.

It's tricky to get the two buttons to center as they're part of a 2 column layout that exists inside a three column layout, that is why they are wrapped in their own Table.

The full source code for the example above (which uses the uiskin from the libGDX wiki):

package com.bornander.sandbox;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.CheckBox;
import com.badlogic.gdx.scenes.scene2d.ui.Container;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Slider;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.utils.Align;
import com.badlogic.gdx.utils.viewport.ScreenViewport;


public class SandboxGame extends ApplicationAdapter {

    private Stage stage;

    public void create() {
        stage = new Stage(new ScreenViewport());
        //stage.setDebugAll(true);

        Skin skin = new Skin(Gdx.files.internal("uiskin.json")); 
        Container<Table> tableContainer = new Container<Table>();

        float sw = Gdx.graphics.getWidth();
        float sh = Gdx.graphics.getHeight();

        float cw = sw * 0.7f;
        float ch = sh * 0.5f;

        tableContainer.setSize(cw, ch);
        tableContainer.setPosition((sw - cw) / 2.0f, (sh - ch) / 2.0f);
        tableContainer.fillX();

        Table table = new Table(skin);

        Label topLabel = new Label("A LABEL", skin);
        topLabel.setAlignment(Align.center);
        Slider slider = new Slider(0, 100, 1, false, skin);
        Label anotherLabel = new Label("ANOTHER LABEL", skin);
        anotherLabel.setAlignment(Align.center);

        CheckBox checkBoxA = new CheckBox("Checkbox Left", skin);
        CheckBox checkBoxB = new CheckBox("Checkbox Center", skin);
        CheckBox checkBoxC = new CheckBox("Checkbox Right", skin);

        Table buttonTable = new Table(skin);

        TextButton buttonA = new TextButton("LEFT", skin);
        TextButton buttonB = new TextButton("RIGHT", skin);

        table.row().colspan(3).expandX().fillX();
        table.add(topLabel).fillX();
        table.row().colspan(3).expandX().fillX();
        table.add(slider).fillX();
        table.row().colspan(3).expandX().fillX();
        table.add(anotherLabel).fillX();
        table.row().expandX().fillX();

        table.add(checkBoxA).expandX().fillX();
        table.add(checkBoxB).expandX().fillX();
        table.add(checkBoxC).expandX().fillX();
        table.row().expandX().fillX();;

        table.add(buttonTable).colspan(3);

        buttonTable.pad(16);
        buttonTable.row().fillX().expandX();
        buttonTable.add(buttonA).width(cw/3.0f);
        buttonTable.add(buttonB).width(cw/3.0f);

        tableContainer.setActor(table);
        stage.addActor(tableContainer);

        Gdx.input.setInputProcessor(stage);
    }

    @Override
    public void render() {
        Gdx.gl.glClearColor( 0, 0, 0, 0 );
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);        

        stage.act();
        stage.draw();
    }

}