How to create a button in Libgdx?

Question

I want to create a button that changes when the user hovers it, or clicking it. I created the following variable

Button buttonPlay = new Button();

I don't know what to do now, how to load the images? How to write text into the button? How to implement the events / effects (hover, click)?

It would be very helpful if someone could write some example code for a button.

Dynamite

I have no real experience ith scene2d, but these 2 reads have your answer: github.com/libgdx/libgdx/wiki/Scene2d.ui#wiki-Button github.com/libgdx/libgdx/wiki/Skin – Heptavalent

Answer 1

A button is simply an actor in libgdx. To render an actor you use a stage that contains all the actors of the screen, renders them and updates them. I assume you want a button with text, so you should use the class TextButton and add it to a stage. A TextButton takes a string to render and a ButtonStyle, in this case a TextButtonStyle, which is basically a class that contains all the information about the button (font, drawable to render while not pressed, drawable to render while pressed etc).

   public class ButtonExample extends Game{

    Stage stage;
    TextButton button;
    TextButtonStyle textButtonStyle;
    BitmapFont font;
    Skin skin;
    TextureAtlas buttonAtlas;

    @Override
    public void create() {      
        stage = new Stage();
        Gdx.input.setInputProcessor(stage);
        font = new BitmapFont();
        skin = new Skin();
        buttonAtlas = new TextureAtlas(Gdx.files.internal("buttons/buttons.pack"));
        skin.addRegions(buttonAtlas);
        textButtonStyle = new TextButtonStyle();
        textButtonStyle.font = font;
        textButtonStyle.up = skin.getDrawable("up-button");
        textButtonStyle.down = skin.getDrawable("down-button");
        textButtonStyle.checked = skin.getDrawable("checked-button");
        button = new TextButton("Button1", textButtonStyle);
        stage.addActor(button);
    }

    @Override
    public void render() {      
        super.render();
        stage.draw();
    }
}

So whats happening here? I am creating a stage, a font and a textureatlas with all the textures for the buttons in "buttons.pack". Then I initialize an empty TextButtonStyle and and i add the font and the textures for the up, down and checked states. font, up, down and checked are all static variables of type Drawable so you can really pass it any kind of Drawable (texture, 9-patch etc). Then simply add the button to the Stage.

Now in order to do something when the button is actually clicked, you have to add a listener to the button, a ChangeListener.

    button.addListener(new ChangeListener() {
        @Override
        public void changed (ChangeEvent event, Actor actor) {
            System.out.println("Button Pressed");
        }
    });

Of course instead of adding the button directly to the Stage you should add it to a Table and add the Table to the Stage but I didn't want to make this post too confusing. Here is a good tutorial on tables in libgdx.

Parkland

Thank you very much!! it was so helpful, just one question.. how can i create the buttons.pack file? – Dynamite

Israel G - if you found the answer, please post it so other people won't have to create a new topic – Rodeo

nice tutorial: libdgxtutorials.blogspot.com/2013/09/… – Gatewood

Is there a clear/clean informative page about how the pack files works? – Icily

@HerbMeehan Seems like people are still having trouble, as I can recall, there was a jar file in my libgdx project which you can run, and you get some simple packing software, that can pack images into a .pack file. Search it on Google. – Dynamite

Answer 2

This is how you do it without adding any skin

    TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();
    textButtonStyle.font = yourCustomFont;
    textButtonStyle.fontColor = Color.WHITE;
    stage.add(new TextButton("Custom Btn ", textButtonStyle));

Gatekeeper

Answer 3

buttons.pack is the file generated from the libgdx texture packer, texture packer is the tool which can used to generate the texture atlas , That is multiple images you can loaded to the GUI using a single file . it also help to save some memory please refer this link`https://code.google.com/p/libgdx-texturepacker-gui/downloads/list, https://github.com/libgdx/libgdx/wiki/Texture-packer

Taxonomy

give an example or some code to make it more clear then give reference link, that will be better. – Elative