9 Patch png not working correctly for background

I'm trying to create a background image for my app that will look sharp on all resolutions/orientations.

I'm new to android development, but I understand the easiest way to achieve this is to use 9 patch images. I thought I understood how they worked, but I can't get it to work.

I've created a background image @ 768 x 1280 which is the resolution of my Nexus 4. When I don't 9 patch it and view it on my device, it looks fine (obviously, because the resolution/orientation matches the device's):

enter image description here

So it looks nice and sharp.

But then I add the patches onto the image using the drawer9patch.bat file and rename the file to '.9.png' and this is the result:

enter image description here

Knackered!

The strange thing is: in the preview pane in the right hand side of the draw9patch tool it all looks fine....

I've also tried making the image at a smaller resolution, but the logo & text don't look sharp; they look pixelated...

I feel there must be some vital piece of the puzzle I'm missing? The area I've defined as content is being stretched?

Here is my layout code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/my_background_image_patched"
    android:padding="0px">
<!-- Login controls here --->
</RelativeLayout>

Here is my 9 patch image (which is located to the 'drawable' folder):

enter image description here

Solution

OK, I tinkered with your 9 patch.
I must say it was poorly designed (72 dpi, while it should really be 320 dpi).

So, I redesigned it (you can see I moved the black pixels) and saved it to 320 dpi (in the drawable-xhdpi folder).

It seems it scaled well at ldpi and mdpi screens (so, I guess it will also scale well at hdpi):

enter image description here

The patch I used is this:

enter image description here