[2021.10.01] How to make QR & Barcode Scanner on Android Studio Using kotlin?

[2021.10.01] How to make QR & Barcode Scanner on Android Studio Using kotlin?



이번 게시글은 안드로이드 스튜디오 에서 QR 코드 인식 카메라 및 바코드 스캔을 만드는 법에 대해 알아보자.

 

 

 

그 전에 앞에서 작성한 게시글 들에 대한 설정을 전부 해줘야 한다.

- How to set Camera Screen on AVD? 
- How to Solve Fail to connect to camera service?

- How to Solve dynamic permissions on API?

 

 

자 이제, github에 어떤 분께서 미리 만들어 놓은 QR & 바코드를 사용하도록 하자.
https://github.com/yuriy-budiyev/code-scanner 

GitHub - yuriy-budiyev/code-scanner: Code scanner library for Android, based on ZXing

 

 

 

 

목차

- 빌드 종속 항목을 추가하는 방법

- 카메라 권한 추가하는 방법

- MainActivity.kt 코드 작성

- activity_main.xml 코드 작성

--------------------------------------------------------------------------------------------------------------------

1. 빌드 종속 항목을 추가하는 방법 

-> Gradle Script > build.gradle 파일을 연다.

-> 그런 다음에, dependencies 에 위의 사진처럼 아래 코드를 추가해준다.

implementation 'com.budiyev.android:code-scanner:2.1.0'

--------------------------------------------------------------------------------------------------------------------

2. 카메라 권한 추가하는 방법

-> app > manifests > AndroidManifest.xml 파일을 연다.

-> 그런 다음에, 아래의 밑줄친 코드를 추가해 준다.

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

--------------------------------------------------------------------------------------------------------------------

3. MainActivity.kt 코드 작성

package com.example.catholic_project

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.budiyev.android.codescanner.*


class MainActivity : AppCompatActivity() {
    private lateinit var codeScanner: CodeScanner

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val scannerView = findViewById<CodeScannerView>(R.id.scanner_view)

        codeScanner = CodeScanner(this, scannerView)

        // Parameters (default values)
        codeScanner.camera = CodeScanner.CAMERA_BACK // or CAMERA_FRONT or specific camera id
        codeScanner.formats = CodeScanner.ALL_FORMATS // list of type BarcodeFormat,
        // ex. listOf(BarcodeFormat.QR_CODE)
        codeScanner.autoFocusMode = AutoFocusMode.SAFE // or CONTINUOUS
        codeScanner.scanMode = ScanMode.SINGLE // or CONTINUOUS or PREVIEW
        codeScanner.isAutoFocusEnabled = true // Whether to enable auto focus or not


        // Callbacks
        codeScanner.decodeCallback = DecodeCallback {
            runOnUiThread {
                Toast.makeText(this, "Scan result: ${it.text}", Toast.LENGTH_LONG).show()
            }
        }
        codeScanner.errorCallback = ErrorCallback { // or ErrorCallback.SUPPRESS
            runOnUiThread {
                Toast.makeText(this, "Camera initialization error: ${it.message}",
                    Toast.LENGTH_LONG).show()
            }
        }

        scannerView.setOnClickListener {
            codeScanner.startPreview()
        }
    }

    override fun onResume() {
        super.onResume()
        codeScanner.startPreview()
    }

    override fun onPause() {
        codeScanner.releaseResources()
        super.onPause()
    }
}

--------------------------------------------------------------------------------------------------------------------

4. activity_main.xml 코드 작성

 

 

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


    <com.budiyev.android.codescanner.CodeScannerView
        android:id="@+id/scanner_view"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        app:autoFocusButtonColor="@android:color/white"
        app:autoFocusButtonVisible="true"
        app:flashButtonColor="@android:color/white"
        app:flashButtonVisible="true"
        app:maskColor="#4A000000" />


    <TextView
        android:id="@+id/tv_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/scanner_view"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:text="@string/qr"
        android:textColor="@android:color/black"
        android:textSize="20sp"
        android:textStyle="bold" />



</RelativeLayout>

 

 

 

 

앱 실행화면

 

 

 

 

+@ 카카오톡 QR CODE 인식된 모습