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.
Related
I'm using a 9-patch file for a button background, and while the draw9patch tool validates the file, in Android Studio it renders with artifacts and cropping. I'm not sure if this is a bug in Android Studio or a mistake in my 9-patch. Here is the code for the button, if it helps.
<ImageButton
android:layout_width="fill_parent"
android:layout_height="40dp"
android:id="#+id/imageButton"
android:layout_weight="1"
android:src="#drawable/tool_panel_share_icon_default"
android:baselineAlignBottom="true"
android:background="#drawable/view_type_button_background_left_default"
android:scaleType="fitCenter"
/>
Here's my 9-patch:
this is what I think it should look like on the button:
but this is what I'm actually getting ( the bottom line is a 26% transparency over a dark background ):
you can see that there is an errant black line on the left, and the black line that should be on the right is apparently cropped.
Update:
Here is the actual 9-patch file, what I posted earlier was a screen shot of the file, for the sake of seeing the fine details.
Update2:
Ok, I figured out how to make it display correctly, but I still don't understand the reason for the initial failure. I realized that if I place the top marker next to the off-black line that is part of the 9-patch content, it fails; however, if i move it 1 pixel to the left it renders correctly.
Works:
Fails:
Here is the new 9-patch and a screenshot of the successful rendering:
Update 3:
I just recreated the 9-patch using the draw9patch tool and the behavior is the same.
I downloaded the 9patch png you provide, the following image is the left black dot of your png, which is not correct. The borders of the 9patch pngs should be only 1 pixel width, and could only use black as its color, which is (0, 0, 0).
Look this page for more information.
I have face the problem similar to your once.
I guess you place the nine patch image in folder with lower resolution than device.
When device try to get the image it need to scale the image up and your top marker is right at the "border" which is the gradient area .
This can result in unpredictable image after scale.
You make it too high.
Try to make it like i post.
Do you use
...\Android\android-sdk\tools\draw9patch.bat
to draw your image? It's really helpful and show preliminary result.
I am currently trying to use 9 patch pictures in my app.
The image is quite clear and work pretty well in the graphic tool provided with SDK:
Picture is like this:
and the tool seems to work fine:
Unfortunately, with such a simple layout, the rendering is bad on a device and the 9 patch does not work at all:
<TextView
android:id="#+id/platenumber"
android:background="#drawable/plate_fr"
android:layout_width="320dip"
android:layout_height="wrap_content" />
Any idea on what I am doing wrong?
EDIT:
My picture is named *.9.png
The black lines have to be totally black(RGB:#000000) and the transparent zone around black lines totally transparent.
The extention of your 9-patch image should end with .9.png or it will be taken as a normal image
Check if you have at least one black pixel on all four sides of your images.
I'm testing on HTC Desire which is a hdpi device. The problem is clear when you look at the image:
And here is how my 9-patch (made with standard 9-patch tool) looks (zoomed):
The left image is my photoshop file, and the right one is a screenshot from my device. As you can see there is a huge difference. Let's say that the shadow is not THAT important, but the blurred border looks bad.
Is my 9-patch png wrong? What can I do to achieve a nice crisp 1px solid border?
You should use 9-path tool for each png in different drawable folder. Sometimes problem is this the Android try to convert the png and blur the black lines, what cause later problem with properly displaying.
To circumvent this problem simply drop the 9 patch inside the drawable-no-dpi folder.
This allows to have one image for all densities. And android won't touch the image.
This is mostly what I do for my projects, unless I really want to have a difference between the densities. In that case, I create one 9-patch per density.
Alternate solution:
Shrink your top and left markers by 1 pixel on each side. This will ensure that scalable part does not overlap the grey border.
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
I have some large icons, which are 9patch, and have to create a smaller set for a smaller screen. If I use something like photoshop to do the resize, are they still 9patch?
I just uploaded on code.google.com a tool that does the resizing for you :https://github.com/redwarp/9-Patch-Resizer
It's really simple : just drag n drop a xhdpi 9 patch, and it'll create the lower densities (ldpi, mdpi and hdpi).
Hope it helps !
Edit : moved to github
Nine-patch image is usual .png image with 1-pixel black border (link). I think if you may edit it PhotoShop. Note that border can't be broken.
Another way is: edit source image in PhotoShop and use Draw 9-patch tool to create 1-pixel border. It includes in standard Android SDK and it is free.
No, they are no more 9patch.
Say we resize 8x8 to 4x4, there 4 Pixels from the original made to 1 pixel(simplified). So you loose much information.
When resizing from 256x256 to 255x255 the loss of information is so small, that there is a good chance for the borders to stay 9patch-compatible.
The only method to resize these images(by very small factors) is "Nearest neighbor", because all the others use interpolation of colour-values with the surrounding pixels(the black border becomes gray).
In your case of app development, i would take the time and use "the other way" from "Dmitriy_Boichenko"'s answer and do the 9patch-thing from ground up, because graphics bugs are unsightly.
you can edit 9-patch inside photoshop of course.
In fact, you can edit in any editor supporting png.
It's a simple PNG file in the end.
There is only 2 very important rules:
File extension must be .9.png
The border around the image must be one pixel wide and contain only pure black or fully transparent pixel.
There is no need to create different density if you do it well, unless you don't like the look once it is scaled up or down.
Now since you mentioned icons, I wouldn't do Icons using 9-patch.
I would create 3 different density for each Icon.
Follow the guidelines here: http://developer.android.com/guide/practices/ui_guidelines/icon_design.html