A complex layout hierarchy can be an expensive and lengthy operation to instantiate in Android, usually causing the app to pause and look like it’s hung. Most of the time it’s advisable to use a mechanism that recycles elements, like a ListView, but occasionally you may find yourself requiring a custom layout where recycling won’t work. You probably won’t notice a slowdown until you exceed 100+ elements in a view, and it would be sensible to think about whether there isn’t a better solution, but if there isn’t then the idea below may help you out.

Inflating on a separate thread

In Android you can only manipulate the display hierarchy from the main activity thread. Lengthy operations on this thread block any visual update routine, giving the impression that the app has hung. Adding a view to Android is an example of something that requires the main thread. However adding a view is usually a two step process: 1) inflating the view from the resource, 2) adding the view to a parent in the display hierarchy. The second must occur on the main thread, otherwise it’ll throw an error, but the first step, inflation, can be done on another thread. This effectively halves the time the main thread spends blocked and allows you show to a progress indicator of some description. To do this break the inflation part out into a new AsyncTask, like so:

private ArrayList<View> inflatedViews;
private LayoutInflater inflater;
private RelativeLayout parentView;

private class InflateViews extends AsyncTask<Void, Integer, Boolean>
{
    @Override
    protected void onPreExecute()
    {
        // set up anything before the thread starts, like a progress indicator
    }

    protected Boolean doInBackground()
    {
        for (int i=0; i < 100; i++)
        {
            // The false at the end tells the inflator not to add the view to the hierarchy
            View myView = (View) inflater.inflate(R.layout.my_view, parentView, false);
            inflatedViews.add(myView);
        }
        return true;
    }

    protected void onProgressUpdate(Integer... progress)
    {
        // update progress indicator
    }

    protected void onPostExecute(Boolean result)
    {
        for (View myView : inflatedViews)
        {
            parentView.addView(myView);
        }
        // dismiss progress indicator
    }
}

private void runInflateTask()
{
    inflater = LayoutInflater.from(getContext());
    parentView = (RelativeLayout) findViewById(R.id.MyParentView);
    new InflateViews().execute();
}

AsyncTask is a simply way to spawn a background thread. The view inflation occurs in doInBackground, and because it doesn’t need to manipulate the display hierarchy it won’t throw an error. The onPostExecute method runs back on the main thread where it’s safe to add the inflated views. This doesn’t entirely eliminate the pause that occurs, but it significantly reduces it, and opens up the possibility of showing the user visual feedback while the background task executes.

The Android framework’s BitmapDrawable class allows you to draw a bitmap onto a view. The bitmap can be tiled which is particularly useful for creating backgrounds that work on a variety of screen sizes and dimensions.

I thought it would be an good idea to see if I could apply matrix transformations to the bitmap, while keeping it a reusable object in the Android view hierarchy. Doing so would allow you to create some interesting animations and effects. One such technique would be to apply a translation to the bitmap matrix, shifting it along either of the axis’ and creating the illusion of an infinitely scrolling background.

The MatrixBitmapDrawable

In order to change the way in which a bitmap is drawn we need to apply a matrix transformation to it. The class below extends the built in BitmapDrawable class and adds such functionality, opening up some variables in the API as well. This means you can use it in place of the original wherever you want.

package;

import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;

public class MatrixBitmapDrawable extends BitmapDrawable
{
    private float offsetX = 0;
    private float offsetY = 0;

    private Bitmap mBitmap;
    private Paint mPaint;
    private BitmapShader mShader;
    private Matrix mMatrix;

    private int mBitmapWidth;
    private int mBitmapHeight;

    public MatrixBitmapDrawable(Resources res, Bitmap bitmap)
    {
        super(res, bitmap);

        // Save reference to the bitmap and it's width & height
        mBitmap = getBitmap();
        mBitmapWidth = mBitmap.getWidth();
        mBitmapHeight = mBitmap.getHeight();

        // Set the bitmap to tile horizontally and vertically
        setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

        // The Paint and Shader objects hold the bitmap and matrix information
        mPaint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG);
        mShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        mPaint.setShader(mShader);

        // The matrix object to translate the bitmap
        mMatrix = new Matrix();
    }

    public float getOffsetX()
    {
        return offsetX;
    }

    public void setOffsetX(float value)
    {
        // Set offset and invalidate self so draw is called
        offsetX = value % mBitmapWidth;
        invalidateSelf();
    }

    public float getOffsetY()
    {
        return offsetY;
    }

    public void setOffsetY(float value)
    {
        // Set offset and invalidate self so draw is called
        offsetY = value % mBitmapHeight;
        invalidateSelf();
    }

    @Override
    public void draw(Canvas canvas)
    {
        if (mBitmap != null)
        {
            // Set matrix transformation and draw the bitmap to the canvas
            mMatrix.setTranslate(offsetX, offsetY);
            mShader.setLocalMatrix(mMatrix);
            canvas.drawRect(getBounds(), mPaint);
        }
    }
}

To use the class just treat it like any other Drawable object. The example below loads a bitmap from the resources and creates a new MatrixBitmapDrawable with it. It then sets it as the background of a view and changes the offset variable opened up in the API.

Bitmap tileBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_tile_pattern);
tileBg = new MatrixBitmapDrawable(getResources(), tileBitmap);
mainView.setBackgroundDrawable(tileBg);
tileBg.setOffsetX(20); // Offset the bitmap to the right by 20 pixels

Extending the functionality

You could add any number of matrix transformations to the class, they just need to be added in the draw() method. Remember to create a getter/setter for the variable so it can be manipulated from outside. You could use a combination of the Matrix’s pre- and post- method calls to do things like rotate, scale and skew the bitmap all at once.

Download the MatrixBitmapDrawable.java class.