Drawing table borders in libgdx 0.9.7

Question

I am drawing a table in using libgdx game framework. Everything is rendered perfectly what I was trying to achieve. All I need now is to display cell borders of the table but I found nothing regarding this so far. I am also inclined to use the debug border lines to fullfill the purpose but also could not change the color of them.

Here is my code.

Table table = new Table();
table.setFillParent(true);
table.left().top();

table.add(new Label("Results", new LabelStyle(font, Color.BLACK))).colspan(2).expandX();
table.row();
table.add(new Label(text_you_score, new LabelStyle(font, Color.BLACK)));
table.add(new Label(text_actual_score, new LabelStyle(font, Color.BLACK)));
return table;

There are many properties available for the table and cell but not the border property. We can also draw grid lines manually but that won't work perfectly on every device resolution I think. Any help or idea is highly appreciated. Thanks

Answer 1

This is based on libGDX 1.5.3:

A solution to this is to use a NinePatch as the background image for your Table.

NinePatch patch = new NinePatch(new Texture(Gdx.files.internal("background.png")),
     3, 3, 3, 3);
NinePatchDrawable background = new NinePatchDrawable(patch);

Table table = new Table();
table.setBackground(background);

Using the number variables, you can modify the border radius. Make sure that this matches the png file.

Answer 2

1. Register your table for debug mode

   table.debug();

2. Call in render() method

   Table.drawDebug(stage);

Example

Answer 3

I achieved the display of the debug lines by converting from using a ShapeRenderer with the table.drawDebug(shapeRenderer shapes) call (which I couldn't get to work) to using a stage and adding the table as an actor.

The example linked in the answer above does show it clearly, but here is a short snippet for reference sake. This is on libGDX 1.5.3.

public class MyGdxGame extends ApplicationAdapter {

    Texture img;
    Stage stage;

    @Override
    public void create () {
        img = new Texture("badlogic.jpg");
        stage = new Stage();
        final Skin skin = new Skin();

        Label.LabelStyle style = new Label.LabelStyle(new BitmapFont(),Color.WHITE);
        TextField.TextFieldStyle textFieldStyle = new TextField.TextFieldStyle();
        textFieldStyle.fontColor = Color.WHITE;
        textFieldStyle.font = new BitmapFont();

        skin.add("default", style);
        skin.add("default", textFieldStyle);
        // Keep your code clean by creating widgets separate from layout.
        Label nameLabel = new Label("Name:", skin);
        TextField nameText = new TextField("",skin);
        Label addressLabel = new Label("Address:", skin);
        TextField addressText = new TextField("",skin);

        Table table = new Table();
        table.add(nameLabel);              // Row 0, column 0.
        table.add(nameText).width(100);    // Row 0, column 1.
        table.row();                       // Move to next row.
        table.add(addressLabel);           // Row 1, column 0.
        table.add(addressText).width(100); // Row 1, column 1.

        table.setOriginX(0);
        table.setOriginY(0);
        table.setX(200);
        table.setY(200);
        table.debug();

        stage.addActor(table);
    }

    @Override
    public void render () {
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        stage.act(Gdx.graphics.getDeltaTime());
        stage.draw();
    }

    public void resize (int width, int height) {
        stage.getViewport().update(width, height, true);
    }

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