I am creating a tiled background. I read may posts about using bitmap xml with repeat tile. The tile I am using is has a diamond shape. So when I do the tile there are black gaps in between the tiles.
I hope I am explaining myself. How can this be done so the whole screen is covered tiles (ie sides touching each other not only vertices)
Thank you
I am using this image
And this is the code
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/tile"
android:tileMode="repeat"
android:dither="true" />
What you want to achieve is impossible yet.
Images are always rectangle shaped. You see it as diamond just because corners of image are transparent. But it still has rectangle shape.
This is what actual image should look like,
But black corners are not visible because it has transparency set at the corners. That's why it looks like,
If your image had no transparency then your tiled background would look like,
And because of transparency at the corners it is looking like,
And what try to achieve is to overlap that blank space with diamond (because you say image is diamond shaped) which is not possible because images are always in rectangular shape.
And there's no library written yet which can ignore the alpha (transparency) of the image.
You should either use opaque image or leave the space blank in tiled background (if you use this image).
Perhaps change the way you are tiling your image? Maybe your initial image that you're tiling looks like this <> but maybe you want it to look like this >< ? It would be more helpful if you posted your image. Can you also post the code you're using to tile the bitmap?
Related
I've small (20x20) circles in my libGDX stage. I have created the texture with GIMP, and for hdpi devices it is (30x30). When I use it in my game, it looks like this, as expected.
But when I tried linear filtering with following code
textureRegion.getTexture().setFilter(Texture.TextureFilter.Linear,Texture.TextureFilter.Linear);
,The circle has for some reason gray edges:
I checked the image in GIMP and it does not have any anti-aliased pixels. The original texture looks same as the first image. Why does it occur and how could I have a smooth circle?
If minification is used then border might have to be little bigger. And to avoid gray borders syndrome, transparent border should not be color(0,0,0,0) but color of the edge with alpha channel of 0. So white edge picture would use 255,255,255,0 as border color.
EDIT
How I add border with transparent layer using GIMP :
Create Canvas with any size(Image Size in GIMP) that you want (File -> New)
Draw your Image with transparent outer border/space on a layer.
Create new Layer below your Image Layer without space/border with Colour(255,255,255,0) so that this layer become invisible.
Export your Image.
I have this image http://i.stack.imgur.com/i8Iab.png
I want to preserve the circle at the bottom of the image so I make this 9-patch
http://i.stack.imgur.com/UNWdE.png
but somehow in the mobile the circle becomes ellipse like this
i don't know why the bottom part get stretch.
Any help please, Thanks.
Because the 9 patch you created is wrong.
And unoptimized (you can make it much smaller): the upper black line should leave a transparent hole corresponding to the circle.
The black lines result in a stretched area, while the parts you leave out aren't stretched.
So, just leave the area you don't want to stretch transparent.
This is the reference site
Basically What I'd like to try is to have all of my content in an image. I looked up some stuff but what they do is always use an imageView and text. But I'd like to use it as a background image.
Can someone give me an example how this exactly works? And how will the support be for using this with different screensizes, because the content always has to stay in the image?
To clarify what I want, I added an image. The green space is a background drawn in android xml, the white is the actually image and the text should be all of my content. I'd like to keep everything in the white, even if I get more edges.
The easiest way will be to have 3 layers
Top
Mask
Content
Image
Bottom
The mask will be an imageview (in your case only the green parts with the rest transparent).
The base image can be anything, but it would make sense that it complements the masking layer.
The content will be the tricky part. You will need to figure out the bounds of the masking layer so you won't go under the mask. I would suggest centering the content.
Alternatively, if the shape will change in size or is complex I would suggest using a canvas with a clipping pattern. On Android how do I make oddly shaped clipping areas?
I have a logo image with a background gradient. However, this image doesn't fill the screen its surrounded by black bars, making it look bad. Is there anyway in android I can specify to scale the edges of the image (i.e. the last pixel on each side) and stretch that color out until it fills the screen?
It sounds like you could use a 9-Patch image to scale the edges of your background image. Take a look at the following page and see if that will help you out:
http://developer.android.com/guide/developing/tools/draw9patch.html
I am trying to achieve from code the following: (can't post images unfortunatelly)
A rectangle with rounded corners, with an emboss effect (the light comes from top left corner).
In the middle there is a circle engraved in the rectangle. Imagine a water surface, and a drop of water hits the surface. It creates a dent in the surface. That circle is also painted with some linear gradient.
The problem is I could only use the EmbossMaskFilter from Android to raise the surface, to make it closer to the user eye, but I don't know how to implement the opposite.
Anyone can help me with that?
Thank you very much.
Use a composite drawable, or drawables in layers.
To create a drawable with rounded corners and a gradient within, use something like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="10dp"/>
<gradient android:startColor="#color/gradientstart" android:endColor="#color/gradientend" android:angle="315"/>
</shape>
Create two such drawables and put them on top of each other to create the required effect.
Unless you use a pretty good number of layer-list items as a drawable you probably won't get the effect you are looking for easily with XML drawables. A better solution would be to create a 9-patch image. See how it works at draw9patch.com, which is a tool to create 9 patch images from a standard images.
NinePatch documentation: here.
In case, you still really want to use xml drawables you can still achieve the effect (although performance might take a hit) using a layer-list with multiple gradients stacked ontop of each other.