amdroid overlay 1 bitmap to another image not getting proper output

Question

In one of my application i need to do masking( overlapping 1 image to another image)

In my app i have to load 1 image(Bitmap) to imageview then have to apply some fram to that image i have used another imageview for that... this is totally working

My problem is that.. When i am going to save the bitmap... using this pice of code

public static 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, 0, 0, null);

        ByteArrayOutputStream bytes = new ByteArrayOutputStream();

        bmOverlay.compress(Bitmap.CompressFormat.JPEG, 100, bytes);
        File f = new File(Environment.getExternalStorageDirectory()
                + File.separator
                + "test.jpg");
        try {
            f.createNewFile();
            FileOutputStream fo = new FileOutputStream(f);
            fo.write(bytes.toByteArray());
        } catch (IOException e) {
            e.printStackTrace();
        }

        return bmOverlay;
    }

i am getting this

But i need it like

This

http://myandroidtipsandtricks.blogspot.in/2012/09/drawables-part-ii.html and http://developer.android.com/reference/android/graphics/drawable/LayerDrawable.html#LayerDrawable%28android.graphics.drawable.Drawable%5b%5d%29 and Complete example http://jacekdalkowski.wordpress.com/2012/01/30/android-draw-a-number-of-bitmaps-or-drawables-into-a-single-drawable/ — Shabbir Dhangot, Jul 11 '14 at 09:05

score 1 · Answer 1 · answered Jun 27 '15 at 02:31

The best I found so far is this one:

public Bitmap overlay(Bitmap bmp1, Bitmap bmp2) {
        Bitmap bmOverlay = Bitmap.createBitmap(bmp2.getWidth(), bmp2.getHeight(), bmp1.getConfig());
        float left =(bmp2.getWidth() - (bmp1.getWidth()*((float)bmp2.getHeight()/(float)bmp1.getHeight())))/(float)2.0;
        float bmp1newW = bmp1.getWidth()*((float)bmp2.getHeight()/(float)bmp1.getHeight());
        Bitmap bmp1new = getResizedBitmap(bmp1, bmp2.getHeight(), (int)bmp1newW);
        Canvas canvas = new Canvas(bmOverlay);
        canvas.drawBitmap(bmp1new, left ,0 , null);
        canvas.drawBitmap(bmp2, new Matrix(), null);
        return bmOverlay;
    }

    public Bitmap getResizedBitmap(Bitmap bm, int newHeight, int newWidth) {
        int width = bm.getWidth();
        int height = bm.getHeight();
        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        Bitmap resizedBitmap = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, false);
        return resizedBitmap;
    }

This is the perfect solution. – sagar suri Apr 05 '19 at 10:41 — sagar suri, Apr 05 '19 at 10:41

ramizmoh · Answer 2 · 2014-07-11T09:08:14.010

0

public static 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);

    // determine the width of the canvas
    int canvasWidth = canvas.getWidth();
    int canvasHeight = canvas.getHeight();  

    //resize your bmp2
    Bitmap resized = Bitmap.createScaledBitmap(bmp2, canvasWidth, canvasHeight, true);

    // determine the centre of the canvas
    int centreX = (canvasWidth  - resized .getWidth()) /2;
    int centreY = (canvasHeight - resized .getHeight()) /2 

   // This code can be used to alter the opacity of the image being overlayed.
   //http://stackoverflow.com/a/12235235/1635441
   //http://stackoverflow.com/a/5119093/1635441        
   //Paint p = new Paint();
   //p.setXfermode(new PorterDuffXfermode(Mode.DST_ATOP)); //http://stackoverflow.com/a/17553502/1635441
   //p.setAlpha(180);
   //p.setARGB(a, r, g, b);

   //canvas.drawBitmap(resized, centreX, centreY, p);  

    //canvas.drawBitmap(bmp2, 0, 0, null);
    canvas.drawBitmap(resized, centreX, centreY, null);

    ByteArrayOutputStream bytes = new ByteArrayOutputStream();

    bmOverlay.compress(Bitmap.CompressFormat.JPEG, 100, bytes);
    File f = new File(Environment.getExternalStorageDirectory()
            + File.separator
            + "test.jpg");
    try {
        f.createNewFile();
        FileOutputStream fo = new FileOutputStream(f);
        fo.write(bytes.toByteArray());
    } catch (IOException e) {
        e.printStackTrace();
    }

    return bmOverlay;
}

edited Jul 11 '14 at 09:08

answered Jul 11 '14 at 08:30

ramizmoh

300
1
6
16

I don't understand the question? To perform an overlay you require a canvas on which you have to draw the main image and the image that is being used to overlayed. To create the effect that the one image is above the other, the Paint object is used to set the opacity (making the top image more transparent). – ramizmoh Jul 11 '14 at 08:55
can you suggest me some link for that? – Android Jul 11 '14 at 09:00
Please have a look at the code and attempt to implement it in your app, as the code is a fair representation of what you requested above. I am unsure as to why you require a link. – ramizmoh Jul 11 '14 at 09:02
in your code you have not specified what is overlay ? – Android Jul 11 '14 at 09:03
in this lines int centreX = (canvasWidth - overlay.getWidth()) /2; int centreY = (canvasHeight - overlay.getHeight()) /2 ; – Android Jul 11 '14 at 09:04
I apologise, as I misunderstood your reference to overlay. I have since amended the code. – ramizmoh Jul 11 '14 at 09:08
i mean to say in above two line thare is overlay. then how you initialize this overlay? – Android Jul 11 '14 at 09:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57142/discussion-between-ramizmoh-and-pragna). – ramizmoh Jul 11 '14 at 09:18

amdroid overlay 1 bitmap to another image not getting proper output

2 Answers2