Membuat QRCode Scanner di Android Menggunakan Google Vision Api

April 12, 2018 0 Comments

Assalamualaikum Wr.Wb. Selamat malam, pada kesempatan kali ini Saya akan berbagi tutorial mengenai QR Code Scanner. kita akan membuat QR Code Scanner menggunakan Google Vision Api di Android. QR Code Scanner ini bisa diaplikasikan untuk login misalnya seperti login di whatsapp web dan lain-lain.



untuk membuatnya pertama-tama masukan despendency ini di module.gradle 
compile 'com.google.android.gms:play-services:10.0.1'

kemudian buat sebuah button untuk membuka camera dan sebuah textview untuk menampilkan hasil scan qrcode nya:
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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="com.giviews.qrcodescanner.MainActivity">



    <Button

        android:id="@+id/scanbtn"

        android:layout_marginTop="40dp"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="scan"

        android:layout_centerHorizontal="true" />



    <TextView

        android:id="@+id/result"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/scanbtn"

        android:text="RESULT"

        android:textSize="25dp"

        android:layout_marginTop="20dp"

        android:gravity="center"/>



</RelativeLayout>

kemudian masukan kode ini di javanya:
package com.giviews.qrcodescanner;



import android.Manifest;

import android.content.Intent;

import android.content.pm.PackageManager;

import android.support.v4.app.ActivityCompat;

import android.support.v4.content.ContextCompat;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.TextView;



import com.google.android.gms.vision.barcode.Barcode;



public class MainActivity extends AppCompatActivity {

    private Button scanbtn;

    private TextView result;

    public static final int REQUEST_CODE = 100;

    public static final int PERMISSION_REQUEST = 200;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {

            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA}, PERMISSION_REQUEST);

        }

        scanbtn = (Button) findViewById(R.id.scanbtn);

        result = (TextView) findViewById(R.id.result);

        scanbtn.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Intent intent = new Intent(getApplicationContext(), ScanActivity.class);

                startActivityForResult(intent, REQUEST_CODE);

            }

        });

    }



    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        if (requestCode == REQUEST_CODE && resultCode == RESULT_OK) {

            if (data != null) {

                final Barcode barcode = data.getParcelableExtra("barcode");

                result.post(new Runnable() {

                    @Override

                    public void run() {

                        result.setText(barcode.displayValue);

                    }

                });

            }

        }

    }

}

lalu buat activity baru dengan nama Scan Activity. dan masukan kode ini untuk xml nya:
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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="com.giviews.qrcodescanner.ScanActivity">



    <SurfaceView

        android:id="@+id/cameraView"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />



</RelativeLayout>

selanjutnya untuk java di ScanActivity masukan kode dibawah ini:
package com.giviews.qrcodescanner;



import android.*;

import android.Manifest;

import android.content.Intent;

import android.content.pm.PackageManager;

import android.support.v4.content.ContextCompat;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.SparseArray;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.widget.Toast;



import com.google.android.gms.vision.CameraSource;

import com.google.android.gms.vision.Detector;

import com.google.android.gms.vision.barcode.Barcode;

import com.google.android.gms.vision.barcode.BarcodeDetector;



import java.io.IOException;



import static com.giviews.qrcodescanner.MainActivity.REQUEST_CODE;



public class ScanActivity extends AppCompatActivity {

    SurfaceView cameraView;

    BarcodeDetector barcode;

    CameraSource cameraSource;

    SurfaceHolder holder;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_scan);

        cameraView = (SurfaceView) findViewById(R.id.cameraView);

        cameraView.setZOrderMediaOverlay(true);

        holder = cameraView.getHolder();

        barcode = new BarcodeDetector.Builder(this)

                .setBarcodeFormats(Barcode.QR_CODE)

                .build();

        if (!barcode.isOperational()) {

            Toast.makeText(getApplicationContext(), "Sorry couldnt setup the detector", Toast.LENGTH_LONG).show();

            this.finish();

        }



        cameraSource = new CameraSource.Builder(this, barcode)

                .setFacing(CameraSource.CAMERA_FACING_BACK)

                .setRequestedFps(24)

                .setAutoFocusEnabled(true)

                .setRequestedPreviewSize(1920,1024)

                .build();

        cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {

            @Override

            public void surfaceCreated(SurfaceHolder surfaceHolder) {

                try {

                    if (ContextCompat.checkSelfPermission(ScanActivity.this, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {

                        cameraSource.start(cameraView.getHolder());

                    }

                } catch (IOException e) {

                    e.printStackTrace();

                }

            }



            @Override

            public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2) {



            }



            @Override

            public void surfaceDestroyed(SurfaceHolder surfaceHolder) {



            }

        });

        barcode.setProcessor(new Detector.Processor<Barcode>() {

            @Override

            public void release() {



            }



            @Override

            public void receiveDetections(Detector.Detections<Barcode> detections) {

                final SparseArray<Barcode> barcode = detections.getDetectedItems();

                if (barcode.size() > 0) {

                    Intent intent = new Intent();

                    intent.putExtra("barcode", barcode.valueAt(0));

                    setResult(RESULT_OK, intent);

                    finish();

                }

            }

        });

    }

}

terakhir tambahkan permission untuk mengakses kamera di manifest
<uses-permission android:name="android.permission.CAMERA" />

dan tambahkan metadata di dalam application
<meta-data

    android:name="com.google.android.gms.vision.DEPENDENCIES"

    android:value="barcode" />


jika scan berhasil



Selanjutnya test qr-code scannernya, untuk qr codenya anda bisa mencoba qrcode generator di web. Ok sekianlah tutorial kali ini kurang lebihnya mohon maaf jika ada yang kurang jelas silakan ditanyakan di komentar, jika artikel ini bermanfaat silakan di share

Juanas Smith Shared

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 komentar :