Cara Membuat Aplikasi Scan QR Code Android

Published by farizdotid on August 26, 2019August 26, 2019

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.

Daftar Isi hide

1 Setup Project

1.1 Menambakan beberapa library

1.2 Menyiapkan Permission Camera

1.3 Download Asset Gambar Background

2 Edit Layout Activity Main

3 Inisialisasi dan membuat fungsi aplikasi

3.1 Fungsi cek permission camera

3.2 Fungsi Alert Dialog

3.3 Override method onResume dan onPause

3.4 Inisialisasi fungsi dan komponen pada onCreate

3.5 Full Kode MainActivity.java

4 Jalankan Aplikasi

4.1 Menghilangkan toolbar

5 Download Project Android

Setup Project

Buat project dengan nama QR Code Scanner lalu pilih empty activity

Menambakan beberapa library

Buka gradle app lalu tambahkan kode berikut :

implementation 'com.android.support:design:28.0.0'
implementation 'com.budiyev.android:code-scanner:2.1.0'
implementation 'com.karumi:dexter:5.0.0'

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 :

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

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

Full source code android manifest :

<?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>

<?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">

<intent-filter>

</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.

bg_content

Edit Layout Activity Main

Buka activity_main.xml lalu isi dengan beberapa komponen berikut :

<?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>

<?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 :

private ImageView ivBgContent;
private CodeScanner mCodeScanner;
private CodeScannerView scannerView;

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 :

 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 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 :

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();
    }

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 :

@Override
    protected void onResume() {
        super.onResume();
        checkCameraPermission();
    }

    @Override
    protected void onPause() {
        mCodeScanner.releaseResources();
        super.onPause();
    }

@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 :

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();

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 :

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();
    }
}

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

Cara Membuat Aplikasi Scan QR Code Android SCAN ME!

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 :

 <!-- 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>

<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 :

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!

3 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 ? ?

Cara Membuat Aplikasi Scan QR Code Android

Setup Project

Menambakan beberapa library

Menyiapkan Permission Camera

Download Asset Gambar Background

Edit Layout Activity Main

Inisialisasi dan membuat fungsi aplikasi

Fungsi cek permission camera

Fungsi Alert Dialog

Override method onResume dan onPause

Inisialisasi fungsi dan komponen pada onCreate

Full Kode MainActivity.java

Jalankan Aplikasi

Menghilangkan toolbar

Download Project Android

farizdotid

3 Comments

jenih · November 5, 2019 at 9:59 pm

farizdotid · November 11, 2019 at 12:17 pm

sin · November 10, 2019 at 6:17 pm

Leave a Reply Cancel reply

Pemrograman Android

Cara Membuat Text Bold, Italic, Underline di strings.xml

Pemrograman Android

Cara Membuat Fungsi Open Whatsapp di Aplikasi Android

Pemrograman Android

Cara Membuat CRUD SQLite Database Android Studio

Cara Membuat Aplikasi Scan QR Code Android

Setup Project

Menambakan beberapa library

Menyiapkan Permission Camera

Download Asset Gambar Background

Edit Layout Activity Main

Inisialisasi dan membuat fungsi aplikasi

Fungsi cek permission camera

Fungsi Alert Dialog

Override method onResume dan onPause

Inisialisasi fungsi dan komponen pada onCreate

Full Kode MainActivity.java

Jalankan Aplikasi

Menghilangkan toolbar

Download Project Android

farizdotid

3 Comments

jenih · November 5, 2019 at 9:59 pm

farizdotid · November 11, 2019 at 12:17 pm

sin · November 10, 2019 at 6:17 pm

Leave a Reply Cancel reply

Related Posts

Pemrograman Android

Cara Membuat Text Bold, Italic, Underline di strings.xml

Pemrograman Android

Cara Membuat Fungsi Open Whatsapp di Aplikasi Android

Pemrograman Android

Cara Membuat CRUD SQLite Database Android Studio