Android: Drawing tiled bitmaps with bottom or some other alignments similar to css background-position

Question

I want to set a background of a View with a tiled bitmap, but the tiling needs to be anchored to the bottom-left, instead of the top-left corner (the default). For example, if the tiles are the smiley faces below, I want it to be tiled like:

enter image description here

Using xml drawables I could achieve either tiling (using tileMode="repeat") or bottom positioning (using gravity="bottom"), but combining both is not possible, even the documentation says so:

android:tileMode

Keyword. Defines the tile mode. When the tile mode is enabled, the bitmap is repeated. Gravity is ignored when the tile mode is enabled.

Although it's not internally supported, is there any way to achieve this, perhaps using custom views?

Dheeraj Vepakomma · Accepted Answer · 2012-03-22T07:14:13.940

Another way would be to extend BitmapDrawable and override the paint() method:

In this method we avoid creating a new bitmap having the size of the view.

class MyBitmapDrawable extends BitmapDrawable {
    private Paint mPaint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG);
    private boolean mRebuildShader = true;
    private Matrix mMatrix = new Matrix();

    @Override
    public void draw(Canvas canvas) {
        Bitmap bitmap = getBitmap();
        if (bitmap == null) {
            return;
        }

        if (mRebuildShader) {
            mPaint.setShader(new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT));
            mRebuildShader = false;
        }

        // Translate down by the remainder
        mMatrix.setTranslate(0, getBounds().bottom % getIntrinsicHeight());
        canvas.save();
        canvas.setMatrix(mMatrix);
        canvas.drawRect(getBounds(), mPaint);
        canvas.restore();
    }
}

It can be set to the view like this:

view.setBackgroundDrawable(new MyBitmapDrawable(getResources().getDrawable(R.drawable.smiley).getBitmap()));

Another way without matrices: canvas.save(); canvas.translate(0, getBounds().bottom - getIntrinsicHeight()); canvas.drawPaint(mPaint); canvas.restore(); — Randy Sugianto 'Yuku', Mar 30 '12 at 22:39

score 1 · Answer 2 · answered Mar 21 '12 at 08:41

1

Just a thought, and it's pretty roundabout, but could you flip your image vertically, and then apply a transform to your background to flip that vertically as well?

answered Mar 21 '12 at 08:41

Hounshell

5,321
4
34
51

score 1 · Answer 3 · answered Mar 21 '12 at 23:59

Using a custom view might involve handling all the drawing yourself, not just the background image.

Instead, I propose to set the view's background programmatically as shown:

// This drawable refers to an image directly and NOT an XML
BitmapDrawable smiley = (BitmapDrawable) getResources().getDrawable(R.drawable.smiley);

// Create a new bitmap with the size of the view
Bitmap bgBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bgBitmap);

// Translate down by the remainder
Matrix matrix = new Matrix();
matrix.setTranslate(0, view.getHeight() % smiley.getIntrinsicHeight());
canvas.setMatrix(matrix);

// Tile the smileys
Paint paint = new Paint();
paint.setShader(new BitmapShader(smiley.getBitmap(), TileMode.REPEAT, TileMode.REPEAT));
canvas.drawPaint(paint);

view.setBackgroundDrawable(new BitmapDrawable(bgBitmap));

Points to consider:

I'm not sure if view.getWidth() & view.getHeight() are the correct methods to get the dimensions.
What if smiley size is bigger than the view?

I think it's best to avoid creating bitmap of size same as the view, since on a Galaxy Nexus, it will create a ~4 MB bitmap, and the RAM limit for applications will be drained up quickly. — Randy Sugianto 'Yuku', Mar 22 '12 at 05:33
@yuku, You're right. So I provided [another answer](http://stackoverflow.com/a/9815462/165674). — Dheeraj Vepakomma, Mar 22 '12 at 07:09

Android: Drawing tiled bitmaps with bottom or some other alignments similar to css background-position

3 Answers3

Linked