1 Table Cell with Same Width as Multiple Others Beneath It in LibGDX

Question

I am just looking for a clear answer to a problem that I have been having while using LibGDX. I have been working on an Android game in LibGDX and have come across the problem of creating the UI layout. I want one button to have the same width as a few others located beneath it.Something just like this rough plan. The edges are the boundries of the screen.

Sorry about the link this is my first question. I have tried to work with different cell widths, expanding, and filling on the X axis with little success as the bottom cells move to the end of the cell on the top.

table.add(settingsButton).width(Value.percentWidth(0.5f, table));

The problem I have been having.

I would just appreciate a little help tackling this problem as I am relatively new to LibGDX.

Answer 1

You can do in this way :

// w and h according to resource size (In my casee button width is 297 pixel)
float w=1000;
float h=600;

stage=new Stage(new StretchViewport(w,h));

Skin skin=new Skin(Gdx.files.internal("skin/glassy-ui.json"));

Table table=new Table();
table.setFillParent(true);
table.defaults().pad(10);
stage.addActor(table);

table.add(new TextButton("PLAY",skin)).colspan(3);
table.row().padTop(5);
table.add(new TextButton("SHOP",skin));
table.add(new TextButton("SELECT",skin));
table.add(new TextButton("SETTINGS",skin));
table.row().padTop(10);

 stage.setDebugAll(true);
 Gdx.input.setInputProcessor(stage);

And the output is :