Membuat QR Code Reader Sederhana pada Android (End)

Untuk tutorial membuat QR Code Scanner yang lebih mudah, klik link ini.

Oke, kali ini saya akan melanjutkan tutorial membuat QRCode Scanner sederhana pada Android. Langsung saja, pada postingan yang pertama kemarin kita sudah menyiapkan library yang akan digunakan. Sekarang kita akan membuat aplikasi QRCode scannernya.

Pre Requisites

The Code

Aplikasi ini akan mempunyai dua buah Activity Class, yaitu MainActivity dan QRScanner Activity. MainActivity hanya berisi nama program dan sebuah tombol, sedangkan QRScanner-lah yang melakukan proses pemindaian QRCode.

Pertama-tama kita akan membuat dahulu layout untuk MainActivity, yang bernama MainActivity.xml. Beginilah kodenya :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@drawable/background"
    >

    <TextView
        android:id="@+id/labelText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="185dp"
        android:text="QR Code Scanner"
        android:textSize="25sp"
        android:textColor="#0044ff"
        />
    <TextView
        android:id="@+id/labelCopy"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/labelText"
        android:text="by : twoh.co"
        android:textSize="15sp"
        android:textColor="#444444"
        />
    <Button
        android:id="@+id/buttonStart"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/labelCopy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="mulai"
        />

</RelativeLayout>

Layout tersebut menggunakan RelativeLayout dan hanya mempunyai satu tombol. Quite simple. Setelah itu, buka file MainActivity.java dan masukkan kode berikut :

package id.web.twoh.qrproject;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{

	Button startButton;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		startButton = (Button) findViewById(R.id.buttonStart);
		startButton.setOnClickListener(this);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

	@Override
	public void onClick(View v) {
		switch(v.getId())
		{
			case R.id.buttonStart : Intent i = new Intent(this, QRScanner.class);
									startActivity(i);
		}
	}

}

Apabila ada error, biarkan dahulu untuk sementara 😀 File MainActivity.java berfungsi untuk menampilkan layout yang tadi kita buat dan menghubungkan tombol dengan Activity kedua, yaitu QRScanner Activity.

Buatlah file baru bernama QRScanner.java dan copy paste kan kode berikut :

package id.web.twoh.qrproject;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;

import com.example.BarcodeTest.IntentIntegrator;
import com.example.BarcodeTest.IntentResult;

public class QRScanner extends Activity {
    /** Called when the activity is first created. */

	private String upc;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //jendela tanpa title
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        //memulai pemindaian QRCode
        IntentIntegrator.initiateScan(this);
    }
    // cek hasil dari QRCode
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    	switch(requestCode) {
    		case IntentIntegrator.REQUEST_CODE: {
    			if (resultCode != RESULT_CANCELED) {
    				IntentResult scanResult = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);
    				// apabila ada hasil dari pemindaian
    				if (scanResult != null) {
    					// ambil isi dari QRCode
    					upc = scanResult.getContents();
    					//	tampilkan pada Alert Dialog
    					final AlertDialog.Builder builder=new AlertDialog.Builder(QRScanner.this);
						builder.setTitle("Hasil Scan");
						builder.setMessage(upc+"\n");
						builder.setIcon(android.R.drawable.ic_dialog_alert);
						// Tombol untuk simpan data
						builder.setPositiveButton("Simpan", new OnClickListener() {
							@Override
							public void onClick(DialogInterface dialog, int which) {
									// Buat simpan ke database atau ke mana
									// doSomething();
									QRScanner.this.finish();
									IntentIntegrator.initiateScan(QRScanner.this);

							}
						});
						// Tombol untuk coba lagi/keluar
						builder.setNegativeButton("Coba Lagi", new OnClickListener() {
							@Override
							public void onClick(DialogInterface dialog, int which) {
								// TODO Auto-generated method stub
								QRScanner.this.finish();
								IntentIntegrator.initiateScan(QRScanner.this);
							}

						});
						// tampilkan alert box
						builder.show();
    				}
    		break;
    			}
    		}
    	}

    }
}

Yups, itulah kode untuk QRScanner.java, kelas tersebut berfungsi untuk memanggil Barcode Scanner yang nantinya akan melakukan proses scanning QRCode. Apabila ada QRCode yang terdeteksi, maka hasilnya akan dimunculkan melalui Alert Dialog. Dan dari situ ada dua aksi yang bisa kita ambil, apakah ingin menyimpan hasil, atau ingin mencoba scanning lagi.

Yang terakhir adalah file AndroidManifest.xml, jangan lupa untuk mendaftarkan QRScanner sebagai Activity baru, kodenya sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="id.web.twoh.qrproject"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="id.web.twoh.qrproject.MainActivity"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.NoTitleBar"
            >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="id.web.twoh.qrproject.QRScanner"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.NoTitleBar"
            >
		</activity>
    </application>

</manifest>

Demo Aplikasi

Langsung saja untuk demo aplikasinya :

Nampak halaman depan aplikasinya, mantap jaya :D

Nampak halaman depan aplikasinya, mantap jaya 😀

Tampilan apabila aplikasi dibuka, klik tombol, maka akan masuk ke bagian pemindaian QR Code. Ini adalah tampilan aplikasi ketika ada data QRCode yang berhasil ditangkap.

Aplikasi mendeteksi adanya QRCode saat Scanning

Aplikasi mendeteksi adanya QRCode saat Scanning

Dan aplikasi otomatis akan menampilkan alert dialog apabila telah selesai mendeteksi QR Code.

Menampilkan data scan menggunakan Alert Dialog

Menampilkan data scan menggunakan Alert Dialog

That’s all. Aplikasi QRCode scanner ini sangat berguna untuk membuat aplikasi kehadiran, atau aplikasi pencatatan inventoris barang. Semoga berguna 🙂

Seperti biasa, tinggalkan komentar apabila masih ada yang kurang dimengerti 😉





Download aplikasi kami di Google Play Store


83 Comments

  1. arika February 7, 2013
    • Herdi Naufal February 7, 2013
  2. Arika February 7, 2013
  3. arika February 8, 2013
  4. Liyandari March 4, 2013
  5. yamato latief takeru March 13, 2013
  6. adjie March 21, 2013
    • Herdi Naufal March 22, 2013
      • adjie March 22, 2013
        • Herdi Naufal March 22, 2013
          • adjie March 22, 2013
          • Herdi Naufal March 22, 2013
  7. irwan Dwiyanto May 1, 2013
    • Herdi Naufal May 2, 2013
  8. irwan Dwiyanto May 5, 2013
  9. wali May 18, 2013
    • Herdi Naufal May 29, 2013
      • Rendy July 6, 2014
  10. khalid May 29, 2013
  11. delfianalfa July 10, 2013
    • Hafizh Herdi Naufal July 11, 2013
  12. ary July 11, 2013
  13. ardhi July 11, 2013
  14. ericbudi September 16, 2013
    • Hafizh Herdi Naufal September 18, 2013
  15. barnas October 18, 2013
    • Hafizh Herdi Naufal December 3, 2013
  16. uki November 24, 2013
    • Hafizh Herdi Naufal December 3, 2013
  17. awik December 6, 2013
  18. alex mawardi December 24, 2013
  19. nandez January 14, 2014
  20. hary March 6, 2014
  21. asha March 6, 2014
  22. andir July 17, 2014
  23. andir July 17, 2014
  24. thexman July 21, 2014
    • Hafizh Herdi Naufal July 22, 2014
  25. Suryo Aji August 5, 2014
  26. yoanna August 10, 2014
    • Hafizh Herdi Naufal August 11, 2014
      • yoanna August 14, 2014
  27. Ainul Ibnu Khotob August 26, 2014
  28. yohan October 14, 2014
  29. Shahibullah Rizki November 7, 2014
  30. yulia December 10, 2014
  31. Kakao January 16, 2015
  32. Rini May 15, 2015
  33. syafrul September 1, 2015
  34. Fury September 20, 2015
    • abdullah December 13, 2015
  35. andy January 8, 2016
  36. losandro April 25, 2016
  37. Budi Setiawan July 19, 2016
  38. iqbal August 6, 2016
  39. Bima December 19, 2016
  40. sasmitoh July 27, 2017
  41. dochisad August 9, 2017

Leave a Reply