To detect the touch events on the canvas of a View class we can use the boolean method onTouchEvent(MotionEvent). In the View created in example below, it draws a line from previous touch point to new touch point.
package com.example.drawdemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class SkView extends View {
private Paint myPaint;
float startX = 0;
float startY = 0;
float endX = 0;
float endY = 0;
public SkView(Context context) {
super(context);
init();
}
public SkView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public SkView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
myPaint = new Paint();
myPaint.setStyle(Paint.Style.STROKE);
myPaint.setStrokeWidth(8);
myPaint.setColor(Color.RED);
myPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawLine(startX, startY, endX, endY, myPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = endX;
startY = endY;
endX = event.getX();
endY = event.getY();
invalidate(); // Redraw
break;
case MotionEvent.ACTION_MOVE:
startX = endX;
startY = endY;
endX = event.getX();
endY = event.getY();
invalidate(); // Update as finger moves
break;
case MotionEvent.ACTION_UP:
// You can handle finger lift if needed
break;
}
return true;
}
}
Add the View in activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#FFFFFF">
<com.example.drawdemo.SkView
android:id="@+id/skView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>In MainActivity.java put following codes.
package com.example.drawdemo;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Output
- The screen shows a white background.
- When you touch and move your finger, it draws red lines connecting each movement point (like freehand drawing).