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 version = "1.0" encoding = "utf-8" ?>
< 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"
< 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" ?>
< 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"
< 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" ?>
< 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
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.
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();
}
}
});
}
} |
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.
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();
}
} |
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.
< 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.