How do I use Libgdx viewport for UI?

Question

I am using LibGDX to make a game for Android and I am using 2 Viewports. One for UI and one for the actual game content. My problem is I can't find a good way to scale my UI using a Viewport.

This is a picture of my UI using a FitViewport:

As you can see it adds space on the top and bottom to fit the screen, but I want my pause button to stay on the top of the screen. I tried using a StretchViewport and that worked well for the pause button, but then the joysticks were no longer circle because they were distorted.

Is there a way to make a StretchViewport that only stretches the middle? (since nothing will be in the middle I don't care about that. Should I make a custom Viewport? And if so, how would I go about that? Thank you for any help!

Answer 1

What I ended up doing was having one Viewport that was an ExtendsViewport for just the joysticks. Then I added the pause button to the screen without using a table and manually set its size to a fraction of the physical screen resolution.

This isn't a great solution because it required another Stage that didn't use a Viewport and since I had another Stage I had to use an InputMultiplexor. Please let me know if you find a better solution that uses only one Stage.

Answer 2

I currently use a ScreenViewport on the GUI scene2d Stage, and set the size of the UI elements as inches, then just multiply it by Gdx.graphics.getPpix().

This should make the UI elements consistent in size across devices, no matter the size or density of the screen.

Your GUI stage should only contain a table as well, to position the elements correctly.

Hope it helps!