Libgdx actor bounds are wrong

Question

The Actor's boundaries are not centered at the ButtonText but I used the setBounds() method. The higher the Y position is, the less centered is the boundary. The weird thing is that i only created and added to the Stage one button but the screen shows two. When i click the top button, the bottom one is the one highlighted.

How can i fix that?

import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.files.FileHandle;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;


public class MyGame extends Game {
    Stage stage;
    @Override
    public void create() {
        stage=new Stage();
        FileHandle skinFile = new FileHandle("data/resources/uiskin/uiskin.json");
        Skin skin = new Skin(skinFile);
        TextButton sas=new TextButton("dd",skin);
        sas.setBounds(0, 500, 100, 100);
        stage.addActor(sas);
        Gdx.input.setInputProcessor(stage);
    }

@Override
public void dispose() {
    super.dispose();
}

@Override
public void render() {
    super.render();
    stage.act(Gdx.graphics.getDeltaTime());
    stage.draw();
}

@Override
public void resize(int width, int height) {
    super.resize(width, height);
}

@Override
public void pause() {
    super.pause();
}

@Override
public void resume() {
    super.resume();
}

}

Answer 1

Your viewport dimensions are probably wrong, as stated in this post on the LibGDX forums. You should make sure that you are handling the resize(width,height) callback and setting up your stage's camera appropriately. A simple test would be to just set it to the same width and height as the argument values in the resize() function.

For instance:

@Override
public void resize(int width, int height) {
    camera.setToOrtho(false, width, height);
    camera.update();
    stage.getViewport().setScreenSize(width, height); // update the size of ViewPort
}

Answer 2

I think that the reason your buttons are drawing double is because as the window is loading, its sizes change. The first time it draws the button in one location and then draws it again in a new location after resizing.

To get past this drawing issue, you have to clear the background. OpenGl does not do this for you every frame. In your render method, the first call should be

Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

Can't stress enough how important it is to update your viewport in the resize call. Otherwise, your clicks won't be translated from screen coordinates to stage coordinates correctly which is probably why your clicks work outside the button.

@Override
public void resize(int width, int height) {
    stage.getViewport().update(width, height);  
}

If you still doubt that it's a viewport issue, try setting a ScreenViewport on your stage and see if that makes the button click in the correct area. ScreenViewports make your screen coordinates equal to stage coordinates. It is a horrible choice in most cases for a viewport in a game, but it may help you figure out if your issue is viewport related.