How can I use scan QR Code with a camera inside the layout (like Whatsapp Web scanner)

debugcn Published at Dev

Renato Gonçalves

I'm developer but new in Android and I need to know how can I use camera inside a Activity Layout.

I know I need to use Surface View to insert camera inside an activity and currently my app is reading QR Codes with Google Vision using default camera (a button opens camera, the user takes the photo and my app perceive the activity result).

But I really need to implementation that function inside app with real-time scanner.

Someone can direct me?

Sanket Mendon

Here is how I implemented something similar to what you need.

-Firstly, I used the Zxing library to implement this. So you need to add below dependency to your gradle:

compile 'com.journeyapps:zxing-android-embedded:3.5.0'

-Below is a direct link to the journeyapps scanner projects' Github link:

https://github.com/journeyapps/zxing-android-embedded

-Below is how I made my layout file:

<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.journeyapps.barcodescanner.DecoratedBarcodeView
        android:id="@+id/view_scanner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/view_footer"
        android:soundEffectsEnabled="true" />

    <LinearLayout
        android:id="@+id/view_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/view_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center|top"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/_10sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:src="@drawable/ic_back_light" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/_50sdp"
            android:gravity="right|top">

            <ImageView
                android:id="@+id/iv_flash"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="@dimen/_10sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:src="@drawable/ic_flash_inactive" />
        </LinearLayout>
    </LinearLayout>


    <LinearLayout
        android:id="@+id/view_footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:gravity="center"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="@dimen/_10sdp"
            android:layout_marginRight="@dimen/_10sdp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:id="@+id/code_info"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@string/font_sans_serif_light"
            android:padding="@dimen/_15sdp"
            android:text="@string/app_name"
            android:textColor="@android:color/white"
            android:textSize="@dimen/_15sdp" />


    </LinearLayout>

</FrameLayout>

So now the DecoratedBarcodeView serves as your main scanning area within your layout.

-Initialize your barcode view as below:

private DecoratedBarcodeView barcodeView;

barcodeView = (DecoratedBarcodeView) findViewById(R.id.view_scanner);
barcodeView.setStatusText("");
barcodeView.decodeContinuous(callback);

-In your activity, you can fetch the Scan result in your BarcodeCallback in this way:

private BarcodeCallback callback = new BarcodeCallback() {
    @Override
    public void barcodeResult(BarcodeResult result) {
        //Process your scan result here
        String resultString = result.getText();
    }

    @Override
    public void possibleResultPoints(List<ResultPoint> resultPoints) {
    }
};

Hope this helps.

Collected from the Internet

Please contact [email protected] to delete if infringement.