Making responsive re-sizable rectangle in Xamarin.Android

Question

I made a rectangle in Xamarin.Android using Camera View. But have many problems like -

1. Not really responsive
2. Lagging while dragging corners

My attempts so far in CameraLayout.xml

   <ImageView
        android:id="@+id/Center_Point_photo"
        android:layout_width="80px"
        android:layout_height="80px"
        android:src="@drawable/center_point"
        android:layout_marginTop="670px"
        android:layout_marginLeft="350px" />

    <ImageView
        android:id="@+id/Top_Left_photo"
        android:layout_width="50px"
        android:layout_height="50px"
        android:src="@drawable/top_left"
        android:layout_marginTop="600px"
        android:layout_marginLeft="250px" />
    <ImageView
        android:id="@+id/Top_Right_photo"
        android:layout_width="50px"
        android:layout_height="50px"
        android:src="@drawable/top_right"
        android:layout_marginTop="600px"
        android:layout_marginLeft="500px" />
    <ImageView
        android:id="@+id/Bottom_Left_photo"
        android:layout_width="50px"
        android:layout_height="50px"
        android:src="@drawable/bottom_left"
        android:layout_marginTop="750px"
        android:layout_marginLeft="250px" />
    <ImageView
        android:id="@+id/Bottom_Right_photo"
        android:layout_width="50px"
        android:layout_height="50px"
        android:src="@drawable/bottom_right"
        android:layout_marginTop="750px"
        android:layout_marginLeft="500px" />

Second problem when dragging corners.It is not smooth my code for dragging corners:

ImageView OCR_Rectangle;
ImageView OCR_Top_Left;
ImageView OCR_Top_Right;
ImageView OCR_Bottom_Left;
ImageView OCR_Bottom_Right;

int deltaX = (int)e.GetX() - lastX;
int deltaY = (int)e.GetY() - lastY;      
    centerX = (int)OCR_Rectangle.GetX() + OCR_Rectangle.Width / 2;
    centerY = (int)OCR_Rectangle.GetY() + OCR_Rectangle.Height / 2;
    if (((int)e.GetX() >= centerX) && ((int)e.GetY() >= centerY))
    {
    OCR_Rectangle.SetX(OCR_Rectangle.GetX() - deltaX );
    OCR_Rectangle.SetY(OCR_Rectangle.GetY() - deltaY * 2);
    OCR_Rectangle.LayoutParameters.Width += deltaX * 2;
    OCR_Rectangle.LayoutParameters.Height += deltaY * 4;   
    OCR_Top_Left.SetX(OCR_Rectangle.GetX());
    OCR_Top_Left.SetY(OCR_Rectangle.GetY());
    OCR_Top_Right.SetX(OCR_Rectangle.GetX() + OCR_Rectangle.Width - OCR_Top_Right.Width);
    OCR_Top_Right.SetY(OCR_Rectangle.GetY());
    OCR_Bottom_Left.SetX(OCR_Rectangle.GetX());
    OCR_Bottom_Left.SetY(OCR_Rectangle.GetY() + OCR_Rectangle.Height - OCR_Bottom_Left.Height);
    OCR_Bottom_Right.SetX(OCR_Rectangle.GetX() + OCR_Rectangle.Width - OCR_Bottom_Right.Width);
    OCR_Bottom_Right.SetY(OCR_Rectangle.GetY() + OCR_Rectangle.Height - OCR_Bottom_Right.Height);
    } 
    OCR_Rectangle.RequestLayout();    
    lastX = (int)e.GetX();
    lastY = (int)e.GetY();

I am inspired by Microsoft Math app link here So i want to make something like that

Any help will be appreciated.

First try

Answer 1

you should use FrameLayout to center elements and locate them in proper positions in this Project.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_width="match_parent"
    android:background="#fff"
    android:layout_height="match_parent">  
    <TextView
        android:text="Text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textColor="@android:color/holo_red_light"
        android:minWidth="25px"
        android:minHeight="25px"
        android:id="@+id/textView1"
        android:layout_gravity="left|top" />
    <ImageView
        android:src="@android:drawable/ic_menu_gallery"
        android:layout_margin="10dp"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:id="@+id/imageView1"
        android:layout_gravity="right|top" />
    <FrameLayout
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="200dp"
        android:layout_height="150dp"
        android:id="@+id/frameLayout1"
        android:layout_gravity="center" >
        <ImageView
            android:background="#000"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView2"
            android:layout_gravity="top|left" />
        <ImageView
            android:background="#000"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView3"
            android:layout_gravity="bottom|left" />
        <ImageView
            android:background="#000"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView4"
            android:layout_gravity="top|right" />
        <ImageView
            android:background="#000"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView5"
            android:layout_gravity="bottom|right" />
        <ImageView
            android:background="#000"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView6"
            android:layout_gravity="center" />
    </FrameLayout>

</FrameLayout>

the image show the result, I used background color for show position of images