Android - How to make a background pattern combining bitmaps? - android

I know how to make a background pattern repeating a bitmap.
I also saw a way to combine two bitmaps using Canvas.
But I want to make a repeating bitmap in combination with a gradient drawable to make a background.
I have a .png file that it's partially transparent and I want to repeat it along with a gradient drawable (normal gradient XML).
This is the PNG: http://subtlepatterns.com/?p=1203
Is there a way to do this?
Thanks in advance.

You can use an XML bitmap to create a tile pattern:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/my_png"
android:tileMode="repeat" />
Then you should be able to use this as part of a LayerList drawable that also includes your gradient. Then use the layer list as the background drawable.

Related

How can I add margin to background bitmap on Android

So I would like to create a checkered effect with my bitmap. So I am using this very small pixel grey color png. I need to add a margin or padding before it's repeated but I'm unsure how to do this. Any help will be welcome as I have just started learning Android development.
What it's doing right now is repeating the entire image, filling the window with one color.
Background.xml
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/bg"
android:tilemode="repeat">
</bitmap>
In my Activity Main XML I'm including the above XML
android:background="#drawable/background"
If I understand You correct and You want to make an effect like this
Using a single grey pixel and adding margin to next before repeating, it will be much easier if You don't use:
But just a:
With a pattern like this, You can repeat an image and You will get a checkered effect.

Tile background using diamond shape?

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?

Combine background color and texture for Android view

For various Views in Android, I use a simple background color so far. But in order to make it more interesting, I'd like to add a texture or noise to the background.
Finding background patterns is easy. And making them into a tiled BitmapDrawable to be used as a background just as well:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/pattern"
android:tileMode="repeat" />
But how can I add the color now? You know, I'd like to combine the texture with a color, so that I only have the pattern of the texture and "ignore" or "drop" the color, but instead colorize the pattern with arbitrary colors from code. How is that possible?
Do I have to use the pattern as normal, but then override the onDraw() method of the view and add the color somehow? This answer talks about a BitmapShader, but I have no idea how to use that. Any help?
use Drawable.setColorFilter() method. in most cases you will use a PorterDuffColorFilter or LighingColorFilter

Which is better to use in Android, a 1px*1px .png image or a drawable .xml with a solid rectangle?

Which is better to use in Android and why?
Load a .png file that is 1x1 and has, obviously, one pixel of one color (ie #000)
Use an .xml drawable that contains a solid rectangle of the same solid color (#000)
Which is better to use in Android and why?
Use an .xml drawable that contains a solid rectangle of the same solid color (#000).
Why? Because that's the point of the XML layouts, is to enable developers to quickly make changes to visuals (in this case colors) without having to open image-editing software.
If you were to really only load a 1x1 PNG then some could argue the PNG loading is faster, but in reality, this is never going to happen. The point here is that it will be stretched or manipulated in some way, or set to tile as a background and this will eventually be slower than defining a background color or shape in Android XML Layout.
For a single color, use a color resource. http://developer.android.com/guide/topics/resources/more-resources.html#Color This will be more performant than a 1x1 stretched image or an xml drawable.
As general performance guidelines, solid colors are the cheapest, followed by unstretched bitmaps, followed by 9-patches and stretched bitmaps. Shape drawables are usually the most expensive at runtime.
i think that png is better, because is native and take less time to load.xml is needed parser, so is a little low than png. i think, but i never tried it.
UPDATE
i make a files with these specifications, and the results are those:
png 1x1 black dot [119 bytes]
xml rectangle blac [261 bytes]
UPDATE 2
Performance wise, what is typically better, using an image or a xml created shape as a drawable?

Android gradient emboss effect

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.

Categories

Resources