How to overlay a bitmap over another

Question

I have tried the solution suggested here Android: How to overlay-a-bitmap/draw-over a bitmap?. I seems to work but I obtained a slightly disoriented image from it.

before-overlay

after-overlay

I have set my edit icon to toggle between start and stop drawing on canvas. When the user stops drawing, I retrieve the canvas bitmap and the imageView and overlay canvas bitmap on the imageView. As can be seen from the screenshots, the imageView is the laptop image and canvas bitmap is the up arrow I drew. Here is my overlay function.

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;
    }

I am new to android and would appreciate some help in this regard. Thanks!

SepJaPro2.4 · Answer 1 · 2016-11-19T12:50:26.197

3

i think you can use something like this to achieve what you want :

Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG);
Canvas result = new Canvas(underlayBitmap);
result.drawBitmap(overlayBitmap, left, top, paint);

you can give the top side and left side where you want your overlay to be drawn.

hope this helps.

edited Nov 19 '16 at 12:50

answered Nov 19 '16 at 12:16

SepJaPro2.4

704
9
19

The thing is I am not sure what should be `left`, `top` and `paint` values. I read the documentation but couldn't figure this out. I want to overlay `bmp2` on `bmp1` – Sam Berg Nov 19 '16 at 12:23
first you should get canvas from the bmp1 ( bottom layer ) then use that canvas.drawBitmap(bmp2,0,0, – SepJaPro2.4 Nov 19 '16 at 12:27
What needs to be passed as `Paint`? – Sam Berg Nov 19 '16 at 12:30
and for Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG); – SepJaPro2.4 Nov 19 '16 at 12:30
for top and left floats you can give the position of top left corner where you want bmp2 to be drawn ;) – SepJaPro2.4 Nov 19 '16 at 12:31
i guess that bmp2 has bigger size than the picture because of your device density ...try giving top left positions to draw bitmap see if it goes out of the frame ? if true you can scale the bmp2 to be smaller ... – SepJaPro2.4 Nov 19 '16 at 12:48
I tried this `Canvas canvas = new Canvas(bmp1); Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG); canvas.drawBitmap(bmp2, left, top, paint); return bmp1;` but unfortunately it had the same output. – Sam Berg Nov 19 '16 at 12:54
1

I believe the problem is that `bmp2` is being scaled (see screenshots). From the docs of `drawbitmap`, _If the bitmap and canvas have different densities, this function will take care of automatically scaling the bitmap to draw at the same density as the canvas._ – Sam Berg Nov 19 '16 at 12:56
How can I scale `bmp2` to smaller scale? – Sam Berg Nov 19 '16 at 12:57
scale your bmp2 before overlaying it on bmp1 like this : overlayBitmap = Bitmap.createScaledBitmap(overlayBitmap, destWidth, destHeight, false); hope this helps :) – SepJaPro2.4 Nov 19 '16 at 12:59
where you get bmp2 before calling your overlay method i think that because thats something which is drawn its based on your devices density but your bmp1 is the same size and as the pictures show it has lower density so when trying to overlay them makes bmp2 larger to be in the same scale as bmp1 – SepJaPro2.4 Nov 19 '16 at 13:03
1

Thank you so much :) That was it! Scaling was the issue. I guess the docs are always right :) – Sam Berg Nov 19 '16 at 13:19
1

great ;) happy to help :) – SepJaPro2.4 Nov 19 '16 at 13:21

score 1 · Accepted Answer · answered Nov 19 '16 at 12:05

1

The most easier way to do that without go deeper with graphics libs is using FrameLayout, with this layout you can place one view above the other in order as they are added to the layout, example:

<FrameLayout>
   <ImageView android:id="@+id/imageView1" />
   <ImageView android:id="@+id/imageView2" />
</FrameLayout>

In example above imageView2 will overlap imageView1, this is so far the fastest way to overlay one image with another. This approach allows to place any descendant of View above another one.

answered Nov 19 '16 at 12:05

ararog

1,092
10
18

But after overlaying, I need to create a .jpg file with the overlayed bitmap. – Sam Berg Nov 19 '16 at 12:08
It may help you to create the jpg from FrameLayout: http://stackoverflow.com/questions/35810630/creating-image-from-view or http://stackoverflow.com/questions/3095080/create-image-from-view-screen-in-android – ararog Nov 19 '16 at 12:14
@ ararog Yes, that could be done but I would like to achieve the best possible design. I went ahead to read the docs for canvas but can't figure out what needs to be passed as `top`, `left` and `paint`. (checkout the solution by SepJaPro2.4) – Sam Berg Nov 19 '16 at 12:28
yes you should use frame layout and after that you may take screen shot programatically – Developine Nov 19 '16 at 14:12
1

@HammadTariq Yeah, you're right. I tried both the answers and this is by far the best, and most advised approach. Thanks! – Sam Berg Nov 19 '16 at 22:22

How to overlay a bitmap over another

2 Answers2