Table background not showing up

Question

I am using Libgdx's Scene2D API to build my UI and everything has been working as expected until now. I created a Skin and a TextureAtlas and linked them as so:

Skin skin = new Skin();
TextureAtlas uiElements1 = new TextureAtlas("skins/uielements1.txt");
skin.addRegions(uiElements1);
skin.load(Gdx.files.internal("skins/uiskin.json"));

And then I tried to create a Table:

Table table = new Table(skin);
table.setWidth(stage.getWidth());
table.align(Align.center|Align.top);
table.setPosition(0, Gdx.graphics.getHeight());
table.padTop(30);
table.setBackground("grey_button02");

Finally, I added a Label to the Table:

Label gameTitle = new Label("Nameless Project", skin, "title");
table.add(gameTitle).padBottom(10).row();

Once I added the Table to my Stage, only the elements in it would show up and not the background image. I tried using background(String s), setBackground(String s), background(Drawable d), and setBackground(Drawable d). None of those seemed to work for me.

I also tried calling pack() and setFillParent(true) but both of those made my table disappear. I have gone through just about every Google result and I can't find anyone else with my issue.

Here is my uiskin.json file

{
  com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: fonts/FutureThin.fnt } },
  com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
   default: { down: blue_button03, up: blue_button04, font: default-font },
  },
  com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
    default:  {
      titleFont: default-font
     }
   },
   com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
    title: {
        font: default-font
     }
   }
}

And the entire class rendering the stage:

public class MainMenu implements Screen {

    GameClass myGame;

    Stage stage;
    Skin skin;

    Table table;
    TextButton singlePlayer;
    TextButton multiPlayer;
    Label gameTitle;


    public MainMenu(GameClass g) {
        myGame = g;

        // Create Skin, load texture Atlas, load skin
        skin = new Skin();
        TextureAtlas uiElements1 = new TextureAtlas("skins/uielements1.txt");
        skin.addRegions(uiElements1);
        skin.load(Gdx.files.internal("skins/uiskin.json"));

        // Create stage
        stage = new Stage(new ScreenViewport());

        // Create Table
        table = new Table(skin);
        table.setWidth(stage.getWidth());
        table.align(Align.center|Align.top);
        table.setPosition(0, Gdx.graphics.getHeight());
        table.padTop(30);
        table.setBackground("grey_button02");

        // Game Title
        gameTitle = new Label("Nameless Project", skin, "title");
        table.add(gameTitle).padBottom(30).row();

        // Single Player button
        singlePlayer = new TextButton("Single Player", skin, "default");
        singlePlayer.addListener(new ClickListener() {
            @Override
            public void clicked(InputEvent e, float x, float y) {
                myGame.setScreen(new WorldTesting(myGame));
            }
        });
        table.add(singlePlayer).width(300).padBottom(30).row();

        // Multiplayer Button
        multiPlayer = new TextButton("Multiplayer", skin, "default");
        multiPlayer.setWidth(350);
        multiPlayer.addListener(new ClickListener() {
            @Override
            public void clicked(InputEvent e, float x, float y) {
                // Change Scenes
            }
        });
        table.add(multiPlayer).width(300).padBottom(30).row();

        stage.addActor(table);
        Gdx.input.setInputProcessor(stage);
    }

    public void show() {

    }

    public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        stage.act(Gdx.graphics.getDeltaTime());
        stage.draw();
    }

    public void hide(){

    }
    public void resize(int x, int y) {

    }
    public void pause() {

    }
    public void resume() {

    }
    public void dispose() {

    }

}

Answer 1

I've had this exact problem before, so I'll try to remember how I solved it.

I recommend turning on the stage.debugAll() while you develop: It is a god send at helping you figure out when things aren't doing what they are supposed to be doing.

You say all of the elements inside the table show up fine. Are they properly aligned as well? If not then your table is not positioned correctly because it is not sized correctly.

Try and put a stage.getViewport().update(x,y); in the resize(int width,int height); method. Since you are using screenviewport your viewport size is not automatically set.

One more tip is instead of just using a drawable for a table background I would try and make use of a ninepatch. It will get rid of any weird stretching in your UI elements (especially tables which can be much bigger than most elements).

Answer 2

Edit because my previous answer was not the correct one:

First guess: the region is too small, or it can't process the image. I would debug the draw method and make sure the table actually has a background in the draw method. If no background is there, the method just draws nothing.