Map the touch position with a mask

In previous exercise, I show how to:
- Detect touched position on a ImageView
- Get color on a specified location from ImageView's background bitmap
- Display text on a specified location in a custom View

In this step, I want to convert the touch position to a meaningful description, such as Head, Body, Heart, Hand and Foot. As show in the video here.




I make(copy) the Android Bitmap as the image source of the custom ImageView, TouchView. And re-paint the image with specified color for various part. Both images have the same size, and same pattern. Copy them in /res/drawable/ folder.

When I get the touch position from onTouchEvent() method in TouchView, I get the pixel color from the mask image, instead of get from the original image. So I can detect the touched part by comparing the mask pixel color with various specified color.

In order to compare the Android image and the mask image, I have to make both in same proportion. So I re-assign main.xml to use Anadroid:src instead of android:background. And I use fixed layout size for the FrameLayout.

<?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="384px"
        android:layout_height="384px"
     >
  
     <com.exercise.AndroidDetechTouch.TouchView
         android:id="@+id/myandroid"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:src="@drawable/android"
         />
     <com.exercise.AndroidDetechTouch.InfoView
         android:id="@+id/infoview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         />

 </FrameLayout>
</LinearLayout>

The custom ImageView, TouchView.java

package com.exercise.AndroidDetechTouch;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

public class TouchView extends ImageView {
 
 Bitmap bitmap, mask;
 double bmWidth, bmHeight; 
 
 String touchInfo;
 float touchX, touchY;
 
 String part;

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

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

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

  bitmap = ((BitmapDrawable)getDrawable()).getBitmap();
  mask = BitmapFactory.decodeResource(getResources(), R.drawable.android_mask);
  bmWidth = (double)bitmap.getWidth();
  bmHeight = (double)bitmap.getHeight();
 }

 @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:
   touchX = event.getX();
   touchY = event.getY();

   long maskColor = getColor(touchX, touchY);
   
   //Match the color in Mask bitmap
   if(maskColor == Color.RED){
    touchInfo = "Heart";
   }else if(maskColor == Color.GREEN){
    touchInfo = "Head";
   }else if(maskColor == Color.BLUE){
    touchInfo = "Body";
   }else if(maskColor == -256){
    touchInfo = "Hand";
   }else if(maskColor == -16711681){
    touchInfo = "Foot";
   }else{
    touchInfo = "";
   }

   ((AndroidDetechTouchActivity)getContext()).updateMsg(touchInfo, touchX, touchY, (int)maskColor);
   return true;

  default:
   return false;
  }

 }
 

 private long getColor(float x, float y){

  if ( x < 0 || y < 0 || x > (float)getWidth() || y > (float)getHeight()){
   return 0; //Invalid, return 0
  }else{
   //Convert touched x, y on View to on Bitmap
   int xBm = (int)(x * (bmWidth / (double)getWidth()));
      int yBm = (int)(y * (bmHeight / (double)getHeight()));

   return mask.getPixel(xBm, yBm);
  }
 }

}

InfoView.java, the wording will be display here.

package com.exercise.AndroidDetechTouch;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class InfoView extends View {
 
 String info = "";
 float x = 0; //init value 
 float y = 0; //init value
 int color = Color.BLACK;

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

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

 public InfoView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  // TODO Auto-generated constructor stub
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  // TODO Auto-generated method stub
  super.onDraw(canvas);
  
  Paint paint = new Paint();
  paint.setStyle(Paint.Style.FILL_AND_STROKE);
  paint.setColor(color);
  paint.setStrokeWidth(2);
  paint.setTextSize(30);
  
  canvas.drawLine(x-10, y, x+10, y, paint);
  canvas.drawLine(x, y-10, x, y+10, paint);
  canvas.drawText(info, x, y, paint);
  
 }

 public void updateInfo(String t_info, float t_x, float t_y, int t_c){
  info = t_info;
  x = t_x;
  y = t_y;
  color = t_c;
  invalidate();
 }
 
 public void clearInfo(){
  info = "";
  x = 0;
  y = 0;
  invalidate();
 }

}

main activity, AndroidDetechTouchActivity.java

package com.exercise.AndroidDetechTouch;

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

public class AndroidDetechTouchActivity extends Activity {

 TouchView myAndroid;
 InfoView infoView;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        myAndroid = (TouchView)findViewById(R.id.myandroid);
        infoView = (InfoView)findViewById(R.id.infoview);

    }

    public void updateMsg(String t_info, float t_x, float t_y, int t_c){

     infoView.updateInfo(t_info, t_x, t_y, t_c);
     
    }
    
    public void clearMsg(){

     infoView.clearInfo();
     
    }

}

Download the files.

In this example, It's difficult to align the image of a ImageView and the bitmap! I have another more flexible approach in next exercise: Map the touch position with a mask, version II.