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?

Answer 4

Since the original problem is not solved yet: You may split your image up into two layers, one NinePatchDrawable for the stretchable part and a solid one (centered) for your static image. Then just use a LayerDrawable to draw them on top of each other. Here is a good example of how to use the appropriate <layer-list> tag. That's how to do it the right way. ;-)

Answer 5

Split the original image in two and use those.

Answer 6

That image above looks fine, and the preview shows it's seemingly ok.

What's the error message from the device when you try to use it?

Are you sure that every pixel on the edge is either entirely white or black?
Even the slightest of transparency on the edge can upset Android.

---

Edit:
Ah ha, the error message reveals the problem.
Only the top edge of the image determines which areas will be stretched.

Remove the black pixels on the bottom edge, assuming this is just a grab bar that will have no content (e.g. text) inside it.

Otherwise, just fill in the central gap in the bottom edge, so that text content can be displayed in the purple area.

Answer 7

Review all borders ... Two in top and left (will be scaled) and 1 for right and bottom (will not be scaled).