5

I have two ImageViews. ImageView1 is a background image and ImageView2 is a smaller image. The position of the ImageView2 is somewhere in the middle of the application.

I would like to combine those two ImageView into a bitmap so that ImageView2 is on top of ImageView1.

The combine process works fine but ImageView2 is always on the top left corner of the bmp file.

Below is my code that I used to generate the bmp:

    ImageView iv = (ImageView)findViewById(R.id.imageView1);
    ImageView iv2 = (ImageView)findViewById(R.id.imageView2);

    File rootPath = new File(Environment.getExternalStorageDirectory(), "testmerge");

    if (!rootPath.exists()) {
        rootPath.mkdirs();
    }

    Toast.makeText(this, rootPath.getPath(), Toast.LENGTH_LONG).show();
    File dataFile = new File(rootPath, "picture.png");

    iv.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
    iv.layout(0, 0, iv.getMeasuredWidth(), iv.getMeasuredHeight());

    iv.setDrawingCacheEnabled(true);
    Bitmap b1 = Bitmap.createBitmap(iv.getDrawingCache());
    iv.setDrawingCacheEnabled(false);

    iv2.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
    iv2.layout(0, 0, iv2.getMeasuredWidth(), iv2.getMeasuredHeight());

    iv2.setDrawingCacheEnabled(true);
    Bitmap b2 = Bitmap.createBitmap(iv2.getDrawingCache());
    iv2.setDrawingCacheEnabled(false);        

    Bitmap bmOverlay = Bitmap.createBitmap(b1.getWidth(), b1.getHeight(), b1.getConfig());
    Canvas canvas = new Canvas(bmOverlay);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);

    canvas.drawBitmap(b1, 0, 0, null);
    canvas.drawBitmap(b2, 0, 0, null);

    try {
        FileOutputStream out = new FileOutputStream(dataFile, false);
        bmOverlay.compress(CompressFormat.PNG, 95, out);
    } catch (IOException e) {
        e.printStackTrace();
    }

Can you tell me how can I adjust the position of the final bitmap file so that the ImageViews will be in the same position as it display on the app?

Thanks.

2
  • @Kintaro can u help me in this answer how u achieved this task ?
    – Erum
    Sep 6, 2014 at 8:37
  • I know this question was asked a long time ago, but maybe you can still help me. I am trying to use your "merging" method but my problem is, that the .Compress method askes for a System.IO.Stream and not for a Java.IO.FileOutputStream
    – Aiko West
    May 2, 2018 at 13:20

1 Answer 1

3

just create a FrameLayout, and include two ImageViews within it. it will naturally overlay the first image with the second.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/main_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/main" />

    <ImageView
        android:id="@+id/overlay_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/overlay" />

</FrameLayout>

you can apply gravities to center or otherwise align the images.

2
  • Thanks for the reply. My question is that the final bitmap (bmOverlay) contains both imageViews but the top imageViews is always on the top left corner the bitmap. Do you mean framelayout will do that for me automatically (when I create the bitmap from framelayout)?
    – Kintarō
    Sep 27, 2012 at 0:10
  • if you put two children in the frame layout, they will overlay each other exactly, unless you add other layout attributes that cause that not to happen (like make the container match_parent, and setting different gravities on each child). Sep 27, 2012 at 1:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.