Tutorial Membuat QR Code dan Barcode Scanner Android (Part 1) — Kotlin
Assalamualaykum.
Halo kawan semuanya.
Terimakasih atas kunjungannya pada artikel pertama Saya 😊
Pada kesempatan kali ini Saya akan membagikan tutorial membuat aplikasi scanner untuk membaca QR Code dan Barcode dengan Android Studio, ada beberapa library yang bisa digunakan untuk membaca QR Code dan Barcode namun pada kesempatan kali ini saya menggunakan library ZXING, bagi yang ingin mengetahui lebih banyak tentang library ini silakan kunjungi link berikut ini :
Pengenalan
Sebelum kita mulai koding, saya akan menjelaskan secara singkat aplikasi yang akan kita buat atau silakan langsung lihat ke github saya :
Dalam aplikasi ini terdapat dua activity yaitu :HomeActivity (menampilkan history hasil scan)
ScanActivity (scan image QR Code atau Barcode)Kita memakai database untuk menyimpan hasil scan dengan menggunakan AnkoSQLite
1. Buat Projek Baru
Buat projek baru di Android Studio, apabila kalian belum mengerti cara membuat projek baru di Android Studio silakan search di google hehe
2. Setting build.gradle
Setelah itu kalian tambahkan dependencies yang dibutuhkan pada file build.gradle, jangan lupa untuk Sync Now… , berikut ini beberapa library yang perlu ditambahkan :
3. Tambahkan Permissions
Dikarenakan library ZXING ini membutuhkan akses kamera pada perangkat android maka dari itu kita perlu menambahkan perijinan/permissions kamera pada file AndroidManifest.xml :
<uses-permission android:name=”android.permission.CAMERA” />4. Design Activity
Seperti yang sudah saya sampaikan diawal pada projek kali ini ada dua activity yaitu HomeActivity merupakan halaman awal ketika membuka aplikasi yang digunakan untuk menampilkan hasil scan yang telah disimpan di database, kemudian ScanActivity untuk menampilkan Scanner QR Code atau Barcode, silakan buat kedua acticity tersebut.
Berikut ini desain activity_home.xml
Berikut ini desain activity_scan.xml
Sampai pada tahap ini kita sudah dapat running app kita untuk melihat desain yang telah dibuat, namun tambahkan fungsi ini pada onCreate() di HomeActivity.kt agar dapat berpindah ke ScanActivity.kt.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_home)
scan_now.setOnClickListener {
val intent = Intent(this, ScanActivity::class.java)
startActivity(intent)
}
}Jika sudah berhasil, Selamat selanjutnya kita akan masuk pada tahap koding.
5. Membuat Fungsi Scan
Kita akan membuat fungsi kamera scan terlebih dahulu, Silakan buka ScanActivity.kt dan ketik source code berikut :
Penjelasan
Di sini Saya akan menjelaskan beberapa hal yang penting saja tidak semuanya, jika ingin melihat keseluruhan silakan kawan-kawan langsung ke github Saya.
Yang perlu kawan-kawan perhatikan adalah di dalam fungsi onCreate(), terdapat pemanggilan fungsi sebagai berikut :
init()
checkPermissions()
buttonControl()fungsi init() berguna untuk memberikan initial value terhadap beberapa variabel untuk konfigurasi default kamera ketika activity pertama kali dibuka.Selanjutnya untuk menggunakan fungsi scanner ZXING kita perlu extend class ZXingScannerView.ResultHandler, ketika melakukan extend kelas tersebut kita harus override fungsi handleResult(), fungsi ini secara otomatis menangkap hasil deteksi camera ketika camera diarahkan pada gambar QR Code maupun Barcode.Namun sebelumnya kita perlu membuat fungsi untuk cek apakah penggunaan kamera sudah diijinkan dengan fungsi checkPermissions(), fungsi ini akan terus dipanggil ketika membuka ScanActivity.kt, karena kita melakukan pengecekan perijinan kamera maka kita juga perlu override fungsi ketika aplikasi telah memberikan perijinan dengan fungsi onRequestPermissionsResult().fungsi buttonControl() digunakan untuk mengubah konfigurasi kamera seperti mengaktifkan flash kamera, mengganti kamera depan atau belakang, dan mengatur autofocus kameraterdapat fungsi setupFormat() digunakan untuk memberikan konfigurasi format apa saja yang dapat dibaca oleh aplikasi yang kita buat, pada dasarnya library ZXING ini dapat membaca banyak sekali format QR Code Barcode, nahh pada projek ini kita pakai semua format tersebut.
Dengan fungsi-fungsi di atas app yang kita buat sudah bisa membaca QR Code dan Barcode namun kita juga perlu menangkap hasil scan dari kamera misalnya kita ingin tampilkan ke dalam Toast atau Log, nahh pada projek kali ini kita akan tampilkan ke dalam Alert Dialog, untuk memudahkan kita dalam membuat alert dialog kali ini saya memakai library MaterialDialog berikut librarynya :
Alert Dialog tersebut akan kita tampilkan ketika kamera berhasil mendapatkan hasil scan sehingga kita perlu membuatnya di dalam fungsi handleResult().
Dalam projek ini Saya membuat fungsi showMessageDialog() di dalam fungsi handleResult() jadi ketika kamera telah berhasil melakukan scan lalu akan memanggil fungsi showMessageDialog() untuk menampilkan alert dialog, nah di dalam alert dialog tersebut kita menampilkan hasil scan dan dua button, scan ulang dan buka, kalian bisa mengganti sesuai kebutuhan.
Kemudian kita memiliki ide, gimana nih cara supaya kita dapat melihat kembali hasil scan, solusinya adalah kita menyimpannya di dalam database nah kita akan lanjutkan pada artikel berikutnya. Terimakasih yang telah membaca sampai akhir, See you in the next chapter guys! 😊👋
Demo Apps silakan download di link berikut :
