CODEWITHSUNDEEP
androidcanvasimageviewoverlay
Kintarō
Kintarō

Reputation: 3177

Android: Combine two overlay imageviews to a bmp with correct position

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.

Upvotes: 5

Views: 3721

Answers (1)

Jeffrey Blattman
Jeffrey Blattman

Reputation: 22637

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.

Upvotes: 3

Related Questions