Margins and paddings between elements in LibGDX

Question

I have a VerticalGroup of Buttons on my screen. The problem is that buttons located very closely one to one. I want to add some spaces between buttons, something like padding or margin. I find pad method in Table in API, but VerticalGroup doesn't extends Table and therefore doesn't contain this method. Please point me how I can add some spacing between buttons inside VerticalGroup

Sample code

VerticalGroup buttons = new VerticalGroup();
buttons.addActor(btn1);
buttons.addActor(bnt2);
// ... and so on

Answer 1

Better late than never: libGDX uses TableLayout (https://github.com/EsotericSoftware/tablelayout) to order the widgets. When you follow the link and you go to the 'Padding' section, you will have an image illustrating your situation. In order to get the margin (the spacing outside of the button) you have to use the following code:

 table.add(button).width(100).pad(10);
 table.row();
 table.add(lastButton);

Answer 2

This is very, very new, but for anyone reading this question in the future, there is a space method in VerticalGroup which is intended to allow you to define the spacing between elements:

http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/VerticalGroup.html#space(float)

You can find an example of it in action, here:

https://github.com/libgdx/libgdx/blob/master/tests/gdx-tests/src/com/badlogic/gdx/tests/Scene2dTest.java

For those working with a slightly older version of libgdx, there is a setSpacing method that can be used instead.

Answer 3

Instead of adding padding from the parent (the VerticalGroup) add the padding to each element (the Buttons).

A libGDX Button is also a Table and Tables support various pad methods. Those are documented to change the padding around the outside of the table (or button in your case).