Whenever I try to add a 9-patch image to the \drawable folder in my project, I get the same error:
ERROR: 9-patch image C:\...\res\drawable\appwidget.9.png malformed.
Frame pixels must be either solid or transparent (not intermediate alphas).
Found at pixel #3 along top edge. Failure processing PNG image
C:\...\res\drawable\appwidget.9.png
The weird thing in this example is that I've got this image from the "android-g1-icon" images found in the SDK resources, so it is supposed to be OK. The same happened with any 9-patch image I've tried so far. What could be wrong?
I have encountered with same problem on Android Studio:
AAPT out(943142208) : No Delegate set : lost message:Done
AAPT err(943142208): ERROR: 9-patch image /Users/cartman/Github/UteacherAndroid/RefactorDemo/app/src/main/res/drawable-xxhdpi/nav_shabow.9.png malformed.
AAPT err(943142208): Frame pixels must be either solid or transparent (not intermediate alphas).
AAPT err(943142208): Found at pixel #1 along left edge.
This is how I resolved it: Open draw9patch tool under your Android Sdk directory
cd /Android/sdk/tools
./draw9patch
Open .9 png and save it again. Hope it helps.
This is the problem with the latest ADT that is 20.0.3. You can instead rename the *.9.png to *.png and start working.
I think this is the bug with the ADT only, since for 18.0.0 version ADT it doesn't prompt for this type of error and works fine.
The resource compiler strips 9-patches one-pixel borders away (and presumably stores the information gained from them in a more efficient way outside of the .9.png file). If you've fished these .9.png files out of an .apk, you'll need to add the border back by hand.
I had the same problem when I migrated a project form Eclipse to Android Studio.
What you need to do is, remove .9 from the image file name and then, open it in draw9patch tool (located in your /sdk/tools directory) and now, click on Show Bad Patches button on the right upper corner.
You should then see the bad pixels and areas marked in red, you need to do some work there until you have no red bad patches. For me, I just marked one pixel on the middle left edge, and one pixel on middle upper edge, and marked almost all of the right edge and bottom edge. click button again and see that you have no bad patches.
Save the file as .9.png and put it back in the res folder of your project. Android Studio should then build your project with no problem for 9 patch iamges.
In my case I mistakenly extended the black border into the top left corner. Make sure the corners are transparent.
Now there are two PNG crunchers in the Android build tool, AAPT and a Java cruncher. Both checks for malformed 9 patch images.
I've looked into the source code of the build tool. There is no option to disable compression on 9 patch image or ignore malformed ones. At least not options available to users.
So here is a simple script to replace AAPT:
https://gist.github.com/ksc91u/37513796b2cec37bb3c5
When called to compress a 9 patch image, it will simply copy the file, otherwise, it will launch the real AAPT with #ARGV.
If you are making the image using an online generator tool, then you must remove any special characters from the name for it to work.
Just for the record:
For me it turned out that this error came from a black border line on the right hand site and bottom side. So I had a black border on every side (top, right, bottom and left). Removing the redundant right and bottom line worked like a charm.
For me the problem seems to be that I created the 9 patch myself. I thought it was enough to have a 1 px border on the left and top edges, but you need to make sure that the image has a 1 px border on each edge.
Your 9-patch can be wrong.
Maybe you strip 9-patches one-pixel borders away and information gained from them is not available. Try to add a bottom line and a right line for text too. I think it will help to solve your problem.
When the error comes up it opens the image in android studio as well. All I did to fix this was extend any of the patch borders by a single drawn pixel. I re-ran and it worked. Not sure why, but I repeat tested this with several images.
I found the issue is about *.9.png files. Open and check all your 9-Patch files, make sure that all files have black 1 pixel wide border, if don't have, just click the white place and add it, then save it.
It's the only solution to my problem.
When we nine patch any image it creates a black line to its border. That border should be transparent or completely solid. If it is not, this error will come.
So the solution is to increase the width and height by two pixels. (In Photoshop increase the size of the canvas, not the image.)
I have resolved it by changing the stretch scope in Android Studio.
Related
I made some 9 patch images to use as a button, but the device doesn't recognize them.
9 patch image:
How eclipse shows it:
How my device shows it:
As you can see, the english button has two black pixels at the top and slovenian only has one. I did this to try if two pixels would work, but it still didn't.
I'm pretty sure I did everything right. Names are in the right format (name.9.png)
Your problem is that your right border is not continuous. The right border defines the padding, and must be a continuous line (or a single pixel). You seem to simply have the logic inverted, but it should be like this instead:
9-patch images have to be pre-compiled, when the one pixel border is removed and encoded to a PNG chunk. Your image is not being pre-compiled. That's why the black pixels still appear, and the image is not being correctly stretched.
Make sure your images are in one of the drawable folders, and their name ends with .9.png. If everything is right, try to clean and build your project.
I am trying to create a 9patch png for a button in Android using an image with some static text and an icon in it. I used the 9 patch tool in the sdk but when I try to use the resulting png, I get malformed 9patch errors. Here is an image of what it looks like in the 9 patch editor...
Is this scenario possible or(is it because I have too many patches) or is my issue something else?
Basically what I discovered is that although possible, there are better solutions (the one mentioned above and described in more detail below)
I ended up going with the solution mentioned in the comment above. Creating a nine patch of the background/gradient and then floating the icon on the left and putting text as a property of the button itself. Works well enough!
As noted below by the commenter, this actually is possible as long as you don't have broken lines on the right or bottom of the 9patch... So If you took my above image and just removed the two lines on the bottom right side and the right bottom, it works like a charm (I'm still going to go with the other option however)
I've made this 9-patch png and added it to the res/drawable folder:
It works nice in the example eclipse shows:
But on the emulator it looks messed up:
Why is this happening and how can I fix this?
EDIT: The border on which I've placed the black dots is white, not transparent. Not sure if that's got anything to do with it...
This probably happens because you have a small mistake with the black pixels you have set.
Try to re-cut the edges of the picture and to add the black pixels all over again.
I had this problem too once and this helped me.
if the border is white then this is your problem it has to be pure black or nothing at all.
UPDATE: Try this image:
It seems you are not saved your image with .9.png
In order to make it work do like this
save your image in the following format in your drawable folder
yourimage.9.png (not png format of your image)
Check this reference draw 9 patch
The Android SDK contains a 9-patch editing tool (draw9patch.bat) that can help you to produce and/or validate 9-patch images. Without it, it is very easy to make a mistake in defining your border.
The one-pixel border should be transparent except for the black pixels that define the various parts of the image to be treated differently during scaling.
I have been trying to change the color of the gray that surrounds my custom tabs, I have tried looking for the answer on YouTube:
http://www.youtube.com/watch?v=IfrXE2R2nqM
http://www.youtube.com/watch?v=XMWlRXfKgtY
This helped me understand the process of 9-patch files but I must be doing something wrong for this not to work.
What I have tried doing so far:
In my project I see in the "Package Explorer" I see Android 4.1, which is in ...android-sdk/platforms/android-16. I opened that with winrar, went into res/drawable-mdpi and just to see if anything would change I replaced "tab_selected.9.png" and "tab_selected_v4.9.png" with the image of "tab_pressed.9.png". I then tried to compile my project just to see the same gray for the background of my tab buttons.
The current android project I am working on I placed the changed "tab_selected.9.png" and "tab_selected_v4.9.png" inside of my drawables folder and tried running it just to see the same thing.
Does anyone know what I am doing wrong, am I not compiling something or do I need to mess with different .9.png files? Or does anyone have a simple process just to change the gray color of these tabs? I guess the quick answer for me here is what would I have to do to get the image of "tab_pressed.9.png" to replace "tab_selected.9.png"
EDIT:
tab_selected.9.png
tab_pressed.9.png
Make sure the only pixels in the border are the 9-patch ones, either black (#f000 in ARGB) or fully transparent (#0000).
It's a normal to left some pixels with some transparency on those pixels that gets unnoticed at simple view.
This is a little tricky. Sometimes the stuff like the grey can creep in from the underlying Android layer. Sometimes things like tabhost have views that have to be overridden. I remember having to maek a selector drawable in XML to get the tabhost to work with custom items.
I just made a nine-patch
it is saved like border.9.png from the draw 9 patch tool.
in my android layout editor, it shows up like it is going to be a proper 9 patch graphic, stretched out yet not pixelated.
yet on a real device, it just shows a giant stretched image, with the 9patch guides seen, it looks really bad
whats going on??? and how do I fix it
my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/border"
android:orientation="vertical"
android:padding="35dip" >
I just had the same issue : everything worked fine in Eclipse but all where streched on the device.
I solved it by opening the PNG in the Draw 9-patch tool.
Just open the png and save it et voila !
You can find all the necessary information how to create a 9.patch here
Your background should be like this
Note: the markers to the bottom and right need to be drawn as complete lines, not single dots.
Edit
Seems that uploading the 9.patch here becomes altered, and cannot be used as a 9.patch anymore. You can download the functional version from here
This looks like invalid 9.ptach file to me. There should be solid regions at the bottom and on the right side.
As a last resort, whenever you're having a tough time getting a 9 patch to be recognized as such, I find it's always best to just make a BRAND NEW image file in your imaging software, copy all except the 4 1-pixel borders of your original image, then paste into your new image file. Sometimes no matter how much you delete away the 4 edges, the device/emulator still can't recognize it as a 9-patch, even though (and this should probably be of concern to the Android SDK dev team) it's a perfectly fine 9-patch in Eclipse's Graphical Layout.
Also note, black lines on the right and bottom edges are optional. They specify "padding", in particular the region where the content (the child of the parent with the 9-patch background) fits.
It took me some hours to figure out, why my nine patch didn't render right.
The reason was quite simple. My nine patch image was stored under:
/res/drawable
instead of
/res/drawable-xxx