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.

Solution 1

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

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

Comments

[Admin]

Hi george, did you mean with calling the update method on onTouch() event ? I'm sorry for asking to much, i'm new in this.

[George]

Yes, I mean it. No problem, you can ask how much you want))

[George]

You must override OnTouchListener and in you OnTouch function calling the invalidate

[Dil Se...]

i have the same problem. and i had tried it.. but it doesnt work for me.. Actually i am new to this android envrmnmt.. Can u just demonstrate it? Or does i have to put my question once more with all my code?

[Nux]

OK. It works only 3 changes needed - first add Paint p as a property of the class, then initialize it in your class constructor, then move super.onDraw(canvas); above your drawing operations. This will allow you to draw over original image.