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 ?

Bala

Using a nine-patch image means it can be stretched dynamically without distortion for different screen sizes and resolutions. If you simply want to provide images of all sizes for every screen size, and density then feel free to do so but it will mean you have to create a lot more images and means a lot more work for you. – Db

So you mean with nine patch the same image works for all screens ? – Bala

No, not necessarily but it means you can reduce the number of images you produce. You need to understand that screens sizes and densities are rationalized in Android. In other words a screen size will be small, normal, large etc and a density will be ldpi, mdpi, hdpi etc. Producing nine patch images which fit those categories means they will be automatically resized by the OS at runtime. If you work with absolute pixel sizes for standard images, they may not look right depending on the device's screen size and density. – Db

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

Hagar

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

Bay

Thanks hotveryspicy ,I'm not getting your 3rd point No need to give padding programmatically, you can reserve text area in NinePatch directly.So please describe in brief . – Gonorrhea

developer.android.com/guide/topics/graphics/… had you seen padding box, your text will come in Pink Viewport. try it pratically you will get to know – Bay

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

Disciplinary

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.

Po

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.

Actinology

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

Ikhnaton

Answer 7

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.

Haubergeon

Ok, I see.. but does that means it only works when the width or height are set to match_parent ? – Bala

no it works with fixed width and height too. Assume that you use a image with 500pixels width and want to show it with 300pixels. nine-patch works there too greatly... – Haubergeon

Also dont forget the other nice feature of the ninepatch -> content window... you have a custom window frame you use as background.. of course you dont want any text to appear at the borders. Instead of moving the text right or left pixelwise, you define the area in the window which content will be shown – Haubergeon

But does nine-patch adapt the size of the image for different screen sizes or does it resize an image that you have with the screen that you want it to fit in ? – Bala

what is the difference? – Haubergeon

I mean can I take an image with its default size, and let's suppose it is too small for my screen, and I want to make it bigger so it is clearer, can I use 9 patch for that ? – Bala

No. nine patch will just sretch the part that you marked. Its not intented to do something else – Haubergeon

Another question : is nine-patch useful for background images defined in layouts ? Knowing that you cannot define the width and height for backgrounds... ? – Bala

Answer 8

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

Row