Wednesday, May 27, 2015

Create custom view with touch detection

Here we implement a custom view with touch detection, to show touched area.


com.example.androidtouchview.TouchView.java, our custom view.
package com.example.androidtouchview;

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 TouchView extends View {

    private Paint paint, touchPaint;
    private boolean touched;
    private float touchX, touchY;
    private float touchMajor, touchMinor;

    public TouchView(Context context) {
        super(context);
        init(null, 0);
    }

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

    public TouchView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs, defStyleAttr);
    }

    private void init(AttributeSet attrs, int defStyle) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(1);

        touchPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        touchPaint.setColor(Color.RED);
        touchPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        touchPaint.setStrokeWidth(1);

        touched = false;
    }

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

        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();
        int paddingBottom = getPaddingBottom();

        canvas.drawRect(
                0,
                0,
                getWidth(),
                getHeight(),
                paint);
        canvas.drawRect(
                paddingLeft,
                paddingTop,
                getWidth()- paddingRight,
                getHeight()- paddingBottom,
                paint);

        if(touched){
            canvas.drawCircle(touchX, touchY, touchMinor, touchPaint);
            canvas.drawCircle(touchX, touchY, touchMajor, paint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch(event.getAction()){
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
                touchX = event.getX();
                touchY = event.getY();
                touchMajor = event.getTouchMajor();
                touchMinor = event.getTouchMinor();
                touched = true;
                break;
            default:
                touched = false;
        }
        invalidate();
        return true;
    }
}


layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#E0E0E0">
        <com.example.androidtouchview.TouchView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="50dp"
            android:paddingRight="50dp"
            android:paddingTop="50dp"
            android:paddingBottom="50dp" />
    </LinearLayout>


</LinearLayout>


download filesDownload the files (Android Studio Format).

Android custom touch view, with callback interface.

No comments: