How to create window without a title bar in libgdx

Question

I have a project that needs to look like this:

.

Using window I get the following result

I am creating the above result with the following code

private Table buildControlsWindowLayer() {
        Window window = new Window("", skinLibgdx);
        // + play button
        playButton = new Button(maputoSkin, "play");
        window.add(playButton).pad(10, 0, 10, 0).row();
        playButton.addListener(listener);
        // + options button
        optionsButton = new Button(maputoSkin, "options");
        window.add(optionsButton).pad(10, 0, 10, 0).row();
        optionsButton.addListener(listener);
        // + leaders button
        leadersButton = new Button(maputoSkin, "leaders");
        window.add(leadersButton).pad(10, 0, 10, 0).row();
        leadersButton.addListener(listener);
        if (Constants.DEBUG_FLAG_MENU_SCREEN) window.debug();
        window.pack();
        window.setPosition(Constants.VIEWPORT_GUI_WIDTH / 2 - window.getWidth()/2,
                           Constants.VIEWPORT_GUI_HEIGHT/2 - window.getHeight());
        return window;
    }

My questions

I. How can I get rid of the title bar

II. How can I set my own background instead of libgdx default

III. Is this approach correct for third kind of situation?

Answer 1

My approach was using the table instead of window and define its background as ninepatch drawable from the skin

    Skin skin = SkinManager.getInstance().getSkin();
    final Table outerTable = new Table();
    outerTable.setFillParent(true);
    stage.addActor(outerTable);

    // Layer to hold the buttons and dark background
    Table buttonsTable = new Table();

    playButton = new TextButton("Play", skin, "play");
    settingsButton = new TextButton("Setting", skin, "setting");
    highScoreButton = new TextButton("Leaders", skin, "leaders");

    buttonsTable.add(playButton).width().height().pad();
    buttonsTable.row();
    buttonsTable.add(settingsButton).width().height().pad(0);
    buttonsTable.row();
    buttonsTable.add(highScoreButton).width().height().pad();
    buttonsTable.row();
    // + background color
    buttonsTable.setBackground(controlsBackground);

    // Adding button table to outer table
    outerTable.add(buttonsTable).colspan(2).expand();

I leave width() height() and pad() empty because they depend on the size of your world. And one thing

controlsBackground = new NinePatchDrawable(new NinePatch(
                SkinManager.getInstance().getSkin().getRegion("menu-background"), 10, 10, 10, 10
        ));

Answer 2

com.badlogic.gdx.scenes.scene2d.ui.Window comes with a constructor: Window(java.lang.String title, Window.WindowStyle style) and there is also a setStyle(Window.WindowStyle style) method. The Window.WindowStyle class allowes you to define styles for this window including background. (https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/Window.WindowStyle.html)

As for title bar according to libgdxs doc a window is a:

"A table that can be dragged and act as a modal window. The top padding is used as the window's title height.", I did not find any direct way to get rid of the title bar, but if you extend window class you can override some of it functionalities to achive the desired result. Check out its source: https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/scenes/scene2d/ui/Window.java

To answer the third question you have to provide more information, what you mean in this situation?

Answer 3

private Table buildControlsWindowLayer() {
        SpriteDrawable bgDrawble=new SpriteDrawable(new Sprite(createTexture(120, 400, Color.BLACK, 1)));
        WindowStyle windowStyle=new WindowStyle(new BitmapFont(), Color.GREEN, bgDrawble);
        Window window = new Window("", windowStyle);
       // window.setWidth(0);
        // + play button
        SpriteDrawable upDrawble=new SpriteDrawable(new Sprite(createTexture(100, 40, Color.RED, 1)));
        SpriteDrawable downDrawble=new SpriteDrawable(new Sprite(createTexture(100, 40, Color.RED, 1)));
        SpriteDrawable cheDrawble=new SpriteDrawable(new Sprite(createTexture(100, 40, Color.RED, 1)));
        TextButtonStyle btStyle=new TextButtonStyle(upDrawble, downDrawble, cheDrawble, new BitmapFont());
        TextButton playButton = new TextButton("play",btStyle);
        window.add(playButton).pad(10, 0, 10, 0).row();
        //playButton.addListener(listener);
        // + options button
        TextButton  optionsButton = new TextButton( "options",btStyle);
        window.add(optionsButton).pad(10, 0, 10, 0).row();
       // optionsButton.addListener(listener);
        // + leaders button
        TextButton  leadersButton = new TextButton("leaders",btStyle);
        window.add(leadersButton).pad(10, 0, 10, 0).row();
        //leadersButton.addListener(listener);
       /// if (Constants.DEBUG_FLAG_MENU_SCREEN) window.debug();
        window.pack();
       // window.getTitleTable() ;
        return window;
    }



public static Texture createTexture(int width, int height, Color col,
            float alfa) {
        Pixmap pixmap = new Pixmap(width, height, Format.RGBA8888);
        Color color = col;
        pixmap.setColor(color.r, color.g, color.b, alfa);
        pixmap.fillRectangle(0, 0, width, height);

        Texture pixmaptexture = new Texture(pixmap);
        return pixmaptexture;
    }