How to use Nine-patch images correctly

Question

I want to create some kind of row image that looks like that

but I want it to scale with the screen size and density. So reading this http://developer.android.com/guide/developing/tools/draw9patch.html and this http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch I startet creating a Nine-patch image.

But when I import it and use it in my android project it looks like that

As you can see the little black line that was drawn with the draw 9 patch tool is still visible. Why?

Here is the 9.png image

Answer 1

Are you using the draw9patch tool that comes with the sdk? it is quite handy.
Anyway:

• It is vital that every pixel except the black ones are completely transparent.
• The black pixels should be at the absolute top/bottom/left/right of the image.
• The image should be named filename.9.png.