Label is the widget to use whenever you want to write any kind of text on the screen. You can set a style through the LabelStyle class where the font type must be specified while the font color and background image are optional. We can generate a label as follows:

Keep in mind that Libgdx will use a, by default, linear TextureFilter when changing font size (scaling).

As its name suggests, this widget will place a center-aligned image on the screen, by default. It can accept a Drawable, NinePatch, Texture, TextureRegion, or TextureRegionDrawable instance in the constructor. Only with the last one, Libgdx will keep the actor's properties (scale, rotation, and origin) when drawing.

The usage of this widget is easy:

As you progress in this recipe, you will realize that you have multiple alternatives to choose from when including buttons in your game. This is the most general one.

It is a complex widget because it is internally implemented as a Table; an actor destined to organize elements on screen, which we will dive into later on. By its definition, you can infer that a button can contain other actors.

Button has no key properties, but you can specify a lot of optional details such as Textures or Drawables for checked, checkedOver, disabled, down, up, and over states through the ButtonStyle class, even the needed offset to press/release in both axes. In other words, you have a complete potpourri of options to contribute to the aforementioned game experience.

The resulting code for instancing a simple button can be as follows:

Texture actor = new Texture(Gdx.files.internal("data/button.png"));
Button.ButtonStyle buttonStyle = new Button.ButtonStyle();
buttonStyle.up = new TextureRegionDrawable(new TextureRegion(actor));
button = new Button( buttonStyle );

The following screenshot shows the example button:

The TextButton class extends Button, adding a text Label within its internal table. As a consequence, the style includes everything belonging to the LabelStyle and ButtonStyle properties:

The following screenshot shows the text button:

Changing a label for an image is the only difference between the ImageButton widget and the TextButton widget. This entails the inclusion of the ImageStyle and ButtonStyle properties within the ImageButtonStyle class.

It is a good idea to use this implementation when you want to place an icon over the button image.

The code is similar too. We can implement ImageButton as follows:

The following screenshot shows the image button:

The fat brother in the Button family is a mixture of the previous two widgets preserving properties from both:

The following screenshot shows the image-text button:

Multiple or mutually exclusive options (commonly known as radio buttons; refer to the There's more… section for more) can be achieved through the CheckBox class. It is internally implemented extending the TextButton class. In order to instantiate it, you must set a Drawable instance to the checkboxOff and checkBoxOn properties leaving checkboxOffDisabled, checkboxOnDisabled, and checkboxOver as optional.

The usage process would be as follows:

The following screenshot shows the checkbox:

TextField is the widget to use whenever you need to get some input text from the user in a single line such as e-mail or password fields.

Selected text can be copied and pasted only under the desktop platform.

You must specify the font and fontColor properties, but it is a good idea to customize the background, cursor, disabledBackground, disabledFontColor, focusedBackground, focusedFontColor, messageFont, messageFontColor, and selection attributes to get a recognizable input appearance.

We can implement a password field as follows:

The following screenshot shows TextField:

Commonly known as a listbox, this is a widget to display a sequence of strings, highlighting the selected one.

ListStyle needs font, fontColorSelected, fontColorUnselected, and selection to be defined while leaving it to the user whether or not to include a background. The usage process is as follows:

The following screenshot shows the List widget:

Whenever you have a static space but a dynamic number of items to show, consider using the ScrollPane widget where all internal properties are optional but interesting to define. We can implement ScrollPane as follows:

The following screenshot shows the ScrollPane widget:

The List widget needs a relatively decent space within the screen to display all items, even when combined with a ScrollPane widget. However, we will not always have such luxury. SelectBox works in the same way but it will only display the selected item, showing the rest on clicking/touching the item. I am pretty sure that you must have seen it before with the name of the drop-down list.

Its style class is a bit different because it contains two other styles inside apart from the typical properties. This peculiarity becomes mandatory to define as well as font, fontColor, and background.

The inner styles are the already used ListStyle along with ScrollPaneStyle. We can implement SelectBox as follows:

The following screenshot shows the SelectBox widget:

Even though you already learned a way to implement this kind of UI component from scratch in Chapter 6, Font Rendering, Libgdx provides you with an out-of-the-box customizable progress bar.

It requires you to supply a background and a knob image. Nevertheless, you can also specify disabledBackground, disabledKnob, disabledKnobAfter, disabledKnobBefore, knobAfter, and knobBefore. Now, let's look at a practical example:

The following screenshot shows the ProgressBar widget:

An example of a slider is a sound volume selector. It allows, for instance, the user to move a knob along a bar, focusing more on the audio output than on the actual minimum-maximum value of volume, in order to detect the desired point.

This component only has two attributes that you must specify: background and knob. Suspicious right? In fact, Slider is an extension of ProgressBar with all the consequences that it entails. In the following example, we will just focus on its exclusive properties:

The following screenshot shows the Slider widget:

There are some game genres, such as sports simulators, that usually do not fit gdx controllers as discussed in Chapter 4, Detecting User Input, so they must make use of a virtual touchpad.

Libgdx supports this widget with a circular movement area centered on its middle point. The background image must be specified, but it is recommended to define the knob image too.

Follow this process to create your own touchpad:

The following screenshot shows the example Touchpad:

The Stack widget is a container where widgets are placed on top of each other, sizing all of its content to its bounds. The following is an example implementation:

You can also organize your widgets hierarchically using the Scene2D Tree class, whose structure is composed of Tree.Node. Each of them has an icon and an actor, as well as zero or more children.

The mandatory properties of TreeStyle are the minus and plus images to expand or collapse the node. But it is also possible to decorate it with background, selection, and over images.

Next is an example implementation of its usage:

The following screenshot shows the Tree widget:

This is a structural component to store two widgets distributed either horizontally or vertically and separated by a specified handler image. Our example will contain two images. We can implement SplitPane as follows:

The following screenshot shows the SplitPane widget:

Sometimes you will want to have your own customized windows within your app. Scene2D provides you with a built-in solution internally implemented as an extension of the Table class that will attract the attention of one of the subsequent recipes.

You must define what font you are using for the title of the Window widget and, subject to the programmer's preference, specify background, stageBackground, and titleFontColor.

The process to create a very simple Window widget is as follows:

The following screenshot shows an example Window widget:

The Dialog widget is a specific kind of Window due to the extended relationship that connects them. You can add any widget to it. The dialog will close if an inner button is clicked. Two Table instances organize the content of a Dialog widget. The first one is the content table, which is intended for storing labels. The second one is the button table whose obvious mission is to contain buttons.

Dialog makes use of WindowStyle to receive any style:

The following screenshot shows an example Dialog widget: