Merge Camera preview with a image?

Question

I am trying to make a composite image from a camera preview and an ImageView that was above it. I have one image that is a transparent png which is set on an imageview like this

ImageView iv = new ImageView(this);
iv.setImageResource(R.drawable.one);

I then add it to the framelayout which is already showing my camera preview (inherits SurfaceView) like so:

preview = (FrameLayout) findViewById(R.id.camera_preview);
preview.addView(cp); //cp is a reference to a camera preview object
preview.addView(iv);

My imageview's picture is this:

And the screen is something like this (I had to take a the pic from another camera since the DDMS screenshot wasn't showing the preview only the image and a black screen, don't know if that's a relevant though):

Now my task is to take that picture with the imageview. I came up with two approaches, both of which I do not know whether they can or cannot be implemented

1. Save the picture seperately, keep track of which cover was on the image and then merge someway. Can this be done, and how?
2. Gain the look of the framelayout in which both Views are residing and save as image
3. Take screenshot of a specific area, I will onky do this one as a last resort ie if this can be done

What I want to know is which one these approaches is possible and how can it be done? or is there a better way to get this done?

Answer 1

Assuming you already have image in form of byte[] data from jpeg callback.

1. Decode the image into a mutable bitmap:

    Bitmap photo = BitmapFactory.decodeByteArray(data, 0, data.length); photo = photo.copy(photo.getConfig(), true); 

2. Read the overlay:

    Bitmap overlay = BitmapFactory.decodeResource(getResources(), R.drawable.one); 

3. Draw overlay on the photo:

    Canvas canvas = new Canvas(photo); canvas.drawBitmap(overlay, new Matrix(), null); 

Now, photo should contain your image.