How to Build a QR Code Android App using Firebase?

Last Updated : 08 Apr, 2023

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.

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 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 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 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 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 Listenners for generating and scanning the QR code.

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

}

});

}

Step 6:

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

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

}

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

Like Article

Save Article

How to Build a QR Code Android App using Firebase?

How to Build a QR Code Android App using Firebase?

QR Scanner

Step-by-Step Implementation

Output:

Recommend

Car thieves using fake JBL speakers, not keys, to steal vehicles in just minutes...

北交所周报：一诺威、花溪科技上市中裕科技、民士达下周申购

与过去的自己发生干涉：首次实现光的时间双缝干涉

Oracle JDK 和 OpenJDK 有什么区别？

余承东不会成为李一男

Android - Create a New Playlist in Your Spotify Account using Spotify Web API -...

Possible Samsung Galaxy Tab S9 FE/Lite models spotted on Geekbench

A Paradigm Shift in Data Engineering - DZone

Google Assistant 助手或被 Bard AI 取代

Tencent, Douyin reach agreement for content distribution, ending years of copyri...

About Joyk