Drawing a circle on ImageView2 in same coordinates as ImageView1 if i tap a place in ImageView1 and Vice versa

Question

I'm trying to make find the difference game app, but I never made anything like that and since I'm a new to development I'm stuck

well baby Steps are always needed to learn xD

I read in some documentation that i have to get each ImageView height and width separately so when i touch imageView1 its coordinates can be set to ImageVIew2 and ViceVersa I MAYBE BE WRONG XD

Right now I have a layout with 2 Images set vertically

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".PlayActivity"
android:id="@+id/hello1">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/hello">

    <ImageView
        android:id="@+id/image1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/pic_9" />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/pic_9a" />

</LinearLayout>

What i want to do is if i tap a place in image1 a circle should be created on the same place in image2

after reading along a few things i have made a circle if i tap the layout but i am stuck after this i cant find what to do next maybe i cant find documentation related to my problems

public class PlayActivity extends AppCompatActivity {

RelativeLayout layout;
float x = 0;
float y = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_play);

    layout=(RelativeLayout) findViewById(R.id.hello1);
    layout.addView(new CustomView(PlayActivity.this));

}

public class CustomView extends View {

    Bitmap mBitmap;
    Paint paint;

    public CustomView(Context context) {
        super(context);
        mBitmap = Bitmap.createBitmap(400, 800, Bitmap.Config.ARGB_8888);
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(x, y, 50, paint);
    }

    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            x = event.getX();
            y = event.getY();
            invalidate();
        }
        return false;
    }
}}

Right now i think my two ImageView arent separate because when i touch between the 2 images a circle is created which shouldn't since imageView1 ends im not sure if im thinking in right direction its just my guess on how should it work for the game to work I MAYBE BE WRONG XD

I still have a long way to go, but I'm stuck here
can anyone help?

I replaced my PlayActivity code using Tejas Pandya

RelativeLayout layout;
float x = 0;
float y = 0;
ImageView ImageView1, ImageView2;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_play);

    layout=(RelativeLayout) findViewById(R.id.hello1);
    layout.addView(new CustomView(PlayActivity.this));

    ImageView1 = (ImageView) findViewById(R.id.image1);
    ImageView2 = (ImageView) findViewById(R.id.image2);

}

public class CustomView extends View {


    public CustomView(Context context) {
        super(context);
    }

    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            x = event.getX();
            y = event.getY();
            invalidate();
            drawCircle(R.id.image2,ImageView2,x,y);
        }
        return false;
    }

    public void drawCircle(int my_image_id, ImageView my_imageview, float x , float y){

        BitmapFactory.Options myOptions = new BitmapFactory.Options();
        myOptions.inDither = true;
        myOptions.inScaled = false;
        myOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;// important
        myOptions.inPurgeable = true;

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), my_image_id,myOptions);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.BLUE);


        Bitmap workingBitmap = Bitmap.createBitmap(bitmap);
        Bitmap mutableBitmap = workingBitmap.copy(Bitmap.Config.ARGB_8888, true);


        Canvas canvas = new Canvas(mutableBitmap);
        canvas.drawCircle(x, y, 25, paint);


        my_imageview.setAdjustViewBounds(true);
        my_imageview.setImageBitmap(mutableBitmap);

    }
}

and i get this error

E/MessageQueue-JNI: java.lang.NullPointerException: Attempt to invoke virtual method 'int android.graphics.Bitmap.getWidth()' on a null object reference at android.graphics.Bitmap.createBitmap(Bitmap.java:742) at com.example.pc.blazedifferencegame.PlayActivity$CustomView.drawCircle(PlayActivity.java:68) at com.example.pc.blazedifferencegame.PlayActivity$CustomView.onTouchEvent(PlayActivity.java:49)

Answer 1

When You tape on Image . You are getting x,y coordinate in

 x = event.getX();
 y = event.getY();

Now you have x,y coordinate . call your drawCircle() method on both of your imageview with this same x,y coordinate.

For Drawing circle :

make one function drawCircle();

public void drawCircle(int my_image_id,Imageview my_imageview,int x ,int y){

   BitmapFactory.Options myOptions = new BitmapFactory.Options();
    myOptions.inDither = true;
    myOptions.inScaled = false;
    myOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;// important
    myOptions.inPurgeable = true;

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), my_image_id,myOptions);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(Color.BLUE);


   //please check here . you've got your bitmap or it is null.
  // if it is null,there might be some problem with decoding your resources above.
    Bitmap workingBitmap = Bitmap.createBitmap(bitmap);
    Bitmap mutableBitmap = workingBitmap.copy(Bitmap.Config.ARGB_8888, true);


    Canvas canvas = new Canvas(mutableBitmap);
    canvas.drawCircle(x, y, 25, paint);


    my_imageview.setAdjustViewBounds(true);
    my_imageview.setImageBitmap(mutableBitmap);

}

now for image 1 . use drawCircle(R.id.imageview1,imageview,x,y) and for image 2 . use drawCircle(R.id.imageview2,imageview2,x,y)