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.
Related
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
Id like to have a button shaped like a cloud. A 9 patch might be unusable since every time I create large borders around my cloud image, I get warnings about "bad patches" in the 9 patch tool. Using 1px borders gives weird results too 1. When replacing my resource with the btn_default from api 4 I get expected results, ruling out xml issues.
Without using 9 patches, wrap_content seems to work no more, growing the image to 100% width regardless of content. The 9 patch used is shown below.
I wouldn't mind some distortion, as long as content does not overflow. What would be the best solution?
I am not allowed to post images yet, apparently. Please see
zip containing screenshots and 9patch
Nice question.
I think there is no way to use those images and you might need to change them, but I will leave you some tips or things I would try:
To avoid overflow you will need to define the fill area. You can try just adding a fill area but not a scale area. If this works, you will have the cloud image with the text inside it.
Remember that 9patches scale up and not down.
Here is a link with a very good explanation of how everything works.
If nothing worked so far I would ask the designer to create a new image resource with a stretchable area. For instance, having cloud shape just in the corners.
after I found out (sadly) that there is no easy way to create a simple border around a View, I was forced to use the 9-patch-image approach to get a border around my View.
So I read the short thing there is on the 9-patch and its easy enough to understand. I started the "Draw 9-patch" application that came with the Android SDK, opened up a very simple image I created in Paint and then... I got stuck.
According to the page (http://developer.android.com/guide/developing/tools/draw9patch.html) I should be able to define those areas where the image can be expanded and so on, just by clicking on the edges ("Click within the 1-pixel perimeter to draw the lines that define the stretchable patches...").
So I try to do just that and absolutely nothing happens. I try to hold down SHIFT when clicking and also do the rigth-mouse-click, and nothing happens. When I move the mouse away from the 1-pixel perimiter I get a grey-and-red "marquee" (stripes).
Bottom line is: nothing happens no matter what I do.
The tool definitely works, but make sure the image you create first does NOT have the .9.png extension. If it does, the draw9patch tool will assume the 1 pixel perimeter of your image is already setup as 9-patch. If you open an image with just a .png extension, the tool will add the 1 pixel perimeter and you will be able to manipulate it as described, and save it as 9-patch when you're done.
The 9-patch tool is a bit awkward to use, but it does work. I believe you need to left click and drag around the edge to paint the outside border.
Alternatively, you can use any image editor and create a one pixel empty border around it, and draw in the following:
Top/Left = black pixels for the area of the image that can be grown or shrunk as needed. For a typical border, it is everything except for the curved corners
Bottom/Right = black pixels for the small snippet that should be repeated if the image needs to be grown in that direction.
You must use a non-8bit png file to create a .9.png file, or it can not be edit.
In my case, I can convert a 8-bit png to 9-patch file with Android Studio successfully, but I can't edit it anyway.
When I export the origin psd to normal png file, and convert it to 9-patch file, the 9-patch borders ban be edit now!