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

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?

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.