How to draw on ImageView

Question

Why this code will not draw a circle where the user touches the image and displays the coordinates in the text box?

package com.smallbore.smallbore; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.os.Bundle; import android.view.MotionEvent; import android.widget.ImageView; import android.widget.TextView; public class targetenter extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.targetenter); } public class ImageView1 extends ImageView { public int x; public int y; public ImageView1(Context context) { super(context); // TODO Auto-generated constructor stub } public boolean dispatchtouchevent(MotionEvent event){ x = (int) event.getX(); y = (int) event.getY(); TextView t1 = (TextView)findViewById(R.id.textView2); t1.setText("x="+x); TextView t2 = (TextView)findViewById(R.id.textView3); t2.setText("y="+y); invalidate(); return true; } @Override public void onDraw(Canvas canvas){ super.onDraw(canvas); canvas.drawCircle(x,y,10, null ); } } } 

and xml:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:id="@+id/linearLayout1" android:layout_height="fill_parent" android:layout_width="fill_parent"> <TextView android:layout_height="wrap_content" android:text="@string/cposition" android:id="@+id/textView1" android:layout_width="wrap_content"></TextView> <com.smallbore.smallbore.targetenter.Imageview1 android:id="@+id/imageView1" android:layout_width="300dip" android:layout_height="300dip" android:background="@drawable/target" android:layout_gravity="center_horizontal"></com.smallbore.smallbore.targetenter.Imageview1> <TextView android:text="TextView" android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> <TextView android:text="TextView" android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> </LinearLayout> 

Answer 1

Change onTouchEvent to dispatchTouchEvent . Also, make sure you use imageView1 in your XML, not just ImageView .

Answer 2

You do not call invalidate () on your onTouchEvent. When ever you change something on the canvas, you need to redraw it. fyi, if you are not in the user interface thread, you should call postinvalidate (). refer to this api demo to learn more about how to draw on canvas. http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/FingerPaint.html

Answer 3

I'm not sure if Cristian’s suggestion of using dispatchTouchEvent() is good, this method makes sense in the descendants of ViewGroup to send touch events to their children. However, its recommendation is to use a custom view in an xml layout declaration. You do it like this:

 <package.that.contains.targetenter.imageView1 android:id .... 

that is, you need to specify the complete package in your own ImageView class (btw, in Java there is an agreement on using a capital letter for class names: imageView1 -> ImageView1 ). You just need to use it if you would use ImageView , and I think you will have to make it public or it is better to declare it in another file.

To call your onDraw() method, you need to call invalidate() , as Veeresh suggests, so that your imageView1 redraws. But you have to call it super, or you only get circles:

 @Override public void onDraw(Canvas canvas){ super.onDraw(canvas); canvas.drawCircle(x,y,10, null ); } 

If you still have problems, it may be helpful to see your targetenter.xml layout.