Search code examples
androidnine-patch

what is different color meaning in 9 patch images


look this image

I want to understand what is this color change means?

this is only an example..i want to understand what is 9 patch for and how it works

i changed my png to 9.png and after i make some changes (this is NOT that image this only for reference )

i notice that some color is changed in images

i just want to know how to understand which color for what ? and how to use it ?


Solution

  • The black lines at the edges of the image act as a guide to the nine-patch to determine which parts of the image are scalable, and which parts need to be kept exact. The black lines on the bottom and right edge represent the fill area, basically the total bounds from which scalable areas can be selected. This is typically the length of the flat edge before the corners begin.

    The black lines on the top and left edges represent the scalable area. When the image is resized, these lines show where the image can be safely expanded and contracted while still maintaining its appearance. You'll notice that in your example image there is a small gap in the left edge - this is so the speech bubble spike is not expanded along with the rest of the bubble.

    And to answer your question on the colours, green zones show areas of the image that can resized in one dimension only (only height or width), while pink areas show parts of the image where both dimensions can be resized. The purple areas in the right-hand preview show the total space expansion.

    Radley Marx explains things a little better in this blog post.