Dialog Title Does Not Fit

Question

I successfully added my own font to the default .json file and it displays, however I get some weird sizing issues. Specifically when I try to create a Dialog. This is what it looks like:
Ignore the fact that that says "and"
As you can see, the title does not fit and the button seems a bit big... This is how I create the dialog:

Dialog d = new Dialog("Error", RBResources.gameSkin);
        d.add(new Label("You cannot continue and empty game.", RBResources.gameSkin));
        TextButton b = new TextButton("Ok", RBResources.gameSkin);
        d.button(b);
        d.show(this);

This is how the skin is initialized:

gameSkin = new Skin(Gdx.files.internal("skins/uiskin.json"));

All I did to add the font was create the font with Hiero, add it to directory with the .json, and change the BitmapFont file reference from "default.fnt" to "text.fnt" (text is what I called the font).

EDIT
I tried changing the font size to 32 (before it was 48) and this is what it gives me:
The title still exceeds the boundaries of the title box. Does that mean, in the .png file containing the different button states and other Drawables, that I have to manually adjust the window Drawable to fit the title or is this a bug?

Answer 1

So what I had been thinking has been confirmed: The dialog is built with a single NinePatch so you need to adjust the size of the title bar manually within the .atlas file and .png file.

EDIT
This will basically be a little How to use a JSON file with LibGdx tutorial.

LibGdx has a very useful Class called Skin. It allows you to have a .json file along with a .atlas file and .png image to very easily define the styles used in making Buttons, TextButtons, Dialogs, etc.

LibgGdx Default Skin

1. JSON File
2. ATLAS File
3. ATLAS Image Pack
4. Font File
5. Font Image

How the JSON File Works
The JSON file contains a listing of different class types and their parameters. In this question's case we'll look at the Dialog style. Because the dialog is a subclass of Window it uses a WindowStyle (not all subclasses of other classes do this), so we have to look through the JSON file for WindowStyle.

com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
default: { titleFont: default-font, background: default-window, titleFontColor: white },
dialog: { titleFont: default-font, background: default-window, titleFontColor: white, stageBackground: dialogDim }
},

As you can see, dialog is the is the style type used for Dialogs, while default is used for regular Windows. Most of the attributes are self-explanatory, but what you need to know is that the fonts are always declared within the JSON file, at the top. You can add as many as you like, just make sure to include the .fnt file and .png image of the font within the same folder as the JSON file, and correctly reference them. You can easily make fonts using BitmapFont generators like Hiero which can be found here: https://github.com/libgdx/libgdx/wiki/Hiero. Colors are also created at the top of the JSON file, just underneath the fonts. You can create as many as you like. stageBackground is the color that will cover the rest of the stage while the dialog is shown. In this case it is dialogDim which is defined as a TintedDrawable in the JSON file. The last attribute is a reference to an image in the ATLAS Image Pack.

How the ATLAS File Works
The ATLAS file is basically a collection of references to TextureRegions within the ATLAS image pack. Many of them are self-explanatory and the rest can be understood through a bit of trial and error, but for now we'll focus on the references to the dialog box pieces. default-window references to this bit in the ATLAS file:

default-window
  rotate: false
  xy: 1, 20
  size: 27, 29
  split: 4, 3, 20, 3
  orig: 27, 29
  offset: 0, 0
  index: -1

These fields can be a little confusing and I don't understand them all either, but what you need to know is that rotate should always remain false, unless you know when it shouldn't. xy is the x and y location, in pixels of the TextureRegion within the ATLAS image pack. size is the x size and y size, in pixels. split is how the TextureRegion should be split (not applicable for all ATLAS references), you find out more about how those numbers work here: https://github.com/libgdx/libgdx/wiki/Ninepatches. orig is, as far as I know, always the same as size. offset should always remain at 0, 0 unless you have a reason of having the region be offset from the xy location at the start. And an index of -1 means that this region is within the same ATLAS image pack as the rest of the regions.

How to Use This
Now you can easily make your own modifications. Just find the style you wish to add your own to, copy the syntax of the one you want to change (or change the default directly), add your own name for it, and add your own ATLAS references. Within the ATLAS file and image pack you can also add your own regions. You can likely also add your own attributes for different classes other than styles, because the Skin class seems to be a light wrapper on top of a JSON reader that allows styles to be easily read.
I hope this was all understandable :)