I have original of this in SVG form
https://drive.google.com/file/d/0BzqAeDSZdzF4WE9vRVZnTVZSRzQ/view?usp=sharing
Second SVG
9 patchs left
9 patch right
I rarely ask questions here. But, maybe someone happens to know a quick fix for this. Should I remake the image or shadow? I rather not to trial and error if it's possible to find an answer. on the right there is a perfect shadow effect like wanted.On the other hand, on left I have this dark grey which doesn't produce a relaible shadow effect. I checked few answers here and did not see any solution. I also don't understand why the right side is good and left side is bad. Maybe it is with the 9 patch quality?
I tried the RGB 8888 and other suggestions from SO and they did not resolve this issue.
P.S.
tried this Fully transparent activity with 9 patch corner image and it didn't help either.
Here's the ugliest example i could create on my computer:
it works well, as expected.
You can try uploading it to the Simple nine-patch generator to play with its stretching and contents to see how it behaves.
I have uploaded the demo project after implementing the same with 9 patch images provided by you. It looks fine. DO let me know if I am missing or update the same project with the problem. Demo with 9 patch
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 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 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.
Ok, I am going to building some custom tab icon images as explained in the following post. But I just need to know what size do I need to build my tab icons? I keep on guessing and then putting them in this demo and they get squashed or changed. What ratio in pixels do I need to create my tab icons so that they appear right?
SOLUTION:
I will give sandy the best answer, especially since he is the only answer at this point, and because I did eventually use a 9 patch image. But I tell you what, for someone who is new to the graphic editing game, 9 patch images were a pain in the butt to use. I eventually just download someone else 9 patch image then edited the image for what I needed. If you look at my other question here. You can see the image I use as the background behind example 1 and example 2 are 9 patch images. And that works great because everything looks perfect when you move it to landscape mode as well.
You need to create a 9 - patch image.. for more see here
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