ProgressBar and Slider

In many games you will need to demonstrate loading progress, experience points, or even player health. These all can be displayed with the use of a ProgressBar. A Slider is an interactive version of ProgressBar. This is useful for quickly getting numeric input from a user without forcing them to type a precise number.

ProgressBarStyle

"background" is the empty bar portion of the widget. This is what the widget would look like at a value of 0. It is advised to use a 9patch or TenPatch here to ensure the widget can be stretched. This also allows you to specify the content area where the bar will be filled.

"knobBefore" is the part of the bar that stretches to the width of the widget's content area as the bar is filled. You must make sure that the drawable allows you to specify a MinWidth of 0 or you will have visual errors when the ProgressBar is set to its minimum.

Think of Street Fighter. Player 2's health bar is reversed from Player 1's. You can achieve this same affect by using "knobAfter" instead of "knobBefore".

"knob" is the icon at the tip of the ProgressBar. This isn't usually used.

You can specify disabled states for the widget: "disabledKnob", "disabledKnobBefore", and "disabledKnobAfter".

ProgressBar takes two default styles: "defaultHorizontal" and "defaultVertical". Make sure to supply both if you plan on using them.

Advanced Styles

There are advanced techniques to achieving a ProgressBar with a repeating pattern or rounded corners. See the discourse and tutorial here.

You can use a progress bar to make something like a mana orb from Diablo given these methods, for example. The possibilities are endless.

ProgressBar Layout

A simple ProgressBar can be added with a few parameters. The min, max, and stepSize depend on what you plan on doing with the bar. If you are making a loading bar for the asset manager for example, you'll want to set the min to 0, the max to 1, and the step to something like .01f. A health bar would go from 0 to maximum player health.

ProgressBar progressBar = new ProgressBar(0, 100, 1, false, skin);
root.add(progressBar);

The step size determines how staggered the notches are between each visual position.

ProgressBar progressBar = new ProgressBar(0, 100, 25, false, skin);
root.add(progressBar);

ProgressBar progressBar = new ProgressBar(0, 100, .1f, false, skin);
root.add(progressBar);

You can set the animation duration to smooth out the movements of the bar. This is helpful if your loading progress is broken up in large chunks.

progressBar.setAnimateDuration(.25f);

Setting the ProgressBar to vertical results in an error if the "defaultVertical" style does not exist.

ProgressBar progressBar = new ProgressBar(0, 100, 1, false, skin);

Exception in thread "main" com.badlogic.gdx.utils.GdxRuntimeException: No com.badlogic.gdx.scenes.scene2d.ui.ProgressBar$ProgressBarStyle registered with name: default-vertical

SliderStyle

Slider is a kind of improved version of ProgressBar with the addition of a sliding knob that reacts to a user click. This means that you should specify a "knob" drawable so the user knows that they can click on it. Slider consists of the same drawables as its parent with the addition of "knobOver" and "knobDown". These two states don't usually need to be different.

Slider Layout

Slider is laid out in pretty much the same way as ProgressBar above.

Slider slider = new Slider(0, 100, 1, false, skin);
slider.setValue(50);
root.add(slider);

Getting the value while it is being dragged is a simple process.

slider.addListener(new ChangeListener() {
    @Override
    public void changed(ChangeEvent event, Actor actor) {
        Slider slider = (Slider) actor;
        System.out.println(slider.getValue());
    }
});

Further Steps

To see my humorous take on explaining the ProgressBar, read The Man Who Killed Hitler and then the Progress Bar. This article goes over some more advanced techniques worth learning.

I have created a widget called RangeSlider that allows the user to specify a range instead of a single data point.

The next chapter is 09 - SplitPane, HorizontalGroup, and VerticalGroup. You can also return to the table of contents.