Libgdx Table Components is not shown correctly

Question

Hello everybody I am trying to display some images using Table in Libgdx but it is not showing them correctly and I can't find way to fix that when I use table.bottom it shows them down but when I use table.center it shows them lower and when I choose top, left or right it shows nothing : here is my code to format the table :

public class MenuIcons {
    public Viewport viewport;
    public Stage stage;
    public boolean upPressed;
    public boolean leftPressed;
    public boolean rightPressed;
    public boolean levellock1,levellock2;
    public Image lock1;
    public Image lock2;

    public OrthographicCamera camera;
    public Table table;

    //Constructor.
    public MenuIcons(SpriteBatch spriteBatch) {
        camera = new OrthographicCamera();
        viewport = new FitViewport(400, 208, camera);
        stage = new Stage(viewport, spriteBatch);
        Gdx.input.setInputProcessor(stage);
        initalizeTable();


    }
    public void draw() {
        stage.draw();
    }

    public void resize(int width, int height) {
        viewport.update(width, height);
    }
    public void initalizeTable()
    {
        //Buttons with images.
        lock1 = new Image(new Texture("levellock.png"));
        lock1.setSize(25, 25);
        lock1.addListener(new InputListener() {
            @Override
            public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
                levellock1 = true;
                return true;
            }

            @Override
            public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
                levellock1 = false;
            }
        });
        lock2 = new Image(new Texture("levellock.png"));
        lock2.setSize(25, 25);
        lock2.addListener(new InputListener() {
            @Override
            public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
                levellock2 = true;
                return true;
            }

            @Override
            public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
                levellock2 = false;
            }
        });
        //Table with buttons.
        table = new Table();
        table.bottom; //Align to the left bottom.
        table.add();
        table.add();
        table.add();
        table.add(lock1).size(lock1.getWidth(), lock1.getHeight());
        table.add(lock2).size(lock2.getWidth(), lock2.getHeight());



        stage.addActor(table);
    }

    public boolean isLevellock1() {
        return levellock1;
    }

    public boolean isLevellock2() {
        return levellock2;
    }

}

Here is the image when I use Table.bottom:

Here is the image when I use Table.center:

Answer 1

I recommend reading through the info and examples here: https://github.com/libgdx/libgdx/wiki/Table

This line wont even work?: table.bottom;

Try this table.left().bottom(); instead of table.bottom;

Or better yet you can align individual items when you add them, something like this:

table.add(lock1).width(lock1.getWidth()).height(lock1.getHeight()).left().bottom();

Note: Why do you use a blank table.add(); over and over? Shouldn't you be using table.row() instead?

---

Edit for comment:

You need to create a row or space for your item to fit into rather than using table.add();. You are causing yourself all sorts of issues.

Before you go any further you need to add this table.setDebug(true); just after table = new Table(); so you can see what you are doing.

Now try this:

    table = new Table();
    table.setDebug(true);
    table.top().left();
    table.add(lock1).width(lock1.getWidth()).height(lock1.getHeight()).left().top();
    table.row();
    table.row();
    table.add(lock2).width(lock2.getWidth()).height(lock2.getHeight()).left().bottom();

Now that you can see the debug lines you can see where you are going wrong. Add a blank label in between table.row(); and use .expand(); so that it fills the space something like this:

    table.row();
    table.add(myBlankLabel).expandY();
    table.row();