Android SDK - camera2 - Draw rectangle over TextureView
- First, for the camera2 api android example there is open source google sample code. https://github.com/googlesamples/android-Camera2Basic
- Second, for the part where you want to draw a rectangle(touch to focus), follow these steps -
- Create a custom class extending SurfaceView.
- Call the onTouchListener method in this custom class to detect finger coordinates and draw your rectangle using paint class in android. -Add this custom class above your TextureView that is displaying preview from camera2.
- Turn the custom view transparent.
- When you touch at some point on device screen then onTouchListener will be called which will draw on the canvas of custom view you added above you camera preview.
- Finally, clear your canvas so you don't keep adding rectangles to the custom view since you only need one rect at one point of time.
- Also, if not touched for some time the rectangle should disappear. Do this using a handler from custom view.
I am giving you some tested code to do this. I hope it helps you. BEST OF LUCK.
private class CustomView extends SurfaceView {
private final Paint paint;
private final SurfaceHolder mHolder;
private final Context context;
public CustomView(Camera2BasicFragment context) {
super(context.getActivity().getBaseContext());
mHolder = getHolder();
mHolder.setFormat(PixelFormat.TRANSPARENT);
this.context = context.getActivity().getBaseContext();
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
invalidate();
if (mHolder.getSurface().isValid()) {
final Canvas canvas = mHolder.lockCanvas();
Log.d("touch", "touchReceived by camera");
if (canvas != null) {
Log.d("touch", "touchReceived CANVAS STILL Not Null");
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
canvas.drawColor(Color.TRANSPARENT);
canvas.drawCircle(event.getX(), event.getY(), 100, paint);
mHolder.unlockCanvasAndPost(canvas);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Canvas canvas1 = mHolder.lockCanvas();
if(canvas1 !=null){
canvas1.drawColor(0, PorterDuff.Mode.CLEAR);
mHolder.unlockCanvasAndPost(canvas1);
}
}
}, 1000);
}
mHolder.unlockCanvasAndPost(canvas);
}
}
return false;
}
}
I solved it -I had to set my surface view to drawColor(Color.TRANSPARENT) with a clear flag and all was fine.
For those who are looking for a full code, this sample code draws a small rectangle over the camera preview. Just add the surface view and modify the onViewCreated function in the Camera2BasicFragment project.
public class Camera2BasicFragment extends Fragment
implements View.OnClickListener, ActivityCompat.OnRequestPermissionsResultCallback {
SurfaceView surfaceView;
@Override
public void onViewCreated(final View view, Bundle savedInstanceState) {
view.findViewById(R.id.picture).setOnClickListener(this);
view.findViewById(R.id.info).setOnClickListener(this);
mTextureView = (AutoFitTextureView) view.findViewById(R.id.texture);
surfaceView = (SurfaceView) view.findViewById(R.id.surfaceView);
surfaceView.setZOrderOnTop(true);
SurfaceHolder mHolder = surfaceView.getHolder();
mHolder.setFormat(PixelFormat.TRANSPARENT);
mHolder.addCallback(new SurfaceHolder.Callback() {
@Override
public void surfaceCreated(SurfaceHolder holder) {
Canvas canvas = holder.lockCanvas();
if (canvas == null) {
Log.e(TAG, "Cannot draw onto the canvas as it's null");
} else {
Paint myPaint = new Paint();
myPaint.setColor(Color.rgb(100, 20, 50));
myPaint.setStrokeWidth(10);
myPaint.setStyle(Paint.Style.STROKE);
canvas.drawRect(100, 100, 200, 200, myPaint);
holder.unlockCanvasAndPost(canvas);
}
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
}
});
}
And the fragment_camera2_basic.xml file has an additional surface view
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.camera2basic.AutoFitTextureView
android:id="@+id/texture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<SurfaceView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/surfaceView"/>
<FrameLayout
android:id="@+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="@color/control_background">
<Button
android:id="@+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/picture" />
<ImageButton
android:id="@+id/info"
android:contentDescription="@string/description_info"
style="@android:style/Widget.Material.Light.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:padding="20dp"
android:src="@drawable/ic_action_info" />
</FrameLayout>
</RelativeLayout>