how does a 9patch png work in android apps

Question

In a 9patch png, there are black edges in its four sides, but there is usually difference between the left to right, and the up to down side. Why? How does this difference impact?

Letterhead

Answer 1

One of simplest ans is

draw the black line according to your requirement using nine patch tools.

Celenacelene

Isn't the example a bad patch (gradient in scalable are on the sides) ? – Romeo

Answer 2

The left and top are for scaling, and the right and bottom are for content. So the black lines on left and top will scale to fit, and the content for a button will be "inside" the black lines on the right and bottom.

Largely

Your answer is still available in 10 years later. Thanks! – Playpen

Answer 3

Here http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch you can find a very good explanation, with images to show you that the left and top part of the black border indicate a stretchable section, while the right and bottom lines define the drawable area, where you can put your content.

Lues

@Adinia, so the 9patch differs from the scaling of a simple png bitmap by being able to apply these extra padding and scale regions within the image? – Amide

@Amide Yes, with a 9patch you can define yourself the scaling regions of the picture and 'protect' from scaling some parts of it, instead of scaling all the png. – Lues

@Adinia, the padding is optional; as if it is the default extra x&y points of extra space around the stretchable region? So in the environment of excessive or too little space the padding protects the image from becoming smaller? (is that correct?) – Amide

@Amide The padding is optional indeed and has no impact over the image size, but over it's content size(in the example at the link, the padding define the zone that can be occupied by the text, inside the button) – Lues