How to draw a Line in ImageView on Android?

Question

I\'d Like to know how to draw a Line on ImageView as user swipe their finger ?

Could any body explain this ? Or perhaps any Link to get start on this.

Answer 1

For drawing the line the user actually drew you have to override the dispatchTouchEvent. From that event you can get the coordinates of the line and draw them in the onDraw as shown by george.

http://developer.android.com/reference/android/app/Activity.html#dispatchTouchEvent(android.view.MotionEvent)

Answer 2

This is a complete example of how you can draw green rectangle over another image:

package CustomWidgets;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;

/**
 * Allows to draw rectangle on ImageView.
 *
 * @author Maciej Nux Jaros
 */
public class DrawImageView extends ImageView {
    private Paint currentPaint;
    public boolean drawRect = false;
    public float left;
    public float top;
    public float right;
    public float bottom;

    public DrawImageView(Context context, AttributeSet attrs) {
        super(context, attrs);

        currentPaint = new Paint();
        currentPaint.setDither(true);
        currentPaint.setColor(0xFF00CC00);  // alpha.r.g.b
        currentPaint.setStyle(Paint.Style.STROKE);
        currentPaint.setStrokeJoin(Paint.Join.ROUND);
        currentPaint.setStrokeCap(Paint.Cap.ROUND);
        currentPaint.setStrokeWidth(2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (drawRect)
        {
            canvas.drawRect(left, top, right, bottom, currentPaint);
        }
    }
}

When you have this defined you can replace ImageView with above View (widget) for example:

<CustomWidgets.DrawImageView
    android:id="@+id/widgetMap"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/map_small"
/>

Then you can use this for example in touch event of the activity that controls the layout:

    mapImageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            DrawImageView drawView = (DrawImageView) v;

            // set start coords
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                drawView.left = event.getX();
                drawView.top = event.getY();
            // set end coords
            } else {
                drawView.right = event.getX();
                drawView.bottom = event.getY();
            }
            // draw
            drawView.invalidate();
            drawView.drawRect = true;

            return true;
        }
    });

Of course you could make some getters and setters and other Java over-engineering routines ;-).

Answer 3

You must have your own ImageView and override onDraw function. Use something like this

public class MyImageView extends ImageView{

    public MyImageView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        canvas.drawLine(0, 0, 20, 20, p);

    }

}

and in your main class create object MyImageView; and when you touch your display call the update(); function

Answer 4

Take a look at the ApiDemos sample FingerPaint.

By using this you can draw line on ImageView by touching on the screen.