Changing Libgdx Button appearance

Question

I need to be able to change the appearance of a Libgdx Button when some of my events are triggered.

Here is the declaration of my button:

Button googleButton = new Button(skin.getDrawable("google_sign_in"));

Here are the things I tried:

googleButton.setBackground(skin.getDrawable("google_sign_out"));
googleButton.invalidate();

googleButton.setChecked(true);
googleButton.invalidate();

googleButton.getStyle().up = skin.getDrawable("google_sign_out");
googleButton.invalidate();

I have done a lot of searches but I can't find the answer. Could somebody show me the right way of doing this?

Answer 1

I think the problem is that you're changing the contents of the skin/style after initializing the Button , but the button object does not reference the style after it has been initialized. I'm also not entirely clear on what you're going for. I assume you want to show a "sign in" button, until the user is signed in, and then you want that button to be a "sign out" button.

The invalidate method just triggers a re-layout (to re-compute the size/location of the Actor ).

Maybe try forcing the style with setStyle , like this:

   googleButton.getStyle().up = ... whatever;
   googleButton.setStyle(googleButton.getStyle());

That said, I think you would be better off having two (?) different Button objects (one for logging in, and one for logging out). Pack them in a Stack , and just make one or the other invisible (see Actor.setVisible )

Answer 2

I managed to get this to work. In my Actor, a dice that have 6 possible images:

public Dice(int options) {
    super(new Button.ButtonStyle());
}

And when I want to change the face:

public void setValue(int value) {
    this.value = value;
    Button.ButtonStyle style = getStyle();
    style.up = new TextureRegionDrawable(
            Assets.instance.dices.facesUp[value]);
    style.down = new TextureRegionDrawable(
            Assets.instance.dices.facesDown[value]);
    style.checked = new TextureRegionDrawable(
            Assets.instance.dices.facesChecked[value]);
    setSize(getPrefWidth(), getPrefHeight());
}

I think the trick is at the

setSize(getPrefWidth(), getPrefHeight());

If I omit it, the dice doesn't get displayed. And there's no need for setStyle or invalidate().

Answer 3

Use CheckBox class instead;

1- make a .json file for the skin

{
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: fontfile.fnt } },
com.badlogic.gdx.graphics.Color: {
    green: { a: 1, b: 0, g: 1, r: 0 },
    white: { a: 1, b: 1, g: 1, r: 1 },
    red: { a: 1, b: 0, g: 0, r: 1 },
    black: { a: 1, b: 0, g: 0, r: 0 }
  },
com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
    google-loggin: { checkboxOn: google_sign_in, checkboxOff: google_sign_out, font: default-font, fontColor: white }
},
}

2- make a skin

skin = new Skin(Gdx.files.internal("your.json-file.json"), new TextureAtlas("textureAtlas-file.pack"));

3- create the button ignoring the first argument:

CheckBox loginButton = new CheckBox("", skin, "google-loging");

Answer 4

Just for anyone searching for this through google. To change the style of the button from a style already added to your skin file, after already initialising:

btn.setStyle(skin.get("YOUR BTN STYLE",TextButton.TextButtonStyle.class));

Answer 5

You must add image to button button_1.addActor(image) . This image will cover the button origin skin. And then you can switch off and on this image image.setVisible(false)