How to make a shape dragable and re-sizable in android dynamically

Question

I am a newbie in android and i am making a simple app in which i select an image from the gallery, a rectangle is drawn on the image which the user can drag at any position on the image and re-size the rectangle dynamically.

My code up-till now can load an image from the gallery and draw a rectangle on the image. But i don't know how to go about making the rectangle dragable dynamically.

public class MainActivity extends Activity   {
private static int RESULT_LOAD_IMAGE = 1;


@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Button buttonLoadImage = (Button) findViewById(R.id.buttonLoadPicture);
    buttonLoadImage.setOnClickListener(new View.OnClickListener() {

        public void onClick(View arg0) {

            Intent i = new Intent(
                    Intent.ACTION_PICK,
                    android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

            startActivityForResult(i, RESULT_LOAD_IMAGE);
        }
    });
}



@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    if (requestCode == RESULT_LOAD_IMAGE && resultCode == RESULT_OK && null != data) {
        Uri selectedImage = data.getData();
        String[] filePathColumn = { MediaStore.Images.Media.DATA };

        Cursor cursor = getContentResolver().query(selectedImage,
                filePathColumn, null, null, null);
        cursor.moveToFirst();

        int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
        String picturePath = cursor.getString(columnIndex);
        cursor.close();

        ImageView imageView = (ImageView) findViewById(R.id.imgView);
        Bitmap bMap = BitmapFactory.decodeFile(picturePath);

        bMap = bMap.copy(Bitmap.Config.ARGB_8888 , true);

        float width = imageView.getWidth();
        float height = imageView.getHeight();

        Canvas canvas = new Canvas(bMap);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(4);  
        paint.setColor(Color.RED);
        canvas.drawRect(width/2+60, height/2-20, width/2-60, height/2+20, paint);

        imageView.setImageBitmap(bMap);

    }


}

}

The output i want is something like in the above picture. The red rectangle can be resized and dragged by the user and then save the image.

Answer 1

You'll need to create a custom view that represents the rectangle you drew. In the onDraw(...) you can set the Paint of the rectangle and it's initial size. Now the concept is, that when it is touched on it's corners and dragged, the x and y coordinates of the rectangle will change when the user lifts their finger(s) from the screen. I will refer you to this on the Android Developer Guide on how to create a custom view. And this is a similar question post on here that may give you some ideas.