Draw autofocus rectangle in preview using camera2 android

Question

I am using Camera2 api of Android. I am able to capture image and save it. I am using autofocus mode to focus and capture images.

captureBuilder.set(CaptureRequest.CONTROL_AF_MODE, CaptureRequest.CONTROL_AF_MODE_CONTINUOUS_PICTURE);

where captureBuilder is

private CaptureRequest.Builder captureBuilder;

I want to show a rectangle or circle in the autofocus area in the camera preview as it happens in the default camera application. For an instance like the rectangle in the middle of the preview here.

I have seen this but I do not want anything on touching anywhere in the preview.

I have searched through a lot of examples but most of them illustrate use of deprecated Camera class, nothing much useful on Camera2 api. How can this focus rectangle can this be achieved with the new camera api?

Answer 1

It looks like you just want a static rectangle in the center of the preview.

You can do this via an xml layout by adding the image into the layout.

Taking the Camera2Basic example (https://github.com/googlesamples/android-Camera2Basic) and adding it to this, the example below adds the rectangle, some text and control buttons on the side (it is for landscape orientation):

<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/control"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:background="@color/colorPrimary"
        android:orientation="vertical">

        <Space
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_weight="1" >
        </Space>

        <TextView
            android:id="@+id/label1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/label1_text" />

        <Space
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_weight="1" >
        </Space>

        <Button
            android:id="@+id/picture_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/picture_button_text" />

        <Space
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_weight="1" >
        </Space>

        <ImageButton
            android:id="@+id/info"
            style="@android:style/Widget.Material.Light.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:contentDescription="@string/description_info"
            android:padding="20dp"
            android:src="@drawable/ic_action_info" />

        <Space
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:layout_weight="1" >
        </Space>

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/tileview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_toLeftOf="@+id/control"
        android:background="@android:color/transparent" >

        <ImageView
            android:id="@+id/autofocus_rectangle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/autofocus_landscape_Image"
            android:layout_centerInParent="true" />

        <TextView
            android:id="@+id/bottom_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_alignParentBottom="true"
            android:layout_margin="10sp"
            android:background="@android:color/holo_blue_dark"
            android:textSize="15sp"
            android:padding="5sp"
            android:text="" />

    </RelativeLayout>

</RelativeLayout>