How to Build a QR Code Android App using Firebase?

QR (Quick Response) code is a type of two-dimensional barcode that contains information encoded in a pattern of black and white squares. It was first developed in 1994 by a company named Denso Wave. Qr codes can be scanned by a smartphone or a dedicated QR code scanner, which uses the device’s camera to read the code and extract the information stored within it. This can include text, URLs, contact information, and more, depending on what the QR code has been programmed to contain. A sample video is given below to get an idea about what we are going to do in this article.

Note: This Android article covered in both Java and Kotlin languages. 

QR Scanner

A QR Scanner is a tool that can read and decode QR codes. QR code scanners are widely available as mobile apps that can be downloaded on smartphones and tablets and can be used to scan QR codes using the device’s built-in camera. Our QR code scanner app also includes additional features, such as the ability to generate QR codes and share information with others.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2:

Create two floating buttons, one for scanning the code and the other for generating the QR code.

QR Generator Code:

XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="oval">
            <gradient
                android:startColor="#FDDC74"
                android:endColor="#FBD665">
            </gradient>
        </shape>
    </item>

    <item android:gravity="center">
        <vector android:height="24dp" android:tint="#FFFFFF"
            android:viewportHeight="24" android:viewportWidth="24"
            android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
            <path android:fillColor="@android:color/white" android:pathData="M3,11h8V3H3V11zM5,5h4v4H5V5z"/>
            <path android:fillColor="@android:color/white" android:pathData="M3,21h8v-8H3V21zM5,15h4v4H5V15z"/>
            <path android:fillColor="@android:color/white" android:pathData="M13,3v8h8V3H13zM19,9h-4V5h4V9z"/>
            <path android:fillColor="@android:color/white" android:pathData="M19,19h2v2h-2z"/>
            <path android:fillColor="@android:color/white" android:pathData="M13,13h2v2h-2z"/>
            <path android:fillColor="@android:color/white" android:pathData="M15,15h2v2h-2z"/>
            <path android:fillColor="@android:color/white" android:pathData="M13,17h2v2h-2z"/>
            <path android:fillColor="@android:color/white" android:pathData="M15,19h2v2h-2z"/>
            <path android:fillColor="@android:color/white" android:pathData="M17,17h2v2h-2z"/>
            <path android:fillColor="@android:color/white" android:pathData="M17,13h2v2h-2z"/>
            <path android:fillColor="@android:color/white" android:pathData="M19,15h2v2h-2z"/>
        </vector>

    </item>
</layer-list>

QR Scanner Code:

XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="oval">
        <gradint
            android:startColor="#43DAA6"
            android:endColor="#09855C">
        </gradint>
    </shape>
</item>

    <item android:gravity="center">

        <vector android:height="24dp" android:tint="#FFFFFF"
            android:viewportHeight="24" android:viewportWidth="24"
            android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
            <path android:fillColor="@android:color/white" android:pathData="M7,3H4v3H2V1h5V3zM22,6V1h-5v2h3v3H22zM7,21H4v-3H2v5h5V21zM20,18v3h-3v2h5v-5H20zM19,18c0,1.1 -0.9,2 -2,2H7c-1.1,0 -2,-0.9 -2,-2V6c0,-1.1 0.9,-2 2,-2h10c1.1,0 2,0.9 2,2V18zM15,8H9v2h6V8zM15,11H9v2h6V11zM15,14H9v2h6V14z"/>
        </vector>
    </item>
</layer-list>

Output UI:

Step 3:

Add a gradient to your background.

XML

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <gradient
                android:startColor="#615EE8"
                android:endColor="#7F6CEF"/>
        </shape>
    </item>
</selector>

Step 4:

In your activity main xml file add one CardView, one ImageView, two floating action buttons, and one EditText.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    android:background="@drawable/back_qr"
    android:gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MY QR CODE"
        android:textSize="24sp"
        android:textStyle="bold"
        android:fontFamily="@font/bold"
        android:textColor="@color/white"
        android:layout_marginTop="50dp"/>

    <androidx.cardview.widget.CardView
        android:layout_marginTop="35dp"
        android:layout_width="290dp"
        android:layout_height="350dp"
        app:cardCornerRadius="25dp">

        <ImageView
            android:id="@+id/img_qr"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitCenter">
        </ImageView>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:layout_width="300dp"
        android:layout_height="80dp"
        android:layout_marginTop="20dp"
        app:cardCornerRadius="50dp"
        android:backgroundTint="#5754D3">
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="43dp"
                android:layout_height="43dp"
                android:id="@+id/btnQr"
                android:layout_marginLeft="17dp"
                android:layout_marginTop="20dp"
                style="@style/floating_yellow">
            </com.google.android.material.floatingactionbutton.FloatingActionButton>

          <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:text="Generate Your Qr Code"
                android:layout_marginLeft="80dp"
                android:textColor="@color/white"
                android:textStyle="bold"
                android:fontFamily="@font/bold"
                android:textSize="16sp">
            </TextView>

                <EditText
                    android:id="@+id/edtgen"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:hint="Enter your Section Here"
                    android:background="@null"
                    android:layout_marginTop="45dp"
                    android:layout_marginLeft="80dp"
                    android:textColor="@color/white"
                    android:textColorHint="@color/white"
                    android:textSize="12sp" />
        </RelativeLayout>

    </androidx.cardview.widget.CardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/btnScan"
        android:layout_width="50dp"
        android:layout_height="50dp"
        style="@style/floating_green"
        android:layout_marginTop="60dp"
        android:outlineSpotShadowColor="@color/black"
        android:outlineAmbientShadowColor="@color/black"/>

</LinearLayout>

Step 5:

In your main activity add this code, and create two onclick Listeners for generating and scanning the QR code.

Java

package com.shruti.qrcodescanner;

import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.view.inputmethod.InputMethod;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.zxing.BarcodeFormat;
import com.google.zxing.MultiFormatWriter;
import com.google.zxing.WriterException;
import com.google.zxing.common.BitMatrix;
import com.journeyapps.barcodescanner.BarcodeEncoder;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton btnQr;
    FloatingActionButton btnScan;
    EditText edtgen;
    ImageView img_qr;

    @SuppressLint("WrongViewCast")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnScan =(FloatingActionButton) findViewById(R.id.btnScan);
        btnQr =  (FloatingActionButton)findViewById(R.id.btnQr);
        edtgen = (EditText) findViewById(R.id.edtgen);
        img_qr = (ImageView) findViewById(R.id.img_qr);

        btnScan.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(getApplicationContext(),qrScanner.class));
            }
        });

        btnQr.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String Gqr = edtgen.getText().toString().trim();
                MultiFormatWriter writer = new MultiFormatWriter();

                try {
                    BitMatrix matrix = writer.encode(Gqr, BarcodeFormat.QR_CODE,
                            260,320);
                    BarcodeEncoder encoder = new BarcodeEncoder();
                    Bitmap bitmap = encoder.createBitmap(matrix);
                    img_qr.setImageBitmap(bitmap);
                    InputMethodManager manager = (InputMethodManager)getSystemService(
                            Context.INPUT_METHOD_SERVICE
                    );
                    manager.hideSoftInputFromWindow(edtgen.getApplicationWindowToken(),
                            0);
                } catch (WriterException e) {
                    e.printStackTrace();
                }
            }
        });

    }
}

Kotlin

package com.shruti.qrcodescanner

import android.content.Context
import android.content.Intent
import android.graphics.Bitmap
import android.os.Bundle
import android.view.View
import android.view.inputmethod.InputMethodManager
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.floatingactionbutton.FloatingActionButton
import com.google.zxing.BarcodeFormat
import com.google.zxing.MultiFormatWriter
import com.google.zxing.WriterException
import com.google.zxing.common.BitMatrix
import com.journeyapps.barcodescanner.BarcodeEncoder
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btnScan = findViewById<FloatingActionButton>(R.id.btnScan)
        val btnQr = findViewById<FloatingActionButton>(R.id.btnQr)
        val edtgen = findViewById<EditText>(R.id.edtgen)
        val img_qr = findViewById<ImageView>(R.id.img_qr)

        btnScan.setOnClickListener {
            startActivity(Intent(applicationContext, qrScanner::class.java))
        }

        btnQr.setOnClickListener {
            val Gqr = edtgen.text.toString().trim()
            val writer = MultiFormatWriter()

            try {
                val matrix: BitMatrix = writer.encode(
                    Gqr,
                    BarcodeFormat.QR_CODE,
                    260,
                    320
                )
                val encoder = BarcodeEncoder()
                val bitmap: Bitmap = encoder.createBitmap(matrix)
                img_qr.setImageBitmap(bitmap)
                val manager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
                manager.hideSoftInputFromWindow(edtgen.applicationWindowToken, 0)
            } catch (e: WriterException) {
                e.printStackTrace()
            }
        }
    }
}

Step 6: 

Create a new Empty activity in your project. Add this code to your Java folder. 

Java

package com.shruti.qrcodescanner;

import android.os.Bundle;
import android.Manifest;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.zxing.Result;
import com.karumi.dexter.Dexter;
import com.karumi.dexter.PermissionToken;
import com.karumi.dexter.listener.PermissionDeniedResponse;
import com.karumi.dexter.listener.PermissionGrantedResponse;
import com.karumi.dexter.listener.PermissionRequest;
import com.karumi.dexter.listener.single.PermissionListener;

import me.dm7.barcodescanner.zxing.ZXingScannerView;

public class qrScanner extends AppCompatActivity implements ZXingScannerView.ResultHandler
{
    ZXingScannerView scannerView;
    DatabaseReference dref ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        scannerView= new ZXingScannerView(this);
        setContentView(scannerView);
        dref = FirebaseDatabase.getInstance().getReference("information");
        Dexter.withContext(getApplicationContext())
                .withPermission(Manifest.permission.CAMERA)
                .withListener(new PermissionListener() {
                    @Override
                    public void onPermissionGranted(PermissionGrantedResponse permissionGrantedResponse) {
                        scannerView.startCamera();
                    }

                    @Override
                    public void onPermissionDenied(PermissionDeniedResponse permissionDeniedResponse) {

                    }

                    @Override
                    public void onPermissionRationaleShouldBeShown(PermissionRequest permissionRequest, PermissionToken permissionToken) {
                        permissionToken.continuePermissionRequest();
                    }
                }).check();
    }


    @Override
    public void handleResult(Result rawResult) {
        String data = rawResult.getText().toString();

        dref.push().setValue(data)
                .addOnCompleteListener(new OnCompleteListener<Void>() {
                    @Override
                    public void onComplete(@NonNull Task<Void> task) {
                        onBackPressed();
                    }
                });
    }

    @Override
    protected void onPause() {
        super.onPause();
        scannerView.stopCamera();
    }

    @Override
    protected void onResume() {
        super.onResume();
        scannerView.setResultHandler(this);
        scannerView.startCamera();
    }
}

Kotlin

package com.shruti.qrcodescanner

import android.Manifest
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.tasks.OnCompleteListener
import com.google.android.gms.tasks.Task
import com.google.firebase.database.DatabaseReference
import com.google.firebase.database.FirebaseDatabase
import com.google.zxing.Result
import com.karumi.dexter.Dexter
import com.karumi.dexter.PermissionToken
import com.karumi.dexter.listener.PermissionDeniedResponse
import com.karumi.dexter.listener.PermissionGrantedResponse
import com.karumi.dexter.listener.PermissionRequest
import com.karumi.dexter.listener.single.PermissionListener
import me.dm7.barcodescanner.zxing.ZXingScannerView

class qrScanner : AppCompatActivity(), ZXingScannerView.ResultHandler {
    private lateinit var scannerView: ZXingScannerView
    private lateinit var dref: DatabaseReference

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        scannerView = ZXingScannerView(this)
        setContentView(scannerView)
        dref = FirebaseDatabase.getInstance().getReference("information")
        Dexter.withContext(applicationContext)
            .withPermission(Manifest.permission.CAMERA)
            .withListener(object : PermissionListener {
                override fun onPermissionGranted(permissionGrantedResponse: PermissionGrantedResponse) {
                    scannerView.startCamera()
                }

                override fun onPermissionDenied(permissionDeniedResponse: PermissionDeniedResponse) {}

                override fun onPermissionRationaleShouldBeShown(
                    permissionRequest: PermissionRequest,
                    permissionToken: PermissionToken
                ) {
                    permissionToken.continuePermissionRequest()
                }
            }).check()
    }

    override fun handleResult(rawResult: Result) {
        val data = rawResult.text

        dref.push().setValue(data)
            .addOnCompleteListener { task: Task<Void?> ->
                onBackPressed()
            }
    }

    override fun onPause() {
        super.onPause()
        scannerView.stopCamera()
    }

    override fun onResume() {
        super.onResume()
        scannerView.setResultHandler(this)
        scannerView.startCamera()
    }
}

Step 7:

Add these dependencies in your gradle file.

implementation 'me.dm7.barcodescanner:zxing:1.9.13'
implementation 'com.karumi:dexter:6.2.2'
implementation 'com.journeyapps:zxing-android-embedded:3.4.0'

Step 8:

Add these styles to your themes.xml.

XML

<style>
    <style name="CardView." parent="CardView">
        <item name ="android:foreground">@drawable/button_grad</item>
    </style>
    <style name="floating_yellow" parent="Widget.Design.FloatingActionButton">
        <item name="android:foreground">@drawable/qr_button</item>
    </style>
    <style name="floating_green" parent="Widget.Design.FloatingActionButton">
        <item name="android:foreground">@drawable/scan_button</item>
</style>

Note: Make sure your project connects your project with Firebase before running on any device or emulator.

Output: