Cara Membuat Aplikasi Scan QR Code Android
Tutorial pemrograman android kali ini mengenai bagaimana cara membuat aplikasi scan QR Code android dengan menggunakan custom layout. Seperti kita ketahui QR Code ini biasanya banyak dijumpai di supermarket ataupun untuk jaman sekarang absensi sekolah ataupun kantor pun memakai Scan QR Code. Agar aplikasi dapat membaca QR Code ini kita akan menggunakan sebuah Library Code Scanner dengan basenya ZXing.
Nah, di tutorial cara membuat aplikasi scan QR code android disini kita akan menggunakan custom layout. Maksudnya gimana? jadi untuk tampilan scannya sesuai dengan apa yang diinginkan oleh kita. Biasanya kita suka menggunakan default layoutnya library Code Scanner tersebut.
Setup Project
Buat project dengan nama QR Code Scanner lalu pilih empty activity
Menambakan beberapa library
Buka gradle app lalu tambahkan kode berikut :
|
1 2 3 |
implementation 'com.android.support:design:28.0.0' implementation 'com.budiyev.android:code-scanner:2.1.0' implementation 'com.karumi:dexter:5.0.0' |
Catatan :
Code Scanner : Library untuk membaca QR Code. ( https://github.com/yuriy-budiyev/code-scanner )
Dexter : Library untuk memenuhi kebutuhan permission. Karena pada tutorial cara membuat aplikasi qr code ini kita menggunakan camera device sebagai scannernya. ( https://github.com/Karumi/Dexter )
Menyiapkan Permission Camera
Buka AndroidManifest.xml lalu tambahkan permission camera. Untuk kodenya seperti berikut :
|
1 |
<uses-permission android:name="android.permission.CAMERA"/> |
Full source code android manifest :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.app.qrcodescanner"> <uses-permission android:name="android.permission.CAMERA"/> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
Download Asset Gambar Background
Download asset image untuk kebutuhan custom layout pada aplikasi android kita. Jadi asset ini kita gunakan sebagai background.
Edit Layout Activity Main
Buka activity_main.xml lalu isi dengan beberapa komponen berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?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=".MainActivity"> <ImageView android:id="@+id/ivBgContent" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg_content" tools:ignore="ContentDescription" /> <com.budiyev.android.codescanner.CodeScannerView android:id="@+id/scannerView" android:layout_width="match_parent" android:layout_height="match_parent" app:autoFocusButtonColor="@android:color/transparent" app:autoFocusButtonVisible="false" app:flashButtonColor="@android:color/transparent" app:flashButtonVisible="false" app:frameAspectRatioHeight="1" app:frameAspectRatioWidth="1" app:frameColor="@android:color/transparent" app:frameCornersRadius="0dp" app:frameCornersSize="0dp" app:frameSize="1" app:frameThickness="0dp" app:maskColor="@android:color/transparent" /> </RelativeLayout> |
Untuk melihat settingan layout library code scanner kalian bisa akses disini ( https://github.com/yuriy-budiyev/code-scanner ). Nah, disini saya melakukan sedikit modifikasi untuk membuat seakan-akan camera ini full layar lalu diatasnya camera itu saya sisipkan gambar yang sudah disiapkan.
Inisialisasi dan membuat fungsi aplikasi
Buka MainActivity.java lalu inisialisasi beberapa komponen view dan class yang dibutuhkan :
|
1 2 3 |
private ImageView ivBgContent; private CodeScanner mCodeScanner; private CodeScannerView scannerView; |
Fungsi cek permission camera
Buatlah fungsi untuk mengecek permission camera sudah diberikan apa belum. Untuk kodenya seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
private void checkCameraPermission(){ Dexter.withActivity(this) .withPermission(Manifest.permission.CAMERA) .withListener(new PermissionListener() { @Override public void onPermissionGranted(PermissionGrantedResponse response) { mCodeScanner.startPreview(); } @Override public void onPermissionDenied(PermissionDeniedResponse response) { } @Override public void onPermissionRationaleShouldBeShown(PermissionRequest permission, PermissionToken token) { token.continuePermissionRequest(); } }) .check(); } |
Catatan :
Jika sudah diberikan maka secara otomatis kita memanggil fungsi library code scanner.
Fungsi Alert Dialog
Buatlah fungsi untuk memunculkan Alert Dialog. Alert Dialog ini berfungsi untuk menampilkan informasi dari hasil scan qode qr. Untuk kodenya seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
private void showAlertDialog(String message){ AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setMessage(message); builder.setCancelable(true); builder.setPositiveButton( "SCAN LAGI", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.cancel(); mCodeScanner.startPreview(); } }); builder.setNegativeButton( "CANCEL", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.cancel(); } }); AlertDialog alertDialog = builder.create(); alertDialog.show(); } |
Override method onResume dan onPause
Lalu tambahkan override onResume dan onPause. Untuk kodenya seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 |
@Override protected void onResume() { super.onResume(); checkCameraPermission(); } @Override protected void onPause() { mCodeScanner.releaseResources(); super.onPause(); } |
Inisialisasi fungsi dan komponen pada onCreate
Jika sudah sampai step ini berarti kamu tinggal inisialisasi komponen view dan class di dalam method onCreate. Untuk kodenya seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
ivBgContent = findViewById(R.id.ivBgContent); scannerView = findViewById(R.id.scannerView); ivBgContent.bringToFront(); mCodeScanner = new CodeScanner(this, scannerView); mCodeScanner.setDecodeCallback(new DecodeCallback() { @Override public void onDecoded(@NonNull final Result result) { runOnUiThread(new Runnable() { @Override public void run() { String message = "result :\n" + result.getText(); showAlertDialog(message); } }); } }); checkCameraPermission(); |
Catatan :
mCodeScanner.setDecodeCallback ini adalah sebuah listener untuk memanggil fungsi ketika scan sudah berhasil atau sudah didapatkan. Case disini ketika user sedang scan maka akan muncul sebuah alert dialog yang messagenya kita isi dari hasil result scan code qr.
Full Kode MainActivity.java
Untuk full kode pada MainActivity adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
public class MainActivity extends AppCompatActivity { private ImageView ivBgContent; private CodeScanner mCodeScanner; private CodeScannerView scannerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ivBgContent = findViewById(R.id.ivBgContent); scannerView = findViewById(R.id.scannerView); ivBgContent.bringToFront(); mCodeScanner = new CodeScanner(this, scannerView); mCodeScanner.setDecodeCallback(new DecodeCallback() { @Override public void onDecoded(@NonNull final Result result) { runOnUiThread(new Runnable() { @Override public void run() { String message = "result :\n" + result.getText(); showAlertDialog(message); } }); } }); checkCameraPermission(); } @Override protected void onResume() { super.onResume(); checkCameraPermission(); } @Override protected void onPause() { mCodeScanner.releaseResources(); super.onPause(); } private void checkCameraPermission(){ Dexter.withActivity(this) .withPermission(Manifest.permission.CAMERA) .withListener(new PermissionListener() { @Override public void onPermissionGranted(PermissionGrantedResponse response) { mCodeScanner.startPreview(); } @Override public void onPermissionDenied(PermissionDeniedResponse response) { } @Override public void onPermissionRationaleShouldBeShown(PermissionRequest permission, PermissionToken token) { token.continuePermissionRequest(); } }) .check(); } private void showAlertDialog(String message){ AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setMessage(message); builder.setCancelable(true); builder.setPositiveButton( "SCAN LAGI", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.cancel(); mCodeScanner.startPreview(); } }); builder.setNegativeButton( "CANCEL", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.cancel(); } }); AlertDialog alertDialog = builder.create(); alertDialog.show(); } } |
Jalankan Aplikasi
Jalankan aplikasi dan scan qr code dibawah ini maka tampilan dan fungsi akan seperti ini
Menghilangkan toolbar
Nah, untuk menghilakan toolbar aplikasi kita kalian bisa langsung ke styles.xml. Caranya res – values – styles.xml lalu ganti ke NoActionBar. Untuk kodenya seperti berikut :
|
1 2 3 4 5 6 7 |
<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> |
Download Project Android
Download Project QR Code Scanner Android
Tutorial pemrograman android menarik lainnya :
- Cara Membuat Text Bold, Italic, Underline di strings.xml
- Cara Membuat CRUD SQLite Database Android Studio
- Cara Membuat Template RecyclerView Adapter
Sekian tutorial pemrograman android kali ini mengenai Cara Membuat Aplikasi Scan QR Code Android. Semoga bermanfaat dan jika ada yang ingin ditanyakan boleh langsung tulis di kolom komentar. Terimakasih! Hatur nuhun!
8 Comments
jenih · November 5, 2019 at 9:59 pm
izin download dan kembangkan ya gan. terima kasih banyak sebelumnya
farizdotid · November 11, 2019 at 12:17 pm
terimakasih kembali gan 🙂
sin · November 10, 2019 at 6:17 pm
Ada tutoroal yang generate QR nya yang sudah koneksi dengan firebase ? ?
farizdotid · November 22, 2019 at 9:36 pm
Maksudnya generate QR imagenya pake firebase ? atau gimana gan?
Goes · November 18, 2019 at 10:03 am
Izin download ya gan, kalau hasil scan mau disave ke database gimana gan?
farizdotid · November 22, 2019 at 9:37 pm
Ke database mana gan? Lalu data apa yang di save kedalam database?
Gagas · November 21, 2019 at 5:13 pm
Kang, yang bisa langsung open browser dong kalo pake url😅
farizdotid · November 22, 2019 at 9:39 pm
Bisa pake kode seperti ini kang :
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(“http://www.google.com”));
startActivity(browserIntent);