Labels and TextTooltips

Labels make working with fonts within your UI's easier . They give you options for color, alignment, and wrapping. These are great for simple text in your menus or for stylized titles. You can extend the functionality of a simple label via the TypingLabel third party library.

LabelStyle

Labels take a BitmapFont and an optional Color and background Drawable. For your basic labels, design your font with a white fill. This way you can tint the label via a style or through code.

Background is seldom used, however consider using it if you want a label to stand out like a special heading.

If you want to apply an underline to a font, a great technique for that is to set an underline 9patch to the background.

Choose a color for your style and make a new style for every predetermined color you wish to use. Or, you can leave the color field blank. This allows you to dynamically color the label via the Color Markup Language as seen below.

skin.get(LabelStyle.class).font.getData().markupEnabled = true;
Label label = new Label("This [RED]is a test[] of the [#579dd8]Color Markup Language[].", skin);
root.add(label);

Label Layout

Don't confuse label alignment with cell alignment. These features will work in tandem to achieve different effects. For example, the cell is aligned to the right.

Label label = new Label("This is a\nright aligned cell.", skin);
root.add(label).right().expandX();

Now the text is aligned to the right.

Label label = new Label("This is a\nright aligned label.", skin);
label.setAlignment(Align.right);
root.add(label);

Ellipses and Word Wrap

You need to design your UI's to accommodate different screen resolutions and allow for independent resizing of widgets. That means your labels are going to need to resize too. If you do nothing, they will run off the screen or overlap other widgets.

Label label = new Label("This is a long label that is going to be cut off in some horrible, unspeakable way", skin);
root.add(label);

An easy solution is to just cut off the text and use ellipses to indicate that there is more text to be read. Notice that you have to specify a width for the label or through the parent of the widget.

Label label = new Label("This is a long label that will not be cut off in some horrible, unspeakable way", skin);
label.setEllipsis(true);
root.add(label).width(400);

You can use ellipses with grow() instead of width, but you should also set minWidth(0) to avoid issues when scaling down the label.

Ellipses are fine, but it is insufficient for important data that the user needs to see. You can automatically wrap to new lines via the word wrap feature.

Label label = new Label("This is a long label that will not be cut off in some horrible, unspeakable way", skin);
label.setWrap(true);
root.add(label).growX();

TextTooltip

TextTooltipStyle has very simple requirements. All you need to do is provide a valid LabelStyle and provide a background Drawable.

You don't add the TextTooltip to the Table or the Stage. Instead, you add it like an EventListener to your widgets. When you mouse over, it fades in as you would expect.

Label label = new Label("MOUSE OVER ME", skin);
root.add(label);
TextTooltip textTooltip = new TextTooltip("Very vital tooltip information", skin);
label.addListener(textTooltip);

An optional parameter is the wrapWidth. Set a width to automatically make text go to the next line, or set it to 0 for no wrap.

libGDX's implementation of the Tooltip widget is pretty testy. The default options seem poorly planned. For instance, it takes a really long time for the tooltip to appear when you mouse over. There is a parameter you can set to avoid this.

textTooltip.setInstant(true);

Tooltip Manager

It would be incredibly irksome to have to set that option for every single tooltip. Thankfully, there is a default Tooltip Manager that you can configure to change multiple timings of the tooltip.

TooltipManager tm = TooltipManager.getInstance();

To apply the instant change listed above to all tooltips, write the following lines. Notice that you must call #hideAll() to apply the change.

tm.initialTime = 0;
tm.hideAll();

If you want to temporarily make tooltips pop up instantly when a user presses the "F1" key, for example, add the following to your Stage.

stage.addListener(new InputListener() {
    @Override
    public boolean keyDown(InputEvent event, int keycode) {
        if (keycode == Keys.F1) tm.instant();
        return false;
    }
});

There are many more configuration options available in TooltipManager with varying levels of usefulness and intuitiveness. I personally opted to create my own widget so that I have complete control over the behavior. Consider reading about how to create custom widgets if you want to go down this route too.

TypingLabel

TypingLabel lets you achieve animated effects while keeping the same functionality as a typical Label. It's compatible across all backends. You must add the dependency to your project.

See the TypingLabel documentation for more details. TextraTypist is TypingLabel's successor which includes even more effects and features.

Further Steps

You've figured out how to display text. How would one get text input from the user? Proceed to the next chapter, 04 - TextField and TextArea or return to the table of contents.