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);

    }


}

}

Output

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.

So the purpose is to crop the image? – Mohit Deshpande Aug 05 '12 at 12:26 — Mohit Deshpande, Aug 05 '12 at 12:26
No the purpose is just to highlight a particular portion... – Vikram Aug 05 '12 at 12:33 — Vikram, Aug 05 '12 at 12:33
If I answered your question, please accept it as an answer. – Mohit Deshpande Aug 05 '12 at 13:23 — Mohit Deshpande, Aug 05 '12 at 13:23

score 3 · Accepted Answer · edited May 23 '17 at 12:30

3

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.

edited May 23 '17 at 12:30

Community

1
1

answered Aug 05 '12 at 12:38

Mohit Deshpande

53,877
76
193
251

How is the touch event done.. i understand that ill need to create a custom view.. but the dragging is linked to the view. – Vikram Aug 05 '12 at 13:27
@Vikram The touch events are done in the `onTouchEvent(...)` http://developer.android.com/reference/android/view/View.html – Mohit Deshpande Aug 05 '12 at 17:19
How to set the new view.. i.e is the rectangle view in the above code.. i.e i made a new view and the ondraw() method and also the touchevents. how can i link it to the above code... i.e what to do when the imageview loads.. – Vikram Aug 05 '12 at 20:18
You can create the new view programmatically over the image with an initial x and y coordinate, and then the user will resize and drag it. – Mohit Deshpande Aug 06 '12 at 00:59
Can you please tell me or give me a link of how to add my custom view over the image view dynamically.. i am having a lot of trouble doing it.. thanks – Vikram Aug 08 '12 at 17:51

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

1 Answers1