Merging image with two different image

Question

It is basically those photo editing apps where you can actually edit the image with another small icon or photo.

I want to be able to take a image (either from the gallery or straight from the camera) and edit it with another image that the user can freely move around to allow them to place the image anywhere they want.

I have no idea how to actually allow the user to move the icon/image so they could shift the image to the position they want to and save it into one image.

Breakdown on how it should work:

1. Choose an image - The user can pick an image from the galley they want to edit OR if they do not have an image taken, it should intent to the camera and get a image taken.

2. Edit the image - The user can now pick the images they want to add on the main image and after all the editing is done, the final image will be saved in the storage.

There are similar questions over stackoverflow but they aren't any answers or solutions.

Answer 1

Use below code to move image..

Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();
PointF startPoint = new PointF();
PointF midPoint = new PointF();
float oldDist = 1f;
static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;

imageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ImageView view = (ImageView) v;
            switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                savedMatrix.set(matrix);
                startPoint.set(event.getX(), event.getY());
                mode = DRAG;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                oldDist = spacing(event);
                if (oldDist > 10f) {
                    savedMatrix.set(matrix);
                    midPoint(midPoint, event);
                    mode = ZOOM;
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                mode = NONE;
                break;
            case MotionEvent.ACTION_MOVE:
                if (mode == DRAG) {
                    matrix.set(savedMatrix);
                    matrix.postTranslate(event.getX() - startPoint.x,
                            event.getY() - startPoint.y);
                } else if (mode == ZOOM) {
                    float newDist = spacing(event);
                    if (newDist > 10f) {
                        matrix.set(savedMatrix);
                        float scale = newDist / oldDist;
                        matrix.postScale(scale, scale, midPoint.x,
                                midPoint.y);
                    }
                }
                break;
            }
            view.setImageMatrix(matrix);
            return true;
        }

        @SuppressLint("FloatMath")
        private float spacing(MotionEvent event) {
            float x = event.getX(0) - event.getX(1);
            float y = event.getY(0) - event.getY(1);
            return FloatMath.sqrt(x * x + y * y);
        }

        private void midPoint(PointF point, MotionEvent event) {
            float x = event.getX(0) + event.getX(1);
            float y = event.getY(0) + event.getY(1);
            point.set(x / 2, y / 2);
        }
    });