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
Related
I'm trying to make a 9 patch image to be a header of my application but it doesn't work.
This is the image:
As you can already imagine, I want only the middle (blank) part to be streched and nothing else. It works normally in eclipse screen preview but it stretches it as if it wasn't 9 patch when i run it on my device.
I've had problems like this before so I'm clearly doing something wrong with 9 patches, I looked up a lot of info and tutorials on 9 patches and I just don't seem to get it. Could someone give me a good explanation where exactly to put the black dots for it to work and why?
When you put those extra lines in an image, they work like this:
Top and Left extra lines define the vertical and horizontal pixels which will be stretchable (the intersection is called stretchable area).
Bottom and Right extra lines are optional and define the padding. In this case, the intersection is the region in which the content will be placed (the rest is the padding).
I recommend you to use the 9 Patch editor included with the Android sdk. It is called draw9patch and can be found at <android-sdk-root>/tools. You will be able to see a preview of your image with 9patch.
Links:
Draw 9-patch
NinePatch
2D Graphics - Nine Patch
I can't believe it, the next thing I tried after asking a question worked. The fact that I had TWO lines in the bottom was the problem. I just put a single line BETWEEN the images in the bottom and it worked.
Like this:
If anyone still gives me a good explanation for each of the four sides of the image (why and where should the dots be put), I will still accept that answer.
I am trying to use the card_background 9-patch that is extracted from the play store apk and I am having trouble getting the 9-Patch to place itself correctly. Here is an image of my emulator running this problem. I am trying to make the typical card view that is used somewhat commonly now but this is just one of the problems I cannot work out how to fix.
My 9-Patch card_background:
I am also pretty sure the 9-Patch is setup incorrectly as according to the 9-Patch tool in /sdk/tools the entire two areas that I am using are both bad patches but I don't know what that means so I hope one of you can help to fix this.
I modified your image, I think this works:
Your 9-patch image stretches all the white/border correctly, but it has nothing but transparency at the bottom. If you want a gray shadowy area beneath it, you need to draw it there, below the white. Just make sure you don't extend the black stretch-bar down to it, or it will stretch as well.
Go into the sdk's nine-patch editor tool after you extract the png's from the apk and put them in their respective drawable folders. The tool can either be the one inside the /tools or, even better, the direct editor in Android Studio.
Modify the stretch regions for each image to your liking until it looks like an actual card. I had the same problem, until I went back and redid the stretch regions. For some reason, the png extracted from the apk didn't save the stretch regions when extracted.
You should have a shadow automatically appear from the given images, you DO NOT need to draw it yourself. Just make sure you don't include the corners and the shadow in the stretch region. And give a little bit of slack too.
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 have been struggling for a week to run this nine patch image by adding patches to it with all case but it doesn't work , I can't figure out why ? Any suggestions are highly appreciated.
It shouldn't show black lines when I am using it.
This is the layout code where I use this image ,
<Button
android:id="#+id/answerA"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:background="#drawable/d_grey"
android:gravity="center"
android:onClick="AnswerCheck" />
--Edit--
As suggested in an answer I opened this image in ninepatch tool and below is the screenshot for the same,
Possible solutions:
Have you created 9-patch images properly? check out this site
and create 9patch image.
Do not remove .9 extension from image like sample.9.png
Do not resize image after creating 9 patch image.
Refresh-Clean-build project to apply changes you made in resource
folders
Looking at your drawing, my guess is that you have far too many patches, probably around 18 patches instead of the usual 9.
Load the nine-patch into the Draw 9-patch tool (which is in your Android sdk under tools/)
Then select > Show bad patches
Update:
Take a look at this image (taken from this technical blog)
For me at least, that's what I envisioned a 9-patch to be, that there were 9 patches in the png. In your latest drawing however from inside the draw-9-patches tool, I think I'm counting 20 patches
That being said, I'm not sure if what I'm saying is correct. If you have bad 9-patch, the tool should at least be showing you the bad patches surrounded by red lines. And so, it could be that both the blogger and myself are incorrect.
I often encountered this issue also and I usually avoid to put the back line on the very edge of the image.
Try to do it as you did it on the bottom of your image and leave at least 1 pixel on each edge without black otherwise it is not correctly rendered.
I encountered this issue on a xxxhdpi screen. Android doc says for xxxhdpi: "Resources for extra-extra-extra-high-density (xxxhdpi) uses (~640dpi). Use this for the launcher icon only, see note above." In my xxxhdpi device, the 9-patch image was displayed with the black lines borders because of that. When removing the xxxhdpi 9-patch, the display issue was fixed.
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.