Tutorial Membuat QR Code Scanner di Android dengan Android Studio

Last Updated on 8 years by Mas Herdi

Halo semuanya, bagi yang sudah pernah atau sedang ingin membuat QR Code Scanner, pasti paling tidak pernah membaca artikel saya tentang bagaimana cara membuat QR Code Scanner di Android. Artikel tersebut ditulis lebih dari tiga tahun yang lalu, sehingga sekarang sudah tidak begitu relevan. 🙂 Karena itu, kali ini saya akan mencoba untuk mengupdate artikel tersebut, dengan artikel berikut tentang cara terbaru membuat aplikasi QR Code scanner di Android dengan mudah, menggunakan Android Studio.

Pre-Requisites :

Oke, bagi yang ingin membaca-baca artikel lama saya tentang cara membuat QR Code Scanner di Android, bisa menuju link di bawah ini :

• Artikel Lama Membuat QR Code Scanner di Android (Bag. I)
• Artikel Lama Membuat QR Code Scanner di Android (Bag. II)

Android QR Code Library

Seperti biasa, kita akan menggunakan third party library untuk men-scan QR Code, karena kita tidak akan membuat fungsionalitas itu sendiri dari awal. Jika sudah ada yang buat, dan bagus, maka kita pakai punya mereka :D. Library yang akan kita gunakan adalah ZXing seperti biasa. Kita bisa juga menggunakan Google Mobile Vision, namun soal itu mungkin akan saya bahas di lain waktu.

Warming Up

Langsung saja, kita bisa mulai dengan membuat project/module baru di Android Studio, yang akan kita gunakan untuk aplikasi QR Code Scanner ini. Berbeda dengan di tutorial saya sebelumnya yang harus menginstall APK dan sebagainya, kali ini kita tidak perlu melakukannya, kita hanya perlu menambahkan satu baris line library baru pada file build.gradle. Tambahkan di bagian dependencies seperti contoh di bawah :

dependencies {
    ...
    compile 'info.vividcode.android.zxing:capture-activity:2.3.0-1.+'
    ...
}

Setelah itu, lakukan sync Gradle supaya library dan project nya terupdate. Jika sudah, kita bisa membuka AndroidManifest.xml, dan menambahkan permissions sebagai berikut :

    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/>

Permission CAMERA digunakan karena untuk melakukan QR Code Scanning kita harus menggunakan kamera pada smartphone Android, karena itu aplikasi kita harus mendapatkan akses ke fitur kamera. Sedangkan permission lainnya sebagai penambah saja.

Kemudian, tambahkan juga CaptureActivity bawaan ZXing ke dalam list Activity di AndroidManifest.xml. CaptureActivity inilah yang nantinya akan dijalankan ketika kita melakukan QR Code scanning. Kodenya seperti berikut :

        <activity
            android:name="info.vividcode.android.zxing.CaptureActivity"
            android:configChanges="orientation|keyboardHidden"
            android:screenOrientation="landscape"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
            android:windowSoftInputMode="stateAlwaysHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
            <intent-filter>
                <action android:name="com.google.zxing.client.android.SCAN" />

                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>

Jika sudah, kalian bisa mulai mencoding layout dan fungsi utama untuk melakukan QR Code Scanning. Jadi mekanismenya, Activity kita akan memanggil CaptureActivity untuk melakukan proses scan, setelah berhasil, maka kita akan dikembalikan lagi ke Activity kita. Hasil dari scan QR Code akan dimasukkan ke dalam bundle Intent, yang bisa kita akses pada method onActivityResult() di MainActivity.

Untuk layout, saya menambahkan satu tombol scan dan beberapa TextView untuk tempat menampung hasil scan, kodenya ada di file content_main.xml, kurang lebih seperti di bawah ini :

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="id.web.twoh.easyqr.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_marginTop="150dp"
        android:id="@+id/tv_title"
        android:layout_alignParentTop="true"
        android:textColor="@color/status_text"
        android:textAppearance="@android:style/TextAppearance.Material.Headline"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TWOH's Easy QR Scanner" />

    <Button
        android:layout_centerHorizontal="true"
        android:text="Mulai Scan"
        android:id="@+id/bt_scan"
        android:layout_below="@id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <TextView
        android:layout_marginTop="50dp"
        android:layout_below="@id/bt_scan"
        android:id="@+id/tv_scanresult_title"
        android:textAppearance="@android:style/TextAppearance.Material.Body1"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hasil Scan : " />

    <TextView
        android:layout_below="@id/tv_scanresult_title"
        android:id="@+id/tv_scanresult"
        android:textColor="@color/status_text"
        android:textAppearance="@android:style/TextAppearance.Material.Large"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="_" />
</RelativeLayout>

Selanjutnya pada file MainActivity.java, inilah kode yang akan menginitiate fungsi QR Code scanning ketika tombol btScan diklik :

        Button btScan = (Button) findViewById(R.id.bt_scan);
        btScan.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // Membuat intent baru untuk memanggil CaptureActivity bawaan ZXing
                Intent captureIntent = new Intent(MainActivity.this, CaptureActivity.class);

                // Kemudian kita mengeset pesan yang akan ditampilkan ke user saat menjalankan QRCode scanning
                CaptureActivityIntents.setPromptMessage(captureIntent, "Barcode scanning...");

                // Melakukan startActivityForResult, untuk menangkap balikan hasil dari QR Code scanning
                startActivityForResult(captureIntent, 0);
            }
        });

Langkah berikutnya adalah menangkap hasil dari QR Code scanning dengan menggunakan method onActivityResult() pada MainActivity.java. Kalian harus meng-override method onActivityResult() dan menggantinya dengan kode di bawah ini :

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == 0) {
            if (resultCode == Activity.RESULT_OK && data != null) {
                String value = data.getStringExtra("SCAN_RESULT");
                tvScanResult.setText(value);
            } else if (resultCode == Activity.RESULT_CANCELED) {
                tvScanResult.setText("Scanning Gagal, mohon coba lagi.");
            }
        } else {

        }
        super.onActivityResult(requestCode, resultCode, data);
    }

Pada intinya, kode di atas berguna akan mengecek apakah balikan dari QR code scanning statusnya OK/sukses, dan ada data yang bisa kita ambil. Jika ada, maka kita akan menggunakan key SCAN_RESULT, untuk mengambil value hasil scanning QR code yang tersimpan dalam Intent balikan. Value tersebut nantinya akan kita masukkan ke dalam TextView sebagai hasil dari scan QR Code.

Demo

Oke, untuk demonya, kita akan mencoba men-scan QR Code berikut :

QR Code twoh.co

Dan hasilnya adalah proses di bawah ini 🙂 Mulai dari klik tombol “Scan”, kemudian halaman barcode scanning, dan terakhir kembali ke halaman awal dengan menyertakan hasil scan di bagian bawah.

QR Code Scan step by step | (c) Instagram

That’s all ! Semoga membantu. 🙂 Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. 😀 Silahkan bertanya di bagian komentar jika ada yang kurang jelas.