How to draw lines over ImageView on Android?

Question

I am trying to develop a simple map application, which will display a map in the screen.

When the user moves the cursor on screen, I want to display 2 perpendicular lines over my map. I had tried many examples to get an idea for that, but unfortunately, didn't succeed. How can I make this?

And as one previous questionhere I had tried. but didn't get the answer. Can anyone guide me?

My main.xml is as following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <ImageView android:id="@+id/main_imagemap"
        android:src="@drawable/worldmap"
        android:clickable="true"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"/>
    </LinearLayout>

</LinearLayout>

And my activity file(i had just started it..)

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;

public class LineMapActivity extends Activity 
{


    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ImageView map_image = (ImageView)findViewById(R.id.main_imagemap);

    }
}

And as in that link, i had also added MyImageView.

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.widget.ImageView;

public class MyImageView extends ImageView
{

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

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        canvas.drawLine(0, 0, 20, 20, p);
        super.onDraw(canvas);
    }
}

Now how can i add this MyImageView to my app?

why aren't you using mapview and overlays? check out this tutorial http://codemagician.wordpress.com/2010/05/06/android-google-mapview-tutorial-done-right/ — MikeIsrael, Jan 12 '12 at 07:50
no my dear.. i am just a new bee in andriod.. i am just adding an image from drawables. i just want to study how to draw line above an image.. just like in old blackberry phones — Dil Se..., Jan 12 '12 at 07:58
ok well check my answer it should get you the results you wanted. — MikeIsrael, Jan 12 '12 at 08:21

score 4 · Accepted Answer · edited Jul 29 '12 at 00:15

Finally I figured out a solution. It's a simple program which draws a line over an Image.

Here is my main.xml file (com.ImageDraw.MyImageView is my custom view, code below):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <com.ImageDraw.MyImageView android:id="@+id/main_imagemap"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"/>
    </LinearLayout>
</LinearLayout>

And here is the main activity:

import android.app.Activity;
import android.os.Bundle;

public class MyActivity extends Activity 
{
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

and this is my custom image view (MyImageView):

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class MyImageView extends SurfaceView implements SurfaceHolder.Callback
{
    private CanvasThread canvasthread;

    public MyImageView(Context context) {
        super(context);
        getHolder().addCallback(this);
        canvasthread = new CanvasThread(getHolder(), this);
        setFocusable(true);
    }

    public MyImageView(Context context, AttributeSet attrs)
    {
        super(context,attrs);
        getHolder().addCallback(this);
        canvasthread = new CanvasThread(getHolder(), this);
        setFocusable(true);
    }

    protected void onDraw(Canvas canvas) {
        Log.d("ondraw", "ondraw");
        Paint p = new Paint();
        Bitmap mapImg = BitmapFactory.decodeResource(getResources(), R.drawable.mybitmap);
        canvas.drawColor(Color.BLACK);
        canvas.drawBitmap(mapImg, 0, 0, null);
        p.setColor(Color.RED);
        canvas.drawLine(0, 0, 100, 100, p);
    }

    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
    }

    public void surfaceCreated(SurfaceHolder holder) {
        canvasthread.setRunning(true);
        canvasthread.start();
    }

    public void surfaceDestroyed(SurfaceHolder holder) {
        boolean retry = true;
        canvasthread.setRunning(false);
        while (retry)
        {
            try
            {
                canvasthread.join();
                retry = false;
            }
            catch (InterruptedException e) {
                // TODO: handle exception
            }
        }
    }
}

And finally here is my CanvasThread:

import android.graphics.Canvas;
import android.view.SurfaceHolder;

public class CanvasThread extends Thread
{
    private SurfaceHolder surfaceHolder;
    private MyImageView myImageView;
    private boolean run = false;

    public CanvasThread(SurfaceHolder s, MyImageView m)
    {
        surfaceHolder = s;
        myImageView = m;
    }

    public void setRunning(boolean r)
    {
        run = r;
    }

    public void run()
    {
        Canvas c;
        while(run)
        {
            c=null;
            try
            {
                c= surfaceHolder.lockCanvas(null);
                synchronized (surfaceHolder) {
                    myImageView.onDraw(c);
                }
            }
            finally
            {
                if(c!=null)
                {
                    surfaceHolder.unlockCanvasAndPost(c);
                }
            }
        }
    }
}

You can find more details in this tutorial

a special thanks to MikeIsrael, who helped me very much.... And to that site also... — Dil Se..., Jan 13 '12 at 10:00
looks good. If later on you find that you will want to preserve the origional image you can always have an imageview overlapped by a myimageview as well. Good luck! — MikeIsrael, Jan 15 '12 at 08:54
you can overlap in xml with a relativelayout and align properties, just search for that you will find tons of info. Then you can draw only on the top imageview and leave the bottom as is for erasing if you want. — MikeIsrael, Jan 16 '12 at 09:59
one more doubt, how can i add buttons and text beneath that image. when i am trying to do it, it is not showing in screen. I had tried to add above it, and it works nice for me.. I think the canvas/surfaceview is taking the whole height and width. How can i restrict it to the image only? or is it possible? — Dil Se..., Jan 17 '12 at 10:24
I don't see in the code where you attache the xml object to the java object are you using findViewByID() to attach them? start there. — MikeIsrael, Jan 17 '12 at 15:45
didnt, get u sir. but that code worked for me.. I had coded as i got from that link, and it worked fine.. Can u make ur comment little brief? — Dil Se..., Jan 18 '12 at 05:55

score 1 · Answer 2 · answered Jan 12 '12 at 08:04

1

Error you are getting because you are trying to casting ImageView object to MyImageView object.

answered Jan 12 '12 at 08:04

jeet

29,001
6
52
53

then how i need to implenent MyImageView which is in that link i had given in the question? Or can u show i can i draw line above an imageview? – Dil Se... Jan 12 '12 at 08:11
dear i had updated my question. hope u will get the idea what i had asked. once more i will describe it, i want an app which displays an image as background. And can also draw line on it. All those codes are my experiments. Not sure about that those codes work.. – Dil Se... Jan 12 '12 at 08:45

score 1 · Answer 3 · answered Jan 12 '12 at 08:16

1

Just fix the xml to include your object instead of an imageview like so (note that com.your.package.MyImageView should be the full package name of the package containing your class and then the class name)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <com.your.package.MyImageView android:id="@+id/main_imagemap"
        android:src="@drawable/worldmap"
        android:clickable="true"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"/>
    </LinearLayout>

</LinearLayout>

answered Jan 12 '12 at 08:16

MikeIsrael

2,871
2
22
34

i have my package as package com.mymap; and hence i modified my xml as – Dil Se... Jan 12 '12 at 08:26
that doesn't really help, you need to paste the whole stacktrace to find out where your error is. – MikeIsrael Jan 12 '12 at 09:05
try e.printStackTrace(); and it should be printed in your logcat in red (or yellow if it is more of a wanring). That is really basic JAva, have you not taken a basic java class yet? – MikeIsrael Jan 12 '12 at 09:10
is line 9 of the xml – MikeIsrael Jan 12 '12 at 09:22
yes sir. i had put the xml file exactly as i did in my eclipse app.. plz check that MyImageView also.. Actually i am not getting an idea of how this happens – Dil Se... Jan 12 '12 at 09:24
I use the same kind of association in some of my apps, so it definitely works to use a custom object in the xml, it might be one of the properties maybe, try commenting them out so it only has width and height and see if the error still exists, and double check the packagename.class name you have listed – MikeIsrael Jan 12 '12 at 09:28
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/6638/discussion-between-sujith-and-mikeisrael) – Dil Se... Jan 12 '12 at 09:48
thanks mike.. I got it finally.. thanks for ur help... Plz check my ans which i had put in this as my ans.. and kindly correct me if i am wrong – Dil Se... Jan 13 '12 at 10:02

How to draw lines over ImageView on Android?

3 Answers3

Linked

Related