ImageButton and TextButton

Tutorial Objective

Create a standard Button, TextButton, ImageButton and ImageTextButton.

Differences between Button, TextButton, ImageButton and ImageTextButton

Button

An empty button, but it extends table so other widgets can be added to it. It has an up background that is normally displayed, and a down background that is displayed when pressed. It has a checked state which is toggled each time it is clicked, and when checked it will use the checked background instead of up, if defined. It also has pressed/unpressed offsets, which offset the entire button contents when pressed/unpressed.

TextButton

Extends Button and contains a Label.

ImageButton

Extends Button and contains an image widget. ImageButton adds to Button a drawables for the image widget in the up, down, and checked states.

Note that ImageButton extends Button, which already has a background drawable for the up, down, and checked states. Useful to display an icon on top of a button.

ImageTextButton

Combines ImageButton and ImageTextButton. Useful to show both an icon and a text of top of a button.

Steps

Create a Stage

declare your Scene2D Stage, initialiaze it to cover your entire screen, enable event capture.

public class MyGdxGame extends ApplicationAdapter {
  private Stage stage;
  @Override
  public void create () {
    stage = new Stage(new ScreenViewport());
    Gdx.input.setInputProcessor(stage);
  }
  
  @Override
  public void render () {
    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    stage.act();
    stage.draw();
  }
}

Load a Skin

Labels in this tutorial are created using Skin. The Skin used is “Glassy UI” available here.

Glassy UI skin

It is one of the many skins available on GDX Skin. Each Skin there contains a preview of its look and feel. Pick the one you like by copying the folder “skin” in your asset folder in your Android Subproject (or create your own Skin).

Once you have done so, you can load it as follow:

Skin mySkin = new Skin(Gdx.files.internal("skin/glassy-ui.json"));

Create a TextButton

1. The following code, Create and initialize a TextButton using:
   • Text to be displayed
   • Skin to be used
   • Font to be used (this parameter is optional) . In this case the font “small” as defined in Skin Glassy-UI.json is used.
2. Define and Size and Position of the TextButton.
3. Add the click Listener to execute the action upon clicking the button.
4. Finally, add the button to your stage.

Button button2 = new TextButton("Text Button",mySkin,"small");
button2.setSize(col_width*4,row_height);
button2.setPosition(col_width*7,Gdx.graphics.getHeight()-row_height*3);
button2.addListener(new InputListener(){
	@Override
	public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
		outputLabel.setText("Press a Button");
	}
	@Override
	public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
		outputLabel.setText("Pressed Text Button");
		return true;
	}
});
stage.addActor(button2);

Scaling a TextButton

To scale a TextButton you need to first call setTransform. The limitation however is that this is going to expand/shrink your TextButton Image, so it might not look very nice. To double the size of a button you would call:

Button button2 = new TextButton("Text Button",mySkin,"small");
button2.setSize(col_width*4,row_height);
button2.setPosition(col_width*7,Gdx.graphics.getHeight()-row_height*3);
button2.setTransform(true);
button2.scaleBy(0.5f);
stage.addActor(button2);

Create a ImageButton

An ImageButton is created almost the same as a TextButton except you also add a up and down drawable.

1. The following code, Create and initialize an ImageButton with the Skin to be used.
2. Define and Size and Position of the TextButton.
3. Add the imageUp and imageDown Drawable.
4. Add the click Listener to execute the action upon clicking the button.
5. Finally, add the button to your stage.

For the imageUp and imageDown the following png are added to the asset folder with the Android subproject:

The code to create an ImageButton is as follow:

<pre>
<pre>ImageButton button3 = new ImageButton(mySkin);
button3.setSize(col_width*4,(float)(row_height*2));
button3.getStyle().imageUp = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("switch_off.png"))));
button3.getStyle().imageDown = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("switch_on.png"))));
button3.setPosition(col_width,Gdx.graphics.getHeight()-row_height*6);
button3.addListener(new InputListener(){
  @Override
  public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
    outputLabel.setText("Press a Button");
  }
  @Override
  public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
    outputLabel.setText("Pressed Image Button");
    return true;
  }
});
stage.addActor(button3);

Code

Full Code available for download here or can be read below.

public class MyGdxGame extends ApplicationAdapter {
	private Stage stage;
	private Label outputLabel;

	@Override
	public void create () {
		stage = new Stage(new ScreenViewport());
		Gdx.input.setInputProcessor(stage);

		int Help_Guides = 12;
		int row_height = Gdx.graphics.getWidth() / 12;
		int col_width = Gdx.graphics.getWidth() / 12;

		Skin mySkin = new Skin(Gdx.files.internal("skin/glassy-ui.json"));

		Label title = new Label("Buttons with Skins",mySkin,"big-black");
		title.setSize(Gdx.graphics.getWidth(),row_height*2);
		title.setPosition(0,Gdx.graphics.getHeight()-row_height*2);
		title.setAlignment(Align.center);
		stage.addActor(title);

		// Button
		Button button1 = new Button(mySkin,"small");
		button1.setSize(col_width*4,row_height);
		button1.setPosition(col_width,Gdx.graphics.getHeight()-row_height*3);
		button1.addListener(new InputListener(){
			@Override
			public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
				outputLabel.setText("Press a Button");
			}
			@Override
			public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
				outputLabel.setText("Pressed Button");
				return true;
			}
		});
		stage.addActor(button1);

		// Text Button
		Button button2 = new TextButton("Text Button",mySkin,"small");
		button2.setSize(col_width*4,row_height);
		button2.setPosition(col_width*7,Gdx.graphics.getHeight()-row_height*3);
		button2.addListener(new InputListener(){
			@Override
			public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
				outputLabel.setText("Press a Button");
			}
			@Override
			public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
				outputLabel.setText("Pressed Text Button");
				return true;
			}
		});
		stage.addActor(button2);

		// ImageButton
		ImageButton button3 = new ImageButton(mySkin);
		button3.setSize(col_width*4,(float)(row_height*2));
		button3.getStyle().imageUp = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("switch_off.png"))));
		button3.getStyle().imageDown = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("switch_on.png"))));
		button3.setPosition(col_width,Gdx.graphics.getHeight()-row_height*6);
		button3.addListener(new InputListener(){
			@Override
			public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
				outputLabel.setText("Press a Button");
			}
			@Override
			public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
				outputLabel.setText("Pressed Image Button");
				return true;
			}
		});
		stage.addActor(button3);

		//ImageTextButton
		ImageTextButton button4 = new ImageTextButton("ImageText Btn",mySkin,"small");
		button4.setSize(col_width*4,(float)(row_height*2));
		button4.getStyle().imageUp = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("switch_off.png"))));
		button4.getStyle().imageDown = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("switch_on.png"))));
		button4.setPosition(col_width*7,Gdx.graphics.getHeight()-row_height*6);
		button4.addListener(new InputListener(){
			@Override
			public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
				outputLabel.setText("Press a Button");
			}
			@Override
			public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
				outputLabel.setText("Pressed Image Text Button");
				return true;
			}
		});
		stage.addActor(button4);

		outputLabel = new Label("Press a Button",mySkin,"black");
		outputLabel.setSize(Gdx.graphics.getWidth(),row_height);
		outputLabel.setPosition(0,row_height);
		outputLabel.setAlignment(Align.center);
		stage.addActor(outputLabel);
	}

	@Override
	public void render () {
		Gdx.gl.glClearColor(1, 1, 1, 1);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		stage.act();
		stage.draw();

	}
}

Next tutorial Basic Actor Action

Advertisement