I'm trying to create some 9patch images that have some text as their content. I define the stretchable area with a black pixel line top and left. And I define the content area with a black pixel line right and bottom.
However, it seems as though Droid is adding padding to the top and bottom of the content area, messing my layouts up. Has anyone else experienced this?
You say you're putting a black pixel line for the top and left? For the top, you should place just a single pixel for the stretch point. For the left, you can place either one or two pixels (two if there are two separate places you would like to stretch). Let me know if I am misunderstanding you though.
Related
I have a few issues and questions regarding some UI development on Android. Firstly look at this image:
Firstly at image A) This is a image that I insert and repeat horizontally to give the zig-zag shape at the top of the screen regardless of screensize and above that a textField with no content and a background color - But as I'm sure you can is that the two colors don't match up quite as perfectly as it should even though they both have the same hex color value (#BF0426). And secondly, you can also see some serious pixelation on that zig-zag image. How do I fix these 2 problems?
And then at image B) Here I have a simple listView. What I would like to do, is firstly indent it a bit on both sides, and round the corners of the top and bottom item. So basically I want it to look like the blue border drawn on the screenshot. (Your typical iOS listView). How do I go about doing this?
Thanks in advance for any tips!
For the image. Just out of curiosity, why wouldnt you simply extend your image to include the top pixels as well? In other words, build your repeating image such that it incorporates the pixels that you are trying to create using the empty textview. This will at least take care of the color missmatch, as the color will all be generated from the same place. In terms of the pixelation. Are you truly repeating the image, or are you spreading the image. A spreading will definitely cause what you are seeing.
For your tableview:
For the left and right indent, you can simply use the margin or padding attributes of tableview item. There are generic padding and/or margin attributes (which will pad all of the top, bottom, left and right), or there are separate padding and/or margin attributes for each top, bottom, left, and right. Here is a great link on padding versus margin that you may want to read.
Difference between a View's Padding and Margin
Example attribute (as called in an XML file) for bottom margin
android:layout_marginBottom
setMargins(left, top, right, bottom) // for setting margins programmatically
Example attribute (as called in an XML file) for top padding
android:paddingTop
setPadding(left, top, right, bottom) // for setting padding programmatically
For the custom top and bottom, you should be able to use the following tutorial
http://www.softwarepassion.com/android-series-custom-listview-items-and-adapters/
From here, you should be able to detect the item as the first and last item and set the background property (image) to a background image that has a rounded top or rounded bottom. This is how I do it on the iPhone. I have also implemented things that LOOK like tableviews but are simply vertical layouts with my own custom views that I have made to look like what you are wanting.
One thing to consider is the file format you use is going to mutate the image as you save it (lossy compression), so a .jpg with a certain color may look different than a .bmp with the same color. Make sure you author using the same application and/or export settings when trying to match up images.
Also, if you created your image with a DPI that is not compatible with the android display it can cause serious pixelation in detail areas, especially with gradients and drop shadows.
The problem with rendered images is that the left side triangle isn't smooth enough. There is a bit of jagged edge on the slopes. This was found in the draw9patch tool's preview too, but couldn't tackle it so far.
Any hint regarding solution will appreciated.
This happens because you specify too wide area for the height shrink/stretch. Put just one black pixel in the leftmost pixel column (it's tricky where to put it, actually. I'd put one pixel in the very top of your image and one more - in the very bottom).
I have a nine-patch png that I'm using as a popup bubble. It looks like this:
I'm putting it in an TextView of width fill_parent so the bubble expands the width of the screen. As one might expect, the pointer at the top is then centered horizontally in the middle of the screen.
What is the easiest way to adjust the location of the pointer so that it's, say, 5/8ths of the way over from the left instead of centered?
I can re-cut the png if necessary.
UPDATE: Cubic has a very simple solution to the problem that I can't believe I missed. It works very effectively for my current problem. However, one downside with this solution is that it can't be adjusted on the fly. If I need to put the pointer in one place for one view, but a different place for another view, I need to cut two different PNGs. Is there a solution that can be adjusted at runtime?
You have a balanced stretch at the moment with one dot on each side. Can you try adding more to the left or right?
I got a transparant 9patch image which has the 9patch lines showing trough.
This is the output:
Obviously I don't want the horizontal lines to be visible.
This is how I created the 9patch:
This is the final image that is used in the application:
AFAIK the 9patch is correct. What do I need to change in order for the horizontal lines to disappear?
The unwanted lines come from the fixed (non-stretched) parts of the ninepatch overlapping. This is happening because you are drawing it at a pixel height that is smaller than the sum of the heights of the fixed sections.
As #kcoppock said above and then curiously retracted, the left hand edge should be solid black where it is vertically stretchable.
Try connecting the two dots on the left edge, making it a solid line, see if that fixes the problem. You also only need 1 dot along the top for the exact same result.
EDIT: Ignore the above, I don't know what I was thinking. Connecting the line on the left is definitely not allowed, that's my mistake.
EDIT: Ignore the above edit -- Reuben's right. :)
I don't know that it's what's causing the problem, but I noticed that along the top edge, there are some pixels that are not fully transparent (e.g. pixels(5,0) through (28,0) are a very light shade of gray) likely due to some bleeding over of the anti-aliasing of the shape. Try flattening the image, and erasing all the outermost pixels, other than the black pixels, of course. That should only cause a compiler error, though, it shouldn't cause that sort of an artifact. I wish I could test it myself right now but I can't.
In a 9patch png, there are black edges in its four sides, but there is usually difference between the left to right, and the up to down side. Why? How does this difference impact?
One of simplest ans is
draw the black line according to your requirement using nine patch tools.
The left and top are for scaling, and the right and bottom are for content. So the black lines on left and top will scale to fit, and the content for a button will be "inside" the black lines on the right and bottom.
Here http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch you can find a very good explanation, with images to show you that the left and top part of the black border indicate a stretchable section, while the right and bottom lines define the drawable area, where you can put your content.