How to decorate the camer preview during barcode scanning?

Question

I want to create a barcode scanner activity, I found this nice tutorial: http://www.devexchanges.info/2016/10/reading-barcodeqr-code-using-mobile.html

How can I decorate the preview image with detected area (with dots or rectangle).

Answer 1

Put another transparent view on top of your SurfaceView and draw on that. B oth views will loosely coupled, so there is some math involved in getting it right to match the decoration with the camera output.

So in your activity_main.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"
    android:padding="16dp">

    <SurfaceView
        android:id="@+id/surface_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" />

    <com.yourApp.YourDecoratorView
        android:id="@+id/decorator_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" />
    ...
</RelativeLayout> 

And then, create a custom view:

class YourDecoratorView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    ... initializing code

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        // your code
        canvas?.drawLine(0f, 0f, 0f, paint)
    }
}

If it is just static visuals you want to show, use an ImageView instead of a custom view and create the drawable you want.