# Drawing shapes and images in libgdx dialog

I am currently working on a dialog window for my android game using libgdx. This dialog window contains a collection of labels and buttons, but should also contain an image. The image represents the "remaining health indicator", i.e. an empty indicator with a symbol indicating the health of the player. This indicator has to be filled with a colored rectangle representing the remaining amount of health (see screenshot below).

In order to render this on a dialog of libgdx, I have to draw an image and a colored rectangle (the red rectangle indicating the real amount of remaining health). I know that the dialog supports the rendering of images, but I don't know how to first draw the rectangle.

This is the code I have so far:

public FuelFacilityDialog(GameWorld world, GuiComponent gui) { super("Health check", gui.defaultSkin);

this.world = world;
this.gui = gui;

setModal(true);
setMovable(false);
setResizable(false);

Image healthIndicator = new Image();
Button button1   = new TextButton("heal", gui.defaultSkin);
Button button4   = new TextButton("Exit", gui.defaultSkin);

healthIndicator.setScaling(Scaling.fit);
setObject(button1, true);
setObject(button4, false);

Table imageTable = new Table();
Table buttonTable = new Table();

}


I have found the answer for my problem. In order to draw an image and a shape, one can use a pixmap. It is possible to first create a pixmap on which you draw a rectangle. Then, you create another pixmap on which you draw the image. Both pixmap then can be combined by drawing one pixmap onto the other.

This is the code I use to build an image containing a rectangle indicating the actual health level and drawing the indicator image on top of it.

private Image getHealthIndicatorImage() {
Image indicatorImage = new Image();