Draw rectangle over camera2 preview android

Question

I'm trying to draw a rectangle on a camera2 preview using the basic Camera2 from this link : https://github.com/googlesamples/android-Camera2Basic

and i followed the answer from this question on the forum :

android Camera2 API + TextureView overlay for drawing on camera preview

but i can't get it to work. I'll be very grateful if you can help me figure out how to solve my problem. Here is the class used to draw the rectangle : Rectangle.java

package com.example.android.camera2basic;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.View;

public class Rectangle extends View {
Paint paint = new Paint();

public Rectangle(Context context) {
    super(context);
}


@Override
public void onDraw(Canvas canvas) {
    paint.setColor(Color.GREEN);
    paint.setStyle(Paint.Style.FILL);
    Rect rect = new Rect(20, 56, 200, 112);
    canvas.drawRect(rect, paint );
}
}

xml file of the camera activity_camera.xml :

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context="com.example.android.camera2basic.CameraActivity">

<LinearLayout
android:id="@+id/surface"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />

</FrameLayout>

and this is the method used in the class where i added the rectangle to camera preview Camera2BasicFragment.java :

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fragment_camera2_basic, container, 
    false);
    LinearLayout linearLayout = (LinearLayout) 
    view.findViewById(R.id.surface);
    linearLayout.addView(new Rectangle(getActivity()));
    return view;
    }

and finaly the error appeared after the application crushed at launching :

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.android.camera2basic/com.example.android.camera2basic.CameraActivity}: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.LinearLayout.addView(android.view.View)' on a null object reference
                                                                                  at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2793)
                                                                                  at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2864)
                                                                                  at android.app.ActivityThread.-wrap12(ActivityThread.java)
                                                                                  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1567)
                                                                                  at android.os.Handler.dispatchMessage(Handler.java:105)
                                                                                  at android.os.Looper.loop(Looper.java:156)
                                                                                  at android.app.ActivityThread.main(ActivityThread.java:6523)
                                                                                  at java.lang.reflect.Method.invoke(Native Method)
                                                                                  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:941)
                                                                                  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:831)
                                                                               Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.LinearLayout.addView(android.view.View)' on a null object reference
                                                                                  at com.example.android.camera2basic.Camera2BasicFragment.onCreateView(Camera2BasicFragment.java:431)
                                                                                  at android.app.Fragment.performCreateView(Fragment.java:2361)
                                                                                  at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1000)
                                                                                  at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1178)
                                                                                  at android.app.BackStackRecord.run(BackStackRecord.java:815)
                                                                                  at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1585)
                                                                                  at android.app.FragmentController.execPendingActions(FragmentController.java:371)
                                                                                  at android.app.Activity.performStart(Activity.java:6929)
                                                                                  at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2756)
                                                                                  at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2864) 
                                                                                  at android.app.ActivityThread.-wrap12(ActivityThread.java) 
                                                                                  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1567) 
                                                                                  at android.os.Handler.dispatchMessage(Handler.java:105) 
                                                                                  at android.os.Looper.loop(Looper.java:156) 
                                                                                  at android.app.ActivityThread.main(ActivityThread.java:6523) 
                                                                                  at java.lang.reflect.Method.invoke(Native Method)

`fragment_camera2_basic.xml` apparently doesn't have `R.id.surface` — OneCricketeer, Jun 25 '17 at 18:58
Thank you sir ! i managed to figure out my mistake thanks to your comment ! i'll add the solution down below — user 007, Jun 26 '17 at 21:51

score 5 · Accepted Answer · edited Jun 26 '17 at 23:48

So thanks to @cricket_007 comment i figured my mistake. I was initialising the LinearLayout in the wrong xml file. It should be in fragment_camera2_basic.xml

Also, to manage to get the rectangle over the camera preview you should add it after this code :

<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" />

so the final xml file looks like this fragment_camera2_basic.xml :

<?xml version="1.0" encoding="utf-8"?>
<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" />
    <LinearLayout
        android:id="@+id/surface"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" />

    <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>

P.S : To manage to make the rectangle unfilled use this in the Rectangle.class : paint.setStyle(Paint.Style.STROKE);

can you share your solution? I get the circles on the canvas on touch event but the canvas background always stays black... — Gaurav Gupta, Feb 01 '18 at 19:06
I figured it out. Add `this.setZOrderOnTop(true);` in the constructor of `CustomView` class — Gaurav Gupta, Feb 05 '18 at 18:08

Draw rectangle over camera2 preview android

1 Answers1