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.
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 am wondering what would be the best practice for android. To draw or to load an image?
For example I want to have a circle that is green filled with the text 25 in it.
-Should I have it in .PNG image file and just load it to the imageview placeholder when I need it?
OR should I load it in Java (by determining the position in java and load it from my res folder)?
OR Should I draw it (draw a circle, fill color, add text field inside)?
On another note, to have a checkmark, what do advise me to do?I don't even know how to draw that
I really need your help in this
Thank you so much
I'd actually argue that there is a single right answer. You should use a shape with a set color and text view inside it. It is easy to do what you've described in xml, see: Oval Gradient in Android for an example (there are a number if you google for android shapes). This will be less CPU/memory intensive than loading a bitmap, and more importantly, it will work for and look good on every screen size. As an added bonus of the user has changed their default font sizes, a textView/shape can respect that and a static image can not. Just set the background of your TextView to be the shape drawable (either in xml or programatically).
To get a bitmap to look good on multiple devices (a must for android development) , you will need a number of different versions of the same bitmap at different resolutions (XHDPI, HDPI, MDPI... etc).
Check marks are harder because they don't conform to a standard shape. Those you probably will have to make pngs for.
It depends on what you want to do.
Rendering a bitmap will be faster, but you cannot manipulate it after it is drawn.
So, for your case, you have a green circle with 25 written it. Do you also need a green ball with 23 and another with 24 in it? What about other colors?
It really depends on the amount of variation you need. At a certain point the overhead of using dozens of images will not be worth the evert of drawing to a canvas. Or, depending on how complex the images are, it will be.
The question is not "Which is better?", but instead, "Which is better for what I need to do?"
I'm not an expert on Android development but after seeing your question I have done a bit of reading and came across this article on displaying images with android that is relevant and includes some code to possibly help you out. http://www.javacodegeeks.com/2011/07/android-game-development-displaying.html
As for your image of a check mark, why dont you just go into photoshop or paint and use the line tool to draw a checkmark and then fill it in with color and save it as a .png perhaps?
iam stuck with the creation of a nine patch for a progressbar background.
It has a repeating pattern like a ruler-scala and that given me headache.
here is a image of what i want(at the bottom) and what i have (top).
can someone give me a hint how to acomplish my goal?
edit: or is it generelly possible to do this with a 9patch?
my other attempt was to make a with android:tileMode="repeat" but there i get problems with the height of my image (repeating in the second line), i need something like repeat-x.
Thanks in advance
edit2: ok i managed to do my repeating 9patch by stretching the whole repeating pattern, but its not ideal :(
You seem to be overestimating the power of 9-patches. The most you could do is have a ruler image with expanding space between the ticks. You can't, however, make a 9-patch that automatically tiles parts of your image.
On the other hand, if you create a BitmapDrawable programatically, you can set the tile mode separately for the X and Y axes.
I used to do this in my webview project using border image which provides both options (repeat, stretch, fill).
As webview has kind of it's own problems in android (mostly fixed element) I decided to be more android for the next project and I found out that it's not possible to have the repeated border using 9Patch. It's so awkward as it's needy but not implemented.
In a word android development area makes me crazy, one option here one option there is a usual thing here.