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?
Related
Here is what I need to attain
The Application logo goes inside that blue background. Can I somehow tweak Linear or Relative Layout to attain that inclined bottom? Or is that any other solution to this, other than simply using an image itself?
No, Views in Android are all rectangular, and LinearLayout and RelativeLayout only deal in rectangular measurements. You're going to have to do some special drawing or use a background image or something along those lines.
I'm trying to make a callout graphic in Android. I'm not married to the idea of using a 9-patch-drawable, but I think it's the right way to go. I'm essentially trying to make a button with a little nub at the bottom. I'd like the nub to be centered regardless of the size of the content. Here are some example graphics showing what look I'm going for:
Is there a way to keep the bottom little nub centered using a 9-patch drawable?
Is there a way to keep the bottom little nub centered using a 9-patch drawable?
Yes, absolutely. As a matter of fact, a 9-patch is definitely the right way to go for this.
Just make your 9-patch have two stretchable regions: one to the left on the nub and one to the right. You'll want to make sure both regions are equally 'large'. In other words: the two horizontal black lines that define the horizontally stretchable regions should have equal length - that will make the nub stay in the horizontal center.
Here's are two examples of images that are part of the mapview-balloons library:
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.
I'm trying to layer graphics one top of each other, like an icon over a background, with the second layer (icon) at a certain pixel offset from the top left corner of first layer (background). Since each layer will eventually have its own animation, I'm placing each in its own View.
For my implementation I have two ImageViews, one for each layer, inside a RelativeLayout, which in turn is inside a ScrollView. ImageViews are positioned using layout_margin relative to the top left corner (0,0). The first ImageView is larger than the screen (background), while the second ImageView is smaller than it (icon). ScrollView automatically resizes the first ImageView (background) since it is larger than the screen, it does not resize the second since it is smaller (icon).
I need both of them to scale together, and I also need the positioning of the second layer over the first layer to adjust itself accordingly. This actually works well in a layer-list, but due to the animations I am forced to use Views. How can I scale and position multiple Views together, or do I need to build my own class for something that seems like it should be fairly basic?
Thanks in advance.
I had a similar problem in my android application. Android has introduced new set of API's to help us on this, setScaleX() and setScaleY().
Just call layout.getParent().setScaleX(); and layout.getParent().setScaleY();
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.