SelectBox

SelectBoxStyle

"scrollStyle" points to an existing ScrollPane style and "listStyle" points to an existing List style. Make sure to follow those guides to make something acceptable for a SelectBox. Usually the List needs to not have a background. Apply the background to the ScrollPane so the scroll knob does not hang outside of it awkwardly.

Make sure "font" matches the font style of your List or it will look disjointed. Setting a "fontColor" and "disabledFontColor" will color the text inside of the SelectBox only.

The main portion of the SelectBox is the "background". This is what the user clicks on and specifies the content area for the text. Specify the "backgroundOver", "backgroundOpen", and "backgroundDisabled" to represent the corresponding states. SelectBoxes usually have a symbol on the right to symbolize that that it has a list of content. This is often a triangle, ellipses, or two stacked triangles facing up and down.

SelectBox Layout

This is a simple SelectBox.

SelectBox<String> selectBox = new SelectBox<>(skin);
selectBox.setItems(new String[] {"selection one", "selection two", "selection three"});
root.add(selectBox);

You can set the alignment of the text in the SelectBox. As every SelectBox contains a List, you should set the alignment of the List as well.

SelectBox<String> selectBox = new SelectBox<>(skin);
selectBox.setItems(new String[] {"selection one", "selection two", "selection three"});
selectBox.setAlignment(Align.center);
selectBox.getList().setAlignment(Align.center);
root.add(selectBox);

You can also change the settings of the ScrollPane that contains the List.

selectBox.getScrollPane().setFadeScrollBars(true);

As with List, SelectBox accepts any kind of object as the array of items, but only implements them as text via Object#toString(). You can't add drawables or widgets to a SelectBox and expect them to display inside the list.

SelectBox selectBox = new SelectBox<>(skin);
selectBox.setItems(new Object[] {"string", new Label("label", skin), skin.getDrawable("button-normal")});
root.add(selectBox);

Having a SelectBox of a specific type can be very useful when you need to use the selected Object to do a task.

final SelectBox<Drawable> selectBox = new SelectBox(skin);
selectBox.setItems(new Drawable[] {skin.getDrawable("checkbox"), skin.getDrawable("radio"), skin.getDrawable("button-normal")});
root.add(selectBox);

root.row();
final Image image = new Image();
root.add(image).space(10);

selectBox.addListener(new ChangeListener() {
    @Override
    public void changed(ChangeEvent event, Actor actor) {
        image.setDrawable(selectBox.getSelected());
    }
});

I use a special listener to apply a hand image when mousing over a widget. This class is compatible with the LWJGL3 backend.

public class HandListener extends ClickListener {
    public HandListener() {
        super();
    }
    
    @Override
    public void exit(InputEvent event, float x, float y, int pointer, Actor toActor) {
        if (pointer == -1) {
            Gdx.graphics.setSystemCursor(Cursor.SystemCursor.Arrow);
        }
    }
    
    @Override
    public void enter(InputEvent event, float x, float y, int pointer, Actor fromActor) {
        if (!(event.getListenerActor() instanceof Disableable) || !((Disableable) event.getListenerActor()).isDisabled())
            Gdx.graphics.setSystemCursor(Cursor.SystemCursor.Hand);
    }
}

If you want to apply a listener like that with a SelectBox, you need to apply it to its child widget as well.

HandListener handListener = new HandListener();
SelectBox<String> selectBox = new SelectBox<>(skin);
selectBox.setItems(new String[] {"selection one", "selection two", "selection three"});
selectBox.addListener(handListener);
selectBox.getList().addListener(handListener);
root.add(selectBox);

Further Steps

Giving the user some visual cue to how far they are in a sequence or allowing them to easily input a value within a range are important UI goals. See the next chapter, 08 - Progress Bar and Slider or return to the table of contents.