What is 9-patch image
A NinePatchDrawable graphic is a stretchable bitmap image that you can use as the background of a view. A NinePatch graphic is a standard PNG image that includes an extra 1-pixel border. It must be saved with the 9.png extension in the res/drawable/ directory of your project.
9-Patch Theory
9-Patch gets its name from the fact that the overlay created breaks the image up into nine defined regions. Each region has specific stretch properties:
Corner Regions (1, 3, 7, 9) These regions are fixed and nothing inside them will stretch.
Horizontal Sides (4, 6) The pixels in these regions will stretch vertically when necessary.
Vertical Sides (2, 8) The pixels in these regions will stretch horizontally when necessary.
Center (5) The pixels in this region will stretch in both horizontal and vertical directions equally.
Why 9-patch image
A 9 patch image is a regular png (.PNG) image which is needful for android app developers where they require to wrap any content within a background image without pixelating the background image. Usually, background images have a fixed height and width, but sometimes we may require background images that do not pixelate though stretched, this now becomes a challenge with regular PNG images.
In the below image you can clearly observe that the background image height and width varies. Then how do you handle such a situation? Do you need to create thousands of images with different heights and widths? The answer is “NO”. This situation gave way to a new kind of image which is now called a (9 PATCH) image. It is an extension of a simple png image that can be modified using a tool and append it with a different extension.
How to create a 9 patch image in Android Studio
Here’s a quick guide to creating a NinePatch graphic using the Draw 9-patch tool in Android Studio. You’ll need the PNG image with which you’d like to create a NinePatch image.
- In Android Studio, right-click the PNG image you’d like to create a NinePatch image from, then click Create 9-patch file.
- Type a file name for your NinePatch image, and click OK. Your image will be created with the
.9.pngfile extension. - Double-click your new NinePatch file to open it in Android Studio. Your workspace will now open. The left pane is your drawing area, in which you can edit the lines for the stretchable patches and content area. The right pane is the preview area, where you can preview your graphic when stretched.
- Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase previously drawn lines.
- When done, click File > Save to save your changes.
You can open an existing NinePatch file in Android Studio by double-clicking the file.
To make sure that your NinePatch graphics scale down properly, verify that any stretchable regions are at least 2×2 pixels in size. Otherwise, they may disappear when scaled down. Also, provide one pixel of extra safe space in the graphics before and after stretchable regions to avoid interpolation during scaling that may cause the colour at the boundaries to change.
Optional controls include:
- Zoom: Adjust the zoom level of the graphic in the drawing area.
- Patch scale: Adjust the scale of the images in the preview area.
- Show lock: Visualize the non-drawable area of the graphic on mouse-over.
- Show patches: Preview the stretchable patches in the drawing area (pink is a stretchable patch), as shown in figure 2, above.
- Show content: Highlight the content area in the preview images (purple is the area in which content is allowed), as shown in figure 2.
- Show bad patches: Adds a red border around patch areas that may produce artifacts in the graphic when stretched, as shown in figure 2. Visual coherence of your stretched image will be maintained if you eliminate all bad patches.
9-Patch vs Vector
In vector graphics, all sides are scale or stretch when we set it to any background whereas in 9-patch we can define which sides can scale or stretch so at runtime only those side scale which we set it to scale in the 9-patch tool.
Advantage
The advantage of using 9-patch images is that when using it as a background, for instance, the image won’t stretch and lose proportions in different screen sizes. The centre ‘patch’ will remain as is and the ‘borders’ patches will be stretched to fit the screen/view size.
