Android 9-patch Image Button not scaling as intended

Question

I am trying to use the 9-patch technique to create the button.

It looks almost great in the Layout Window of Eclipse

When I run it in the emulator it shows up like this:

Here is the actual PNG image

Selector XML

<item android:drawable="@drawable/splash_facebook_button" />

Button Code in Layout

   <Button
        android:id="@+id/button1"
        android:layout_width="208dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dip"
        android:background="@drawable/splash_facebook_button_selector"
        android:text="Sign up with Facebook" />

Answer 1

Looks to me like it's not treating the image as a 9-patch. Have you saved it with the .9.png extension?

Edit: Had a better look at the actual image and I don't think you've quite got it set up correctly. The bottom and right border define where the content will go (in this case you want it over to the right, with a bit of padding). The top and left define the areas that will be stretched when the image is scaled. In this case you want it to be areas of constant blue that get stretched, rather than the logo. I've updated the image with an example of how to do this:

This works for me!