Libgdx Table Background Ninepatch

Finally managed to properly set a background for my table :). Had to learn about ninepatch a little but it finally worked out, here is step by step tutorial how to set table background in libgdx with ninepatch.

Step 1 – Create a ninepatch image

Ninepatch is simply a png image that has some black pixels in its borders. These black pixels tell us how the image will be stretched.

  1. Create a new 50×50 image in gimp or photoshop
  2. Make a round selection with the selection tool
  3. Color the selected area, if you want borders color around the selected area, save as png
  4. Open this link, upload your png image and it will create your ninepatch images, you can also make some adjustments there
  5. Here is my image if you don’t want to bother bgimg

Step 2 – Use your ninepatch image

  1. Choose any image from the zip and put it into your assets folder
  2. Use this class, use getter to add to your stage

  • choxxy

    return new NinePatch( new TextureRegion(t, 1, 1 , t.getWidth() – 2, t.getWidth() – 2), 10, 10, 10, 10);
    this did work as expected had to change it to this.
    return new NinePatch( new TextureRegion(t, 1, 1 , t.getWidth() – 2, t.getHeigth() – 2), 10, 10, 10, 10);
    Otherwise thanks for the post really helped me

    • Very nice article and Choxxy, nice find. However your correction has a typo… t.getHeigth()

      • metin

        ah thanks for the reminder, let me correct it in the post, so people can copy paste it directly 😀

  • Jared

    the link to your ninepatch image doesn’t work anymore. could you reupload it?

    • metin

      I re-uploaded the image

      • Jared

        Thank you so much!

Recent Posts

Recent Comments