how to put two images into two transparent part of a background?

Question

I'm trying to create a photo collage with 2 images. I have a background image with 2 transparent parts divided by border. I want to put two different images into those two parts and the images can move, drag and zoom. However, 1 image should stay in 1 transparent part, and it should not be able to move to the other transparent part. Same thing for the 2nd image. The problem I'm having is that the image can end up in both transparent part when I zoom in.

Here's a sample photo to demonstrate. The green part is the background (it will be a real image in live application), and the 2 white parts represent the transparent in a png file. I want to place 1 image into each of the two white circles.

Here's the code

    <ImageView
        android:id="@+id/imgPhoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <ImageView
        android:id="@+id/imgPhoto2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <ImageView
        android:id="@+id/imgBackground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        />