Android - place CrossHair(Image) for reference over the camera2 textureView

Question

enter image description hereI have used the android Camera2Basic API example to build a camera app. I wish to place a crosshair(which is a horizontal line, .png image) on top of the camera preview.

The GitHub link to the example is : https://github.com/googlesamples/android-Camera2Basic

Here is the original XML of the Camera2Basic class :

 <?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.amb.modone.AutoFitTextureView
    android:id="@+id/texture"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    />


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

I tried placing the .png image as an ImageView but the Camera Preview textureView covers it every time and it isn't visible on the live camera preview.

I have also tried the following examples: android Camera2 API + TextureView overlay for drawing on camera preview

And in the above case, I got an error as "cannot find symbol variable surface" from the LinearLayout present in the XML layout for the CustomView.

Need Help!

[EDIT]This is the crossHair image :

Answer 1

For me (on Nexus 5 with Android 6.0.1), the following fragment layout works like charm:

<FrameLayout 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_gravity="start|top" />

  <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="112dp"
    android:scaleType="fitCenter"
    android:src="@drawable/cross_hair"
    android:layout_gravity="start|top" />

  <FrameLayout
    android:id="@+id/control"
    android:layout_width="match_parent"
    android:layout_height="112dp"
    android:layout_gravity="start|bottom"
    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>

</FrameLayout>