9-patch image blurred with border

I've an image.jpg that i have edited in GIMP to change to a png. I have uploaded the png to the Android Assets Studio to make a 9-patch. This works ok.

Android Assets Studio

I'm wanting 2 versions of the same image. This is because the image is used for a button, so when the user clicks the button it is reduced in size(like when you launch an app).

The problem is when i try to create the 2nd image, i scale it down by 20% in GIMP then run it through the assets studio. I have have both images in the res/drawable folders under the correct densities L - XH dpi. When the user clicks the button the scaled version has a black border around it and it seems blurred.

How can i scale and create a 9-patch correctly.

Thanks in advance.

normal state

button pressed(scaled png)

[edit]

here is the original png.

enter image description here

Solution

Your black bars got messed up when scaled. If you look closely at the image, you can see that there are some semi-transparent pixels at either side of a couple of them. Make sure that every non-black pixel is perfectly transparent(alpha 0).

Also, as a side note, your stretch areas(left/top bars) don't see right. Currently, it will stretch only the center of the globe, which is probably not what you want.