Strange black borders in 9 patch file - android

Question

I'm trying to create a 9 patch file but whenever I edit the png file and add some black lines to it, these black lines are also visible in my app. I thought they are only visible inside the program(draw9patch).

Here is a screenshot of my image inside the program:

And here is a screenshot of my image outside the program(after edit has done) :

Moreover, the image( the 9 patch file ) isn't scaled nicely. Here is a screenshot of that:

What's wrong?

Answer 1

Top and Left : represent stretchable area.

Bottom and Right : represent drawable area.

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

Answer 2

I created 9 patch images and had same black line problem. My mistake was I rename result image before pasting in res folder. So android didn't recognise that image as 9 patch.

Don't rename result image then you will get proper display in app.

Example: xxxxx.9.png (you can rename xxxxx content only)

Use as @drawable/xxxxx in layout xml.

Thanks!