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

Pallua

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.

Criticize

In your original picture, connect the bottom two line segments. That's it. Like I said, the bottom line specifies CONTENT area, not STRETCHABLE area. – Criticize

U are right. Its also working and its more robust. Now I really got it, what the right and bottom line means. I havent read developer.android.com/guide/topics/graphics/… carefully enough. – Pallua

It's an incredibly easy mistake to make. I just happened to have read that very document not too long ago. I still had to look up which side was which though :) – Criticize

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.

Disobedience

Ok, I'll look into that. I will post my success ;) @ur hint: Thats right, but only practicable if ur gradient goes only in on direction. – Pallua

true... looking forward to your solution! – Disobedience

I think he just has an error with the content area of the 9-patch (bottom and right areas). What he wants to do should be possible. And it would be much neater if he did it with a single 9-patch IMHO. – Criticize

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?

Pallua

also consider the answer of mreichelt, whcih i havent tested, because my solution worked very well. i mark my answer, because it matches the question exactly. thank u all! – Pallua

I'm curious to know if you took my suggestion? I'm almost certain you can accomplish what you originally wanted really easily. – Criticize

This answer is also good, but better use the one from colithium. – Pallua

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. ;-)

Ornate

Answer 5

Split the original image in two and use those.

Mosley

I want to use the Element "Button" and put Text, whose lenght can change, on top of this button. This button must stretch with the text until a certain width. Just now I split the image and assigned the left side to "drawable left" and the other to "drawable left". But than it doesnt stretch – Pallua

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.

Hospitable

Answer 7

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

Aglow