[SOLVED] Simple alignment problem with buttons - Libgdx

Newbie & Debugging Questions
#1

I have a settings window which I have buttons in it. Now , I want the buttons to be located at the center of the window but from some reason I can’t do that.

Here is my code:

toggleMusic = new ImageButton(menuSkin.getDrawable("musicon"));
		toggleSound = new ImageButton(menuSkin.getDrawable("soundon"));
        ImageButton quitSettingsButton = new ImageButton(menuSkin.getDrawable("close"));
        quitSettingsButton.addListener(new ClickListener() {
            @Override
            public void clicked(InputEvent event, float x, float y) {
                settingsWindow.remove();
            }
        });
        settingsWindow.getButtonTable().align(Align.center);
        settingsWindow.add(toggleMusic).size(100, 100).row();
        settingsWindow.add(toggleSound).size(100, 100).row();
        settingsWindow.add(quitSettingsButton).size(100, 100).row();

Here is an image of my window:

#2

Hi DavidLasry,

The window class extends table, but it also contains another table inside of it called buttonTable. So there are essentially two different tables.

Here is the source for Window.java:

By using settingsWindow.add() you add buttons directly to the settingsWindow table and by using settingsWindow.getButtonTable().align() you set the alignment of the buttonTable table.

I have never worked with windows as I simply use basic tables and nest them as needed, but you should be able to add your buttons to the buttonTable like this:

settingsWindow.getButtonTable().align(Align.center);
settingsWindow.getButtonTable().add(toggleMusic).size(100, 100).row();
settingsWindow.getButtonTable().add(toggleSound).size(100, 100).row();
settingsWindow.getButtonTable().add(quitSettingsButton).size(100, 100).row();

Now you will be aligning the same table that you add your buttons too.

#3

I’ve done what you said and it did solved the alignment problem but from some reason the button table is located at the bottom.

Here is a screenshot of that:

#4

That’s interesting. By default tables should be “centered” already, but as I said, I’ve never worked with windows so there may be something else going on.

Are you creating table rows or anything elsewhere in your code? It kind of looks like there is an empty row above it.

As a wild guess, you could try forcing it to the top:

settingsWindow.getButtonTable().center().top();

Another option maybe bypass the buttonTable and try working directly with the Window table.

settingsWindow.align(Align.center);
settingsWindow.add(toggleMusic).size(100, 100).row();
settingsWindow.add(toggleSound).size(100, 100).row();
settingsWindow.add(quitSettingsButton).size(100, 100).row();

Or another option, try ditching the window option all together and use nested tables for your layout. I’m fairly new to LibGDX myself, but nesting tables seem to be fairly easy to work with.

#5

Alright I managed to solve this problem by working directly with the window and not with the buttons’ table.

Here is my new code:


settingsWindow.align(Align.center);
settingsWindow.add(toggleMusic).size(Values.Inner_Button_Width, Values.Inner_Button_Height).center().pad(20).row();
settingsWindow.add(toggleSound).size(Values.Inner_Button_Width, Values.Inner_Button_Height).center().pad(20).row();
settingsWindow.add(quitSettingsButton).size(Values.Inner_Button_Width, Values.Inner_Button_Height).center().pad(20).row();
#6

Awesome! Glad you got it working. :slight_smile:

Also, if you edit your original post and put [SOLVED] (exactly like this including the brackets) at the beginning of your thread title it will put a nifty “solved” icon into the title to let others know that your question was solved and you no longer need help on the problem.