LibGDX - How to draw a filled rectangle behind a text?

Question

I'm new in LibGDX and I want to create a grid based game. Every square will have a rectangle and a text and the background color of the rectangles can change during the game.

The problem is when I draw a filled rectangle with ShapeRenderer, it always in front of the BitmapFont. How can I set the rectangle behind the text?

The code I use to draw the squares:

// Draw numbers and rectangles
for (int i = 0; i < map.length; i++) {
    for (int j = 0; j < map[0].length; j++) {
        String value = String.valueOf(map[i][j].getNumber());
        float offset = fontSize/3f;
        Rectangle rect = rects[i][j];

        shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
        shapeRenderer.setColor(150/255f, 150/255f, 150/255f, 1);
        shapeRenderer.rect(rect.x, rect.y, rect.width, rect.height);
        shapeRenderer.end();

        // Draw font
        if (map[i][j].isActive()){
            fontActive.draw(batch, value, rect.x + offset, rect.y + offset);
        } else {
            font.draw(batch, value, rect.x + offset, rect.y + offset);
        }
    }
}

Thanks all!

Answer 1

The way I do it is, first the shapeRenderer (begin-end), and then the batcher (begin-end). I'm assuming you're begining the batcher before the shapeRenderer. I think I read somewhere that can cause trouble.

Example:

        shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
        shapeRenderer.setColor(80 / 255.0f, 80 / 255.0f, 50 / 255.0f, 1);
        shapeRenderer.rect(0, 0, 160, 160);
        shapeRenderer.end();
        batcher.begin();
        drawText(delta);
        batcher.end();

the drawText function uses font.draw to write on-screen.