Using BitmapShader in Android

Recently I had to implement some custom UI controls for one of our customers, and some of these controls involved drawing Bitmaps with rounded corners.
Android provides a handy approach to this problem, all the magic can be done with a little help from a class named BitmapShader.

With BitmapShader you can draw bitmaps in any shape and even more, here’s an example:

bitmap-shader-01

What BitmapShader does is basically providing a pixel source to a Paint object, when you draw something on a Canvas you have to specify the Paint instance that will be used to paint your stuff, if that Paint is bound to a BitmapShader you’ll get your stuff painted using the Bitmap that the BitmapShader was created with.

Here’s how to create a BitmapShader object:


  private Bitmap mBitmap;
  private BitmapShader mShader;
  
  // ...

  // Load the bitmap "cover.png"
  mBitmap = BitmapFactory.decodeResource(getResources(), 
                                         R.drawable.cover);
  // Create the shader
  mShader = new BitmapShader(mBitmap, 
                             Shader.TileMode.REPEAT, 
                             Shader.TileMode.REPEAT);

With the BitmapShader in place you can now draw anything you want using a Paint which is bound to the shader, the binding can be achieved with the setShader() method of the Paint class:


  private Paint mPaint;

  // ...

  mPaint = new Paint();
  mPaint.setStyle(Paint.Style.FILL);
  mPaint.setAntiAlias(true);
  mPaint.setShader(mShader);

Now everything is in place and you can start drawing your Bitmaps, following is a list of what I did in the example screenshot above and the code I used to achieve each sample, also note that in order to draw on a Canvas I created a custom View subclass and I added the drawing code inside the onDraw() method, in a real scenario however try to avoid allocating stuff inside the onDraw() method.

Rounded corners

all-rounded

  float[] radii = new float[]{ 50, 50,
                               50, 50,
                               50, 50,
                               50, 50 };

  mRoundShape = new RoundRectShape(radii, null, null);
  mRoundShape.resize(mBitmap.getWidth(), 
                     mBitmap.getHeight());

  mRoundShape.draw(canvas, mPaint);


Bottom corners rounded

bottom-rounded

  float[] radii = new float[]{  0,  0,
                                0,  0,
                               50, 50,
                               50, 50 };

  mRoundShape = new RoundRectShape(radii, null, null);
  mRoundShape.resize(mBitmap.getWidth(), 
                     mBitmap.getHeight());

  mRoundShape.draw(canvas, mPaint);


Top corners rounded

top-rounded

  float[] radii = new float[]{ 50, 50,
                               50, 50,
                                0,  0,
                                0,  0 };

  mRoundShape = new RoundRectShape(radii, null, null);
  mRoundShape.resize(mBitmap.getWidth(), 
                     mBitmap.getHeight());

  mRoundShape.draw(canvas, mPaint);


Circle

circle

  mOvalShape = new OvalShape();
  mOvalShape.resize(mBitmap.getWidth(), 
                    mBitmap.getHeight());

  mOvalShape.draw(canvas, mPaint);


Narrow oval

oval-narrow

  mOvalNarrowShape = new OvalShape();
  mOvalNarrowShape.resize(mBitmap.getWidth() / 2, 
                          mBitmap.getHeight());

  mOvalNarrowShape.draw(canvas, mPaint);


Wide oval

oval-wide

  mOvalWideShape = new OvalShape();
  mOvalWideShape.resize(mBitmap.getWidth(), 
                        mBitmap.getHeight() / 2);

  mOvalWideShape.draw(canvas, mPaint);


And that’s it, hope this will be useful.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: