How to draw shapes into the preview

[Mark Z]

Hello,

I would like to grab some informations (text) out of the preview with image processing.

I've tried the "Getting started with cameraX". Perfect, it works for me and now I know how to get the preview data and how to process them.

To make it easier to adjust the camera to the right position, I would like to draw a red rectangle over/into the preview image (lets say rectangle X:Y ratio 8:10).

Because I'm new to android development, would be great to get a concrete example how to draw the rectangle into the "getting started" example.

Thanks, Mark

[Android CameraX Discussion Group]

Moving Ulziisaikhan Vanchindorj's feedback to this thread.

"You can use imageview to draw geometry shapes. See attached screenshots."

[Mark Z]

Thank you, I got it.

I created my own ViewClass and so I'm able to overlay and change rectangles while runtime:

```

class OverlayView : View {
private lateinit var myRedPaint: Paint


constructor(c: Context?) : super(c) {
init()
}

constructor(c: Context?, attr: AttributeSet?) : super(c, attr) {
init()
}

constructor(c: Context?, attr: AttributeSet?, defStyle: Int) : super(c, attr, defStyle) {
init()
}

private fun init() {
myRedPaint = Paint().apply { color = Color.RED; strokeWidth = 3.0f; style = Paint.Style.STROKE }
}


override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.drawRect(30f,30f, 60f, 60f, myRedPaint)
}

```

```

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="@+id/viewFinder"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<androidx.camera.view.PreviewView
android:id="@+id/viewFinder"
android:layout_width="480px"
android:layout_height="640px"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toTopOf="@+id/camera_capture_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"></androidx.camera.view.PreviewView>


<Button
android:id="@+id/camera_capture_button"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="24dp"
android:elevation="2dp"
android:scaleType="fitCenter"
android:text="Take Photo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/viewFinder" />

<com.example.mycamapp.OverlayView
android:id="@+id/overlayview"
android:layout_width="0dp"
android:layout_height="0dp"
android:elevation="20dp"
app:layout_constraintBottom_toBottomOf="@+id/viewFinder"
app:layout_constraintEnd_toEndOf="@+id/viewFinder"
app:layout_constraintStart_toStartOf="@+id/viewFinder"
app:layout_constraintTop_toTopOf="@+id/viewFinder" />

</androidx.constraintlayout.widget.ConstraintLayout>

```