Android: how to overlay a bitmap and draw on top of the bitmap?

Question

I have three questions actually:

1. Is it better to draw an image on a bitmap or create a bitmap as a resource and then draw it on top of the bitmap? Performance wise, which one is better?
2. If I want to draw something transparent on top of a bitmap, how would I do it?
3. If I want to overlay one transparent bitmap onto another, how would I do it?

Sorry for the long list, but in the interest of learning, I would like to explore both approaches.

Answer 1

I can’t believe that no one has answered this yet! A rare occurrence on SO!

one

The question doesn’t quite make sense to me. But I will do it. If you ask about direct drawing on the canvas (polygons, hatching, text, etc.), and not about loading the bitmap and dragging it onto the canvas, this will depend on the complexity of your drawing. As the drawing becomes more complex, the required CPU time will increase accordingly. However, creating a bitmap on a canvas will always be a constant time, which is proportional to the size of the bitmap.

2

Not knowing what “something” is, how can I show you how to do it? You should be able to figure out No. 2 from the answer to No. 3.

3

Assumptions:

• bmp1 is bigger than bmp2.

• You want them both overlapping from the upper left corner.

  private Bitmap overlay(Bitmap bmp1, Bitmap bmp2) { Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig()); Canvas canvas = new Canvas(bmOverlay); canvas.drawBitmap(bmp1, new Matrix(), null); canvas.drawBitmap(bmp2, new Matrix(), null); return bmOverlay; } 

Answer 2

You can do something like this:

 public void putOverlay(Bitmap bitmap, Bitmap overlay) { Canvas canvas = new Canvas(bitmap); Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG); canvas.drawBitmap(overlay, 0, 0, paint); } 

The idea is very simple: as soon as you associate a bitmap with a canvas, you can call any of the canvas methods to draw over the bitmap.

This will work for bitmaps having transparency. A bitmap will have transparency if it has an alpha channel. Take a look at Bitmap.Config . You probably want to use ARGB_8888.

Important: check out this Android sample for different ways to draw. It will help you a lot.

Performance (in terms of memory size, to be precise), bitmaps are the best objects to use, because they simply carry the native bitmap. ImageView is a subclass of View, and BitmapDrawable contains a Bitmap inside, but it contains many other things. But this is an oversimplification. You can suggest a specific scenario for an exact answer.

Answer 3

 public static Bitmap overlayBitmapToCenter(Bitmap bitmap1, Bitmap bitmap2) { int bitmap1Width = bitmap1.getWidth(); int bitmap1Height = bitmap1.getHeight(); int bitmap2Width = bitmap2.getWidth(); int bitmap2Height = bitmap2.getHeight(); float marginLeft = (float) (bitmap1Width * 0.5 - bitmap2Width * 0.5); float marginTop = (float) (bitmap1Height * 0.5 - bitmap2Height * 0.5); Bitmap overlayBitmap = Bitmap.createBitmap(bitmap1Width, bitmap1Height, bitmap1.getConfig()); Canvas canvas = new Canvas(overlayBitmap); canvas.drawBitmap(bitmap1, new Matrix(), null); canvas.drawBitmap(bitmap2, marginLeft, marginTop, null); return overlayBitmap; } 

Answer 4

If the goal is to get a bitmap, this is very simple:

 Canvas canvas = new Canvas(); canvas.setBitmap(image); canvas.drawBitmap(image2, new Matrix(), null); 

At the end, the image will contain overlapping images and images2.

Answer 5

I think this example will definitely help you overlay a transparent image on top of another image. This was made possible by drawing images on canvas and returning the bitmap.

More details or download the demo here

 private Bitmap createSingleImageFromMultipleImages(Bitmap firstImage, Bitmap secondImage){ Bitmap result = Bitmap.createBitmap(firstImage.getWidth(), firstImage.getHeight(), firstImage.getConfig()); Canvas canvas = new Canvas(result); canvas.drawBitmap(firstImage, 0f, 0f, null); canvas.drawBitmap(secondImage, 10, 10, null); return result; } 

and call the above function at the click of a button and transfer the two images to our function, as shown below.

 public void buttonMerge(View view) { Bitmap bigImage = BitmapFactory.decodeResource(getResources(), R.drawable.img1); Bitmap smallImage = BitmapFactory.decodeResource(getResources(), R.drawable.img2); Bitmap mergedImages = createSingleImageFromMultipleImages(bigImage, smallImage); img.setImageBitmap(mergedImages); } 

For more than two images, you can follow this link , how to merge several images programmatically on android .

Answer 6

 public static Bitmap createSingleImageFromMultipleImages(Bitmap firstImage, Bitmap secondImage, ImageView secondImageView){ Bitmap result = Bitmap.createBitmap(firstImage.getWidth(), firstImage.getHeight(), firstImage.getConfig()); Canvas canvas = new Canvas(result); canvas.drawBitmap(firstImage, 0f, 0f, null); canvas.drawBitmap(secondImage, secondImageView.getX(), secondImageView.getY(), null); return result; }