1

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. enter image description here

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"
        />
Julia
  • 1,207
  • 4
  • 29
  • 47
  • There's probably multiple ways of doing this. I don't know what is best. One way might be to have two views stacked on top of each other making for four views (two below for the images, two above for a green image with the circle transparent and matching the BG of the rest of the screen). The BG is below those four views Then when user drags, in code animate the 2 views identically as the user drags what appears to be one view and collision if wanted. Using a SurfaceView might also be another way. – CmosBattery Nov 27 '17 at 01:04
  • I'm not sure if I understand what you mean, is that possible for you to post some sample code? Thanks. – Julia Nov 27 '17 at 03:17

0 Answers0