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.
