Monday, February 23, 2015

Custom ImageView to show touched portion only

Here is a custom ImageView (TouchImageView), override onTouchEvent(MotionEvent event) and onDraw(Canvas canvas) methods, to make it display the touched portion only.


package com.example.androidtouchimageview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

public class TouchImageView extends ImageView {

private float radius = 0;
private Paint paint = null;

private float x;
private float y;
private boolean touched = false;

public TouchImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

public TouchImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}

public TouchImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
}

@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
touched = (action == MotionEvent.ACTION_DOWN
|| action == MotionEvent.ACTION_MOVE);
x = event.getX();
y = event.getY();

int w = getWidth();
int h = getHeight();
if(w>=h){
radius = h * event.getSize();
}else{
radius = w * event.getSize();
}

invalidate();
return true;
}

@Override
protected void onDraw(Canvas canvas) {
if (paint == null) {
Bitmap bm = Bitmap.createBitmap(
getWidth(),
getHeight(),
Bitmap.Config.ARGB_8888);
Canvas originalCanvas = new Canvas(bm);
super.onDraw(originalCanvas);

Shader shader = new BitmapShader(bm,
Shader.TileMode.CLAMP,
Shader.TileMode.CLAMP);

paint = new Paint();
paint.setShader(shader);
}

canvas.drawColor(getSolidColor());
if (touched) {
canvas.drawCircle(x, y, radius, paint);
}
}

}


Layout
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.androidtouchimageview.MainActivity" >

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android-coding.blogspot.com"
android:textSize="28dp"
android:textStyle="bold" />

<com.example.androidtouchimageview.TouchImageView
android:id="@+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />

<com.example.androidtouchimageview.TouchImageView
android:id="@+id/image2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/ic_launcher" />

</LinearLayout>

No comments:

Post a Comment