How to create 9 patch in Photoshop? What is 9.png encoding? [closed]

Question

Provided utility looks bad, for example it does not allow to do "Save As", or to draw several button states with similar slicing.

Is it possible to draw 9.png in photoshop? I noticed, that generated png just contains black pixels in outer edge. Is this what is marking the slices?

What if black pixels present in two opposite edges, how does this work?

Are outer edges cut off when displayed on android?

Golda

Answer 1

Yes, I do all of my nine patches in Photoshop. Here are the basic rules for creating a 9-patch:

1. The outer 1px margin can contain only 100% black (RGB 0, 0, 0) or fully transparent.

2. The black pixels for the top margin and left margin define the stretch points, and must be either a solid line, a single point, or two separate points. If two points are defined, it will stretch equally between the two.

3. The black pixels for the bottom margin and right margin define the content area. These pixels must be one contiguous line.

4. When saving, be sure to append the .9.png extension.

Hope this helps. :)

EDIT: And yes, those will not be displayed when used in your layouts, provided it's properly formatted and you've saved it as a .9.png.

Okay, so the top would be a simple nine patch for a spinner. the lines across and down in the second image show which rows/columns of pixels would be duplicated. The blue rectangle in the second image shows the area in which Android would allow content to be placed. So text, for example, would simply wrap to stay inside this rectangle.

Hallel

And what is the difference between stretch area and content area? I suppose that 9 patch contains 3x3=9 slices where central one is for content and stretching, 4 edges are stretching 2 vertically and 2 horizontally, and 4 corners are fixed. So, only central slice it to be defined, so only two black lines sufficient. What other two are for? – Golda

The stretch area determines which rows and columns will be repeated. That is, if you select a pixel on one of the top columns, then if the nine patch must be made wider, it will simply expand that column (duplicate that column of pixels) and spread the two sides surrounding it. Same with the rows. The content area -- think of it as defining padding. If you have part of the nine patch that should not contain content (text, typically), you would not place pixels in that area. I'll try to put a graphic example up shortly. – Hallel

Okay great! I've added an example for future viewers anyway. :) – Hallel

Might be helpful, an online 9-patch image converter/generator: romannurik.github.io/AndroidAssetStudio/nine-patches.html – Waterbuck