Android layout background xml texture

Question

I searched a lot but didn't find anything. I want to make a background for a layout , but instead of filling it with a color or a gradient I want to fill it with a texture and repeat it . I tried this but it didn't work . Can you tell me a solution.

card_texture.xml

<?xml version="1.0" encoding="utf-8"?>
    <bitmap
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/paper_texture"
        android:tileMode="repeat"
    />

card_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape

    android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color = "@android:color/transparent"/>

    <stroke android:width="2dp"
        android:color="@color/text_color"/>

    <corners
        android:radius="20dp"
        />

</shape>

card_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/card_texture" >
       <corners
            android:radius = "20dp"/>

    </item>
    <item android:drawable="@drawable/card_shape" />
</layer-list>

and this is how I use it in my Layout android:background="@drawable/card_background"

I get something like this. But I want the corners(marked with red) of the texture to be transparent and to fit in the black border

Solution 1

I called this res/drawable/bg_tile.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/tile"
    android:tileMode="mirror"
    android:dither="true"
    android:antialias="true"
/>

I use it like:

android:background="@drawable/bg_tile"

Obiously, I prepared a tile to be mirrored horizontally and vertically (most tiles make a funny effect like that) and called it res/drawable-a-dpi-resolution/tile.png

a-dpi-resolution being ldpi, mdpi, ..., xxxhdpi

If you want to use a composite background (i.e. a gradient and a tiling bitmap over it - but the bitmap has to be somehow transparent, or it will cover the gradient), you can make a LayerList background (so that different "layers" are dran one ontop of another)

To do that, you'll need to add another background file, i.e.: res/drawable/bg_radial.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <gradient
        android:startColor="#@color/bar_int_md"
        android:centerColor="#@color/bar_mid_md"
        android:endColor="#@color/bar_ext_md"
        android:gradientRadius="480"
        android:type="radial"
    />
</shape>

and finally the LayerList, which sticks them together (res/drawable/bg.xml):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_radial" />
    <item android:drawable="@drawable/bg_tile" />
</layer-list>

Note that the first item is drawn first. Next items are drawn ontop of each other, being the last one the "uppermost".

So, finally you would use this like:

android:background="@drawable/bg"

Nice!

Solution 2

to make your image corners rounded use following function:

  public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
}

in onCreate do this:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.menu)
    View rl = (View) findViewById(R.id.root);//get the reference of the layout that you set as background

    LayerDrawable layer = (LayerDrawable) rl.getBackground();

    BitmapDrawable bg = (BitmapDrawable) layer.getDrawable(1);


    Drawable d =new BitmapDrawable(getRoundedCornerBitmap(bg.getBitmap(),10));//pass corner radius
    layer.setDrawableByLayerId(1, d);
    rl.setBackgroundDrawable(d);

}