Centering a textbutton in a table libGDX

Question

I have a few Tables spread across a Stage, now I have a problem. In one table, all the TextButtons are centered, while in a different one they aren't, like this:

Table 1           Table 2
XXXtextXXX        text
XXmoretxXX        moretext
XXXXtxXXXX        MoreTextHere

The problem is that as much as I try I can't seem to center them. In the first table I have only textbuttons in each row, while in the second one I have two rows with 3 textbuttons, which the rest are only one text button. this is the code:

        settingNames.bottom().left();
    settingNames.add(new TextButton("Resolution:", style));
    settingNames.row();
    settingNames.add(new TextButton("VSync:", style));
    settingNames.row();
    settingNames.add(new TextButton("FullScreen:", style));
    settingNames.row();
    settingNames.add(new TextButton("Borderless:", style));
    settingNames.row();
    settingNames.add(new TextButton("Force FPS:", style));
    settingNames.row();
    settingNames.add(new TextButton("Target FPS:", style));
    settingNames.setBounds(0, 0, Gdx.graphics.getWidth(),
            Gdx.graphics.getHeight());
    settingNames.debug();


    resPrevious = new TextButton("<", style);
    resText = new DynamicLabel(resHandler.getResolution(), labelStyleSkin);
    resNext = new TextButton(">", style);
    vsyncToggle = new TextButton("Off", style);
    fullscreenToggle = new TextButton("Off", style);
    borderlessToggle = new TextButton("Off", style);
    forceFPSToggle = new TextButton("Off", style);
    targetFPSPrevious = new TextButton("<", style);
    targetFPSText = new DynamicLabel("60", labelStyleSkin);
    targetFPSNext = new TextButton(">", style);
    fullscreenToggle
            .setColor(fullscreenToggle.getColor().r,
                    fullscreenToggle.getColor().g,
                    fullscreenToggle.getColor().b, 0); ---> Used this line to check how the textbutton looks.
    changeOptions.center().bottom();
    changeOptions.add(resPrevious);
    changeOptions.add(resText);
    changeOptions.add(resNext);
    changeOptions.row();
    changeOptions.add(vsyncToggle).fill(true, false);
    changeOptions.row();
    changeOptions.add(fullscreenToggle);
    changeOptions.row();
    changeOptions.add(borderlessToggle).fill(true, false);
    changeOptions.row();
    changeOptions.add(forceFPSToggle).fill(true, false);
    changeOptions.row();
    changeOptions.add(targetFPSPrevious);
    changeOptions.add(targetFPSText).center();
    changeOptions.add(targetFPSNext);
    changeOptions.setBounds(0, 0, Gdx.graphics.getWidth(),
            Gdx.graphics.getHeight());
    changeOptions.debug();

I added all the tables to a stage and display them, but can't figure what's wrong, I could really use help here...

Answer 1

On the second table, you have two rows with three columns. If you want to center your others rows with these one, you have to set the horizontal size of the cell to three columns using the colspan method.

The "center" method will only center the widget inside it's own cell.

For example, your code should be :

changeOptions.center().bottom();
changeOptions.add(resPrevious);
changeOptions.add(resText);
changeOptions.add(resNext);
changeOptions.row();
changeOptions.add(vsyncToggle).colspan(3).center();
changeOptions.row();
changeOptions.add(fullscreenToggle).colspan(3).center();
changeOptions.row();
changeOptions.add(borderlessToggle).colspan(3).center();
changeOptions.row();
changeOptions.add(targetFPSPrevious);
changeOptions.add(targetFPSText);
changeOptions.add(targetFPSNext);

Currently this what you are doing :

# Cell 1 # Cell 2 # Cell 3 #
# Cell 1 #
# Cell 1 #
# Cell 1 #
# Cell 1 # Cell 2 # Cell 3 #

With the above code, you should obtain :

# Cell 1 # Cell 2 # Cell 3 #
#          Cell 1          #
#          Cell 1          #
#          Cell 1          #
# Cell 1 # Cell 2 # Cell 3 #

And that's why on the first table the problem doesn't occure cause you only have one cell per rows.