Scrollable ListView in LibGDX similar to Android ListView sample example tutorial

By | January 11, 2016

In this article, we will learn how to draw a list of selectable strings in a scrollable layout for a LibGDX Game.

ListView LibGDX

The complete implementation for our task is given below:

package com.marothiatechs.Screens;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.List;
import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.utils.viewport.StretchViewport;

public class Leaderboard implements Screen {
	ScrollPane scrollPane;
	List<String> list;
	Skin skin;
	SpriteBatch batcher;
	float gameWidth, gameHeight;
	TextureAtlas atlas;
	private Stage stage;

	@Override
	public void show() {
		gameWidth = Gdx.graphics.getWidth();
		gameHeight = Gdx.graphics.getHeight();
		atlas = new TextureAtlas(Gdx.files.internal("ui/spritesheet.atlas"));
		skin = new Skin(Gdx.files.internal("ui/list_skin.json"), atlas);

		batcher = new SpriteBatch();
		list = new List<String>(skin);
		String[] strings = new String[20];
		for (int i = 0, k = 0; i < 20; i++) {
			strings[k++] = "String: " + i;

		}
		list.setItems(strings);
		scrollPane = new ScrollPane(list);
		scrollPane.setBounds(0, 0, gameWidth, gameHeight + 100);
		scrollPane.setSmoothScrolling(false);
		scrollPane.setPosition(gameWidth / 2 - scrollPane.getWidth() / 4,
				gameHeight / 2 - scrollPane.getHeight() / 4);
		scrollPane.setTransform(true);
		scrollPane.setScale(0.5f);
		stage = new Stage(new StretchViewport(gameWidth, gameHeight));
		stage.addActor(scrollPane);
		Gdx.input.setInputProcessor(stage);

	}

	float backgroundX = 0;

	@Override
	public void render(float delta) {
		Gdx.gl.glClearColor(1, 1, 1, 1);
		Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

		stage.act(delta);
		stage.draw();
	}

	@Override
	public void resize(int width, int height) {

	}

	@Override
	public void pause() {
	}

	@Override
	public void resume() {
	}

	@Override
	public void hide() {
	}

	@Override
	public void dispose() {
		stage.dispose();
		skin.dispose();
		atlas.dispose();
	}

}

The skin file list_skin.json:

{
	"com.badlogic.gdx.graphics.Color":{
		"white" : { "r":1, "g":1, "b":1, "a":1 },
		"black" : { "r":0, "g":0, "b":0, "a":1 },
		"red"   : { "r":1, "g":0, "b":0, "a":1 },
		"green" : { "r":0, "g":1, "b":0, "a":1 },
		"blue"  : { "r":0, "g":0, "b":1, "a":1 }
	}
	"com.badlogic.gdx.graphics.g2d.BitmapFont":{
		"white" : { "file": "font/default.fnt" },
		"black" : { "file": "font/default.fnt" }
	}

	"com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle":{
		"default":{
			"font":white,
			"fontColorUnselected":black,
			"fontColorSelected":white,
			 "selection": selection
		}
	}

}

The file named spritesheet.atlas has to be made using TexturePacker tool provided with LibGDX.

Images required in the spritesheet.atlas:
– selection.png

Also include the font files specified in the skin file.

In this tutorial only the logic for listview is provided for those who already know how to use scene2d, textureAtlas etc in LibGDX.

4,627 total views, 1 views today

(Visited 3,121 times, 1 visits today)