NinePatch

Ninepatch, also written as 9-patch, is a technique used in bitmap scaling to allow images to grow or shrink without distorting their corners and borders. It is most closely associated with Android, where a special PNG format known as a nine-patch (.9.png) encodes stretchable and content regions within a single image.

How it works: A nine-patch image includes a one-pixel-wide border around the original artwork. The top and left borders mark the regions that can be stretched, while the bottom and right borders designate the area where content can be placed. Pixel values in the border indicate stretchable or content areas, commonly using black pixels to define regions. The final image is produced with the .9.png extension and is interpreted by the Android runtime to scale the bitmap appropriately.

Creation and usage: Nine-patch images are created and edited with tools such as draw9patch or the editor integrated into Android Studio. Once defined, they are placed in an app’s drawable resources and used as scalable backgrounds or UI surfaces, enabling consistent appearance across a range of screen sizes and densities.

History and context: Nine-patch emerged as a practical solution for scalable bitmap UI elements before widespread vector graphics support. While still supported and common in Android development, it coexists with vector drawables and other scalable assets, which offer alternatives for scalable UI elements and sharper rendering on high-density displays.

Limitations and considerations: The technique works best for simple, rectangular shapes. Complex contours or fine details can be distorted if stretch regions are not defined carefully. For modern interfaces, developers may prefer vector-based resources or other scalable image techniques, depending on the design goals and platform capabilities.