Android / 9-patch PNG: What, if I need smth like a 11-patch PNG?

Question

In Draw 9-patch, everything looks fine. However, my SDK says the 9-patch png is malformed. Because I have something like an 11-patch png. Because I don't want the little grabbing area to be scaled. How to get it working? The screenshot describes everything:

Error Meassage in Console:

ERROR: 9-patch image /res/drawable-hdpi/top_complete.9.png malformed.
        Can't have more than one marked region along edge.
        Found at pixel #10 along bottom edge.
ERROR: Failure processing PNG image /res/drawable-hdpi/top_complete.9.png

Answer 1

I believe your issue is that you're splitting the content area into two pieces which is not allowed. The top and left borders are treated differently by the tool than the bottom and right borders. The top and left describe what is stretchable, the bottom and right define content area (which must be contiguous).

Check the checkbox to show content area and play with it to see what I'm talking about.

Answer 2

I wouldn't split it into left and right, I would remove the == in the 9-patch and use this as a seperate image with center and bottom gravity so that is will always stay in the middle where you want it.

Just a hint: I always reduce the "scaled" part to 1 pixel width/height to get a minimized image.

Answer 3

9-Patch PNG without the grabber

XML of the Button:

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textColor="#FFFFFF"
  android:textStyle="bold"
  android:textSize="11sp"
  android:id="@+id/ButtonTop"
  android:background="@drawable/top_just_bg"
  android:drawableBottom="@drawable/top_dropper"
  android:gravity="center"
  android:paddingLeft="15sp"
  android:paddingRight="15sp"
  android:paddingTop="3sp"
  android:text="There we go! It's working... ;)"></Button>

Is the use of Padding and sp-Values alright?