# Implementing a resource bar with LibGdx

I am developing my first LibGdx game, and I would like some help understanding Scene2D/Ui.

So far I understand a "Stage" contains the various UI elements, and a "Table" contains the layout; an input processor can be assigned to buttons and stuff to define what they will do.

What I don't really understand clearly so far is how to utilise tables and skins, and if I'm doing this correctly.

So far I have a MainGameScreen class which extends Screen, and renders a Tiled map.

I want to render the UI on top of it, I have defined a Stage, a Table and a Skin, as well as a button; here are my relevant code snippets.

//declaration of stage, table, skin
public class MainGameScreen implements Screen, InputProcessor{
...
private Stage stage;
private Table table;
private Skin skin;
}

//class constructor
public MainGameScreen(final MyGame game){
...
stage = new Stage(new ScreenViewport());
table = new Table();
skin = new Skin(Gdx.files.internal("uiskin.json"));
table.setFillParent(true);
button = new TextButton("TEST BUTTON", skin, "default");
button.setWidth(200);
button.setHeight(50);

//Screen render function
public void render(float delta) {
...
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}


It works, the Tiled map gets rendered, a button appears on the bottom left.

I'd like to implement a top bar similiar to that, meaning "Menu" "Pause" buttons as well as rendering an icon + value for each resource (variable) at the top of the screen.

I understand that I'd have to use the Image widget for the icons, Label for text and Button for Menu and Pause, but I don't get how to lay them out properly using a Table and ensuring scaling.

I'd be grateful if someone could provide a simple implementation, or point me on the right direction.

To just create the top bar I would do something like this:

Image resourceImage1 = ...;
Label resourceLabel1 = ...;
...

Table table = new Table();

//Display at the top and occupy a 10th of the screen height
table.setBounds(0, screenHeight * .9, screenWidth, screenHeight *.1);
table.defaults().padRight(10); // All cells have a padding of 10px to the right


This will align all of the above elements in a single row with some space in between them. If you need to create another row use table.row();. For a quick rundown of using the table take a look at the LibGdx wiki entry on them.
As for your concern on scaling take a closer look at Viewports. I see you're already using a ScreenViewport which does not support a constant size. Perhaps a FitViewport would be more suitable for you as it keeps the aspect ratio.