views:

325

answers:

6

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:

alt text

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
A: 

Split the original image in two and use those.

apa64
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
OneWorld
A: 

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.

Christopher
Added the error message above.
OneWorld
+3  A: 

I believe your issue is that you're splitting the content area into two pieces which is not allowed. The left and bottom borders are treated differently by the tool than the top and left 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.

alt text

colithium
show how u would draw the 9patch. I uses warrenfaith answer
OneWorld
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.
colithium
Added an image..
colithium
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 http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch carefully enough.
OneWorld
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 :)
colithium
+1  A: 

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.

WarrenFaith
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.
OneWorld
true... looking forward to your solution!
WarrenFaith
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.
colithium
"He" solved it, see below ;) Thank u Warren!
OneWorld
please mark your answer to help other guys
WarrenFaith
must wait until tomorrow to do this...
OneWorld
+1  A: 

alt text

9-Patch PNG without the grabber

alt text

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?

OneWorld
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!
OneWorld
I'm curious to know if you took my suggestion? I'm almost certain you can accomplish what you originally wanted really easily.
colithium
see comment at ur post
OneWorld
This answer is also good, but better use the one from colithium.
OneWorld
+1  A: 

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

mreichelt