Stage object won't center and scale to be same on every screen

Question

I have 2 questions which both seem should be easy.

First, I am working on a LibGDX game but one of my Table objects won't center

Table table = new Table();
    table.setFillParent(true);
    table.add(preview).size(preview.getWidth(), preview.getHeight()).center().padBottom(40);
    table.row();
    table.add(last).size(last.getWidth(), last.getHeight()).center().left().padLeft(250);
    table.add(next).size(next.getWidth(), next.getHeight()).center().right().padRight(250);

I tried the code above but it turns out like (I want the Level Preview centered)

---

Question 2

On my phone these images all fit perfectly. but on this phone they are smaller, How would i scale it to be the same size on every phone, is it something with FitViewPort?

Answer 1

Question #1:

Change

table.add(preview).size(preview.getWidth(), preview.getHeight()).center().padBottom(40);

to

table.add(preview).size(preview.getWidth(), preview.getHeight()).center().padBottom(40).colspan(2);

Question #2:

The FitViewport may lead to black bars, but the images scale in relation to the aspect ratio. Try using the StretchViewport instead, if you want to scale your images in relation to the phone size.

Answer 2

To get the preview Image centered, it's cell needs to span all the columns. It is unnecessary to try to size the cell to the Image if you want the image to exactly fit.

And if you want the two buttons right at the middle, make each of their cells as wide as possible and bias them toward the side of the cell that is at the middle.

So do this:

table.setFillParent(true);
table.add(preview).colSpan(2).expandX().center().padBottom(40);
table.row();
table.add(last).expandX().right();
table.add(next).expandX().left();

ScreenViewport is nice for UI stages because it results in nice crisp text. But the downside is that you need to have multiple UI asset sizes ready to load depending on the device resolution.

Alternatively you can use ExtendViewport for your UI so you only need one asset scale.

The rest of the viewport classes are junk (IMO):

• FitViewport creates black bars (your users won't like this because phone screens are too small as it is). It's OK if you're using it for the UI layer, but then you need a different viewport to apply for everything else before you draw your UI. And maybe if you're doing a cutscene where black bars are forgivable, you could temporarily use one.
• StretchViewport results in ugly deformed stretching.
• FillViewport results in part of your virtual viewport size being cropped off so you have to do all kinds of math to make sure your scene is fully visible on all devices.