How to use Nine-patch images correctly

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

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.

I have found the best and the simplest answer to make 9-patch image.

This is best link to create 9-patch image for all the resolutions - XHDPI, HDPI, MDPI, LDPI in just one click.

Let me know if you have any queries, and do upvote it, if it was helpful to you.

If you need an image which consists of a border with rounded corners, I don't have to create a 9-patch.

All you need is an XML like this stored in the res/drawable directory

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="3.0dp" />

    <stroke
        android:width="2dp"
        android:color="@color/green" />

</shape>