Sunday, April 29, 2012

Detect touched position on a ImageView


A custom ImageView is implemented, with onTouchEvent() method overrided. When user touched on the ImageView, the touch position will be passed to main activity and displayed on a TextView.



Implement the custom ImageView, TouchView.java.
package com.exercise.AndroidDetechTouch;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

public class TouchView extends ImageView {

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

 public TouchView(Context context, AttributeSet attrs) {
  super(context, attrs);
  // TODO Auto-generated constructor stub
 }

 public TouchView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  // TODO Auto-generated constructor stub
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  // TODO Auto-generated method stub
  setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),
       MeasureSpec.getSize(heightMeasureSpec));
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  // TODO Auto-generated method stub
  
  
  switch(event.getAction()){
  case MotionEvent.ACTION_DOWN:
  case MotionEvent.ACTION_MOVE:
   float x = event.getX();
   float y = event.getY();
   ((AndroidDetechTouchActivity)getContext()).updateMsg("Touched@" + x + " : " + y);
   break;
  case MotionEvent.ACTION_UP:
   ((AndroidDetechTouchActivity)getContext()).updateMsg("");
   break;
  }
  
  return true;
 }

}


Modify the main activity to add updateMsg() method. It will be called from custom ImageView.
package com.exercise.AndroidDetechTouch;

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

public class AndroidDetechTouchActivity extends Activity {
 
 TextView msg;
 TouchView touchView;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        msg = (TextView)findViewById(R.id.msg);
        touchView = (TouchView)findViewById(R.id.touchview);

    }

    public void updateMsg(String tMsg){
     msg.setText(tMsg);
    }
   
}


main.xml, to add the custom ImageView and a TextView overlapped.
<?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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
 <FrameLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
     >
     <LinearLayout 
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="vertical">
         <TextView
             android:id="@+id/msg"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             />
     </LinearLayout>
     <com.exercise.AndroidDetechTouch.TouchView
         android:id="@+id/touchview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:background="@drawable/ic_launcher"
         />
 </FrameLayout>
</LinearLayout>


Download the files.

Next: - Get pixel color on a specified location from ImageView's background bitmap

6 comments:

stephy yan said...

Really thank you so much, this is very useful to me. But I have some question here:

- how to set a area range(from position x,y to x,y) to display different message in textview?

Take example from your AndroidDetectTouch Project (ic_launcher icon). I touch the head display msg "this is head", touch the left hand display msg "this is left hand".

I need some guide on this.

Erik said...

Hello stephy,

I have no completed idea right now. But your question is interested for me. MAY BE, I will try to implement it in coming post. Please check my blog later.

stephy yan said...

I'm so happy to receive your reply. I will continuing update your blog. Thank you so much ^^

Andy said...

Hi i copied the code exactly and it didn't seem to work?

Erik said...

hello Andy,

you better download the files(in project) to try it.

Anonymous said...

how undo the changes on imageview.please help