Utility of android nine patch

Question

I would like to know why do we use nine-patch ? I know is to shrink or stretch images but if I want to resize an image can't we just do it on a dedicated image editor like gimp for example ?

Answer 1

What is 9-Patch?

9-Patch images are stretchable, repeatable images reduced to their smallest size; users draw a right and bottom, solid black 1 pixel border to tell the system how to place the content within the image.

The 9-Patch is a PNG image with an added extension to the file name (filename.9.png), which allows the Android system to determine how the image can be stretched and contorted to meet the specific layout constraints.

The Android operating system reads the borders of these images to understand how to properly stretch the image itself and the content within the image such as text and effects.

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 region will stretch vertically when necessary.

Vertical Sides (2, 8) The pixels in these region will stretch horizontally when necessary.

Center (5) The pixels in this region will stretch in both horizontal and vertical directions equally.

here is Google docs

Answer 2

Nine patch image is very useful because it reduces your resource and one can maintain the curve shape which get stretch in normal .png.

1. Reduces resource : One can make a small NinePatch image and can stretch it as more as he can by repeating Pixel

2. Maintained border corner even if display size changes.

3. No need to give padding programmatically, you can reserve text area in NinePatch directly.

The top and left pixel border define the stretchable area. The bottom and right, however, define the CONTENT area. If you want the padding to go away, you need to make the bottom and right bar extend all the way to the edge of the artwork (not all the way to the corner pixels, though!). Basically, the right and bottom pixel border define your padding.

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

http://www.developer.com/ws/android/programming/Working-with-NinePatch-Stretchable-Graphics-in-Android-3889086.htm

Answer 3

The advantage of using 9-patch images is that when using it as a background, for instance, the image won't stretch and loose proportions in different screen sizes. the center 'patch' will remain as is and the 'borders' patches will be stretched to fit the screen/view size.

one more and biggest advantage is memory. Same small size memory can be reused for different screen size devices.Well-designed 9-patch images are less error-prone and have high reusability. I had hard time optimizing the UI for different resolutions until I knew that Android supports 9-patch.

For padding as @hotveryspicy said you can use the padding box ( where your text button will be filled) to define your paddig values and they are defined like this:

1. padding-top: distance between the top edge of the padding box and the top edge of your button
2. padding-bottom: distance between the buttom edge of the padding box and the buttom edge of your button
3. padding-right: distance between the right edge of the padding box and the right edge of your button
4. padding-left: distance between the left edge of the padding box and the left edge of your button

Hope this will help you to have a clear idea and how important 9-patch drawable are

Answer 4

Nine-patch is used for dynamic stretching and shrinking of an image at runtime. That's the reason why it cannot be compared to statically resizing an image using an image editor.

Nine-patch is used for things like borders that dynamically size according to the content, so they have to stretch dynamically.

Answer 5

9-patch images aren't just scaled up; they're "stretched" in a defined way. The classic case is a button with rounded corners. If the button was just scaled, the radius of the corners would be enlarged too. With 9-patch images, the corners can be defined to stay the same size while the lengths of the edges are increased.

Answer 6

have you worked with css. if not then there is one property called repeat which gives you ability to repeat 1px image in to the width of 1040 and even more with out starching

9 path do the same, some time due to the different resolution of the images rather creating separate image for each phone create 9 patch image

Hope that help

Answer 7

Nine-patch allow you to strech just a part of an image, and not the whole image. It can be useful to design for example custom buttons, EditTexts, etc...

You can lean more here: http://developer.android.com/tools/help/draw9patch.html

Answer 8

Nine-patch is to do the stretching on the run time... If you use an Button with a custom background for example and say width-> fill_parent... there is a lot of different devices out there with different resolution how are you going to prepare images for all of them... you give a nine patch and its stretch on the run.