9-patch in IntellIJ IDEA/Android Studio and Korim/Korge

24 Jul 2018

Do you know that the IntellIJ platform supports creating and editing 9-patch files?

From a normal plain image (must be PNG), if you right click it, it will create a new file with the .9.png extension, like this:

In the end what it does is to create a new image adding a padding of 1 pixel top, right, bottom and left. So the image size will be (width + 2, height + 2).

This file format is a normal image format, but at the borders there is one pixel-wide of information (transparent or solid black) about the partitioning of the image. Traditionally 9-patch images, would have only 9 parts, but this format is more flexible:

  • The TOP and LEFT border defines how segments would scale horizontally and vertically, a set of transparent pixels would mean that that segment is not going to scale, while a black set of pixels mean that that segment is going to scale when the image is growing. When shriking the fixed segments will shrink proportionally.
  • The RIGHT and BOTTOM border information is optional, but defines a single segment that sets a hint of content position, for example for drawing text inside and letting the graphic designer to decide the padding without touching the code.

So with this format, a single image includes the pixels of the image and describes the scaling segments and the content area for this 9-patch.

I have also added support to this format to Korim and Korge. So you can draw images via software and hardware in bitmaps or hardware surfaces. And I’m using it in my MMO: