Multi Touch Demo In Android

This application is a simple example which draws a line between different pointers when you touch the screen with two fingers.

Algorithm:

1.) Create a new project by File-> New -> Android Project name it MultiTouchDemo.

2.) Write following into main.xml:

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<com.example.multitouchdemo.MultitouchView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/touchView"/>
</LinearLayout>

 

 

3.) Create and write following into src/AppLog.java:

 

package com.example.multitouchdemo;

import android.util.Log;

public class AppLog {
private final static String APP_TAG = "com.example.multitouchdemo";

public static int log(String message){
return Log.i(APP_TAG,message);
}
}

 

 

4.) Create and write following into src/MultitouchView.java:

 

package com.example.multitouchdemo;

import java.util.ArrayList;

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

public class MultitouchView extends View {
private static final int STROKE_WIDTH = 1;
private static final int CIRCLE_RADIUS = 20;

private ArrayList<PointF> touchPoints = null;
private Paint drawingPaint = null;
private boolean isMultiTouch = false;
private int pathEffectPhase = 0;

public MultitouchView(Context context) {
super(context);

initialize(context);
}

public MultitouchView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);

initialize(context);
}

public MultitouchView(Context context, AttributeSet attrs) {
super(context, attrs);

initialize(context);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

if(touchPoints.size() > 0)
{
DashPathEffect effect = new DashPathEffect(new float[] {7,7}, pathEffectPhase);
PointF midpt = null;

drawingPaint.setPathEffect(effect);

for(int index=1; index<touchPoints.size(); ++index)
{
midpt = getMidPoint(
touchPoints.get(index - 1).x,touchPoints.get(index - 1).y,
touchPoints.get(index).x,touchPoints.get(index).y);

canvas.drawCircle(
touchPoints.get(index - 1).x,touchPoints.get(index - 1).y,
1, drawingPaint);
canvas.drawCircle(
touchPoints.get(index - 1).x,touchPoints.get(index - 1).y,
CIRCLE_RADIUS, drawingPaint);

canvas.drawCircle(touchPoints.get(index).x,touchPoints.get(index).y,
1, drawingPaint);
canvas.drawCircle(touchPoints.get(index).x,touchPoints.get(index).y,
CIRCLE_RADIUS, drawingPaint);

canvas.drawLine(
touchPoints.get(index - 1).x,touchPoints.get(index - 1).y,
touchPoints.get(index).x,touchPoints.get(index).y,
drawingPaint);

canvas.drawCircle(midpt.x,midpt.y, 10, drawingPaint);
}

++pathEffectPhase;

invalidate();
}
}

@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);

int action = event.getAction() & MotionEvent.ACTION_MASK;

switch(action)
{
case MotionEvent.ACTION_DOWN:
{
invalidate();

break;
}
case MotionEvent.ACTION_POINTER_DOWN:
{
isMultiTouch = true;

setPoints(event);
invalidate();

break;
}
case MotionEvent.ACTION_POINTER_UP:
{
isMultiTouch = false;

break;
}
case MotionEvent.ACTION_MOVE:
{
if(isMultiTouch)
{
setPoints(event);
invalidate();
}

break;
}
}

return true;
}

private void initialize(Context context){
drawingPaint = new Paint();

drawingPaint.setColor(Color.RED);
drawingPaint.setStrokeWidth(STROKE_WIDTH);
drawingPaint.setStyle(Paint.Style.STROKE);
drawingPaint.setAntiAlias(true);

touchPoints = new ArrayList<PointF>();
}

public void setPoints(MotionEvent event){
touchPoints.clear();

int pointerIndex = 0;

for(int index=0; index<event.getPointerCount(); ++index)
{
pointerIndex = event.getPointerId(index);

touchPoints.add(new PointF(event.getX(pointerIndex),event.getY(pointerIndex)));
}
}

private PointF getMidPoint(float x1,float y1, float x2, float y2) {
PointF point = new PointF();

float x = x1 + x2;
float y = y1 + y2;

point.set(x / 2, y / 2);

return point;
}
}

 

 

5.) Run for output.

Steps:

1.) Create a project named MultiTouchDemo and set the information as stated in the image.

Build Target: Android 4.0
Application Name: MultiTouchDemo
Package Name: com. example. MultiTouchDemo
Activity Name: MultiTouchDemoActivity
Min SDK Version: 2.2

2.) Open MultiTouchDemoActivity.java file and write following code there:

 

package com.example.multitouchdemo;

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

public class MultiTouchDemoActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

 

 

3.) Compile and build the project.

Note: – For better results check on device.

Output

Leave a Comment:

1 comment
aditya says March 10, 2015

How to draw multiple lines with multi touch and single touch
???

Reply
Add Your Reply