ScrollPane

When you have content that can be of an unexpected size, it is a great idea to stick it into a ScrollPane. It automatically crops the content and adds scrollbars for panning. You can also use flick scrolling for a more mobile feel. ScrollPane is also a component of SelectBox.

ScrollPaneStyle

"background" is the drawable that will contain the entire widget. Usually this is not needed unless this ScrollPane is meant to be used with a SelectBox.

"corner" appears in the bottom-right corner of the widget if the knobs are specified. This is not commonly used or necessary.

You need to specify the knobs if you want the user to able to click and drag the scroll bar on desktop. See "hScrollKnob" for horizontal scrolling and "vScrollKnob" for vertical scrolling.

If you want to have a background for those knobs, specify "hScroll" and "vScroll"

ScrollPane Layout

Adding a ScrollPane is simple enough. A common mistake is forgetting to pass in a skin/style. The single argument constructor makes a basic ScrollPane with no visual knobs.

Table table = new Table();
ScrollPane scrollPane = new ScrollPane(table, skin);
root.add(scrollPane);

You might wonder why you don't see the ScrollPane. By default, scrollbar fading and flick scrolling are enabled meaning that you have to flick the pane to actually see the bar. Also, you must have enough content to cause scrolling in the first place.

Table table = new Table();
ScrollPane scrollPane = new ScrollPane(table, skin);
scrollPane.setFadeScrollBars(false);
scrollPane.setFlickScroll(false);
root.add(scrollPane);

for (int i = 0; i < 100; i++) {
    Label label = new Label("test " + i, skin);
    table.add(label);
    table.row();
}

Why is there an unnecessary horizontal knob? You are beginning to see the complexity of working with ScrollPane. Call #validate() on widgets that need to recalculate their preferred width based on their children. Do this after you have added your children.

scrollPane.validate();

Often designers want to scroll the ScrollPane half way down the view (or to some other percentage). You have to validate the ScrollPane for this to work. When you create a widget, it essentially is created at size 0. Half of 0 is still 0, thus not panning the view at all. #validate() calculates the actual dimensions.

scrollPane.validate();
scrollPane.setScrollPercentY(.5f);
scrollPane.updateVisualScroll(); //remove this line to animate the movement

You may want to scroll to a specific position.

TextButton scrollToButton = null;
for (int i = 0; i < 100; i++) {
    TextButton button = new TextButton("test " + i, skin);
    if (i == 30) scrollToButton = button;
    table.add(button);
    table.row();
}

scrollPane.validate();
scrollPane.scrollTo(0, scrollToButton.getY() - scrollToButton.getHeight() * .5f, 0, 0);
scrollPane.updateVisualScroll(); //remove this line to animate the movement

Sometimes you have a fancy knob that you don't want to stretch to match the visible area. This makes for a nice stylized handle.

scrollPane.setVariableSizeKnobs(false);

You can use ScrollPane for unorthodox uses such as a way to pan a map. There are a multitude of options to test to achieve different effects.

Image image = new Image(new Texture(Gdx.files.internal("map.jpg")));
ScrollPane scrollPane = new ScrollPane(image);
scrollPane.setOverscroll(false, false);
root.add(scrollPane);

Further Steps

The following chapter, 07 - SelectBox, implements elements from List and ScrollPane. You can also return to the table of contents.