Map the touch position with a mask, version II.

In the last exercise "Map the touch position with a mask", I tried to map a touched position from screen to a mask bitmap. It's difficult to align the image of a ImageView and the bitmap!

It's another more flexible approach: I create another invisible custom ImageView, MaskView. It have the same layout assigned for TouchView. It use the mask image as background. TouchView is resumed to use the display image as background. Such that I can get background color from MaskView to map with touch position in TouchView.

Doing so, I can easy to allocate it in any place, any size.

Implement a custom ImageView, MaskView.java

package com.exercise.AndroidDetechTouch;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class MaskView extends ImageView {

 Bitmap bitmap;
 double bmWidth, bmHeight;
 
 public MaskView(Context context) {
  super(context);
  init();
 }

 public MaskView(Context context, AttributeSet attrs) {
  super(context, attrs);
  init();
 }

 public MaskView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  init();
 }
 
 private void init(){
  bitmap = ((BitmapDrawable)getBackground()).getBitmap();
  bmWidth = (double)bitmap.getWidth();
  bmHeight = (double)bitmap.getHeight(); 
 }
 
 public int 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 bitmap.getPixel(xBm, yBm); 
  }
 }

}

Modify TouchView.java, it get pixel color from MaskView indirectly.

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);
   long maskColor = getMaskColor(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 getMaskColor(float x, float y){
  AndroidDetechTouchActivity parent = (AndroidDetechTouchActivity)(getContext());
     return parent.getMaskColor(x, y);
    }
 

 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);
  }
 }

}

Modify AndroidDetechTouchActivity.java

package com.exercise.AndroidDetechTouch;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class AndroidDetechTouchActivity extends Activity {

 TouchView myAndroid;
 InfoView infoView;
 
 MaskView myMask;
 
    /** 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);
        myMask = (MaskView)findViewById(R.id.mymask);

    }

    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();
     
    }
    
    public long getMaskColor(float x, float y){
     return myMask.getColor(x, y);
    }

}

Modify main.xml to add MaskView. Both MaskView and TouchView set android:background instead of android:src. Also set MaskView invisible.

<?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" />
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="bottom"
        >
 <FrameLayout 
        android:layout_width="fill_parent"
        android:layout_height="250dp"
     >
  <com.exercise.AndroidDetechTouch.MaskView
         android:id="@+id/mymask"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:background="@drawable/android_mask"
         android:visibility="invisible"
         />
     <com.exercise.AndroidDetechTouch.TouchView
         android:id="@+id/myandroid"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:background="@drawable/android"
         />
     <com.exercise.AndroidDetechTouch.InfoView
         android:id="@+id/infoview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         />

 </FrameLayout>
 </LinearLayout>
</LinearLayout>

Download the files.