Monday, November 18, 2024
Google search engine
HomeLanguagesJavaHow to Build a QR Code Android App using Firebase?
LanguagesJava

How to Build a QR Code Android App using Firebase?

Dominic Rubhabha-Wardslaus
By Dominic Rubhabha-Wardslaus
0
0

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:



















Previous article
CopyOnWriteArrayList addIfAbsent() method in Java
Next article
Provider getProperty() method in Java with Examples



Dominic Rubhabha-Wardslaus
Dominic Rubhabha-Wardslaushttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,


RELATED ARTICLES











Most Popular
Load more


Recent Comments


	

강서구출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

금천구출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

nightwish.southeast.cz on Google says it won’t keep your Pixel during a repair if you’re caught using non-OEM parts
	
 

	

광명출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

광명출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

출장오피 on How to store XML data into a MySQL database using Python?
	
 

	

부천출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

구월동출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

강서구출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

헬로출장 on How to store XML data into a MySQL database using Python?
	
 

	

오산출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

광명출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

마포출장 on How to store XML data into a MySQL database using Python?
	
 

	

안양출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

gKTdhA on 5 reasons why I won’t switch away from Google Photos
	
 

	

부천출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

동탄출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

0a1Mq7 on Wander: An add-on for Apple’s Shortcuts app to install the Odyssey jailbreak
	
 

	

서울출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

분당출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

부천출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

출장 오피 on How to store XML data into a MySQL database using Python?
	
 

	

화곡동출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

Gilda on Wander: An add-on for Apple’s Shortcuts app to install the Odyssey jailbreak
	
 

	

강서구출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

고양출장안마 on How to store XML data into a MySQL database using Python?
	
 

	

화성출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

천호동출장마사지 on How to store XML data into a MySQL database using Python?
	
 

	

June P. D. Alvarez on RedSn0w Updated to Fix iBooks DRM Issues
	
 

	

Litha on How to Install Siri on iPad 2
	
 
 
                                    

            

        

        
    
 


    

                

            














EDITOR PICKS





POPULAR POSTS





POPULAR CATEGORY










 







ABOUT US



Newspaper is your news, entertainment, music fashion website. We provide you with the latest breaking news and videos straight from the entertainment industry.



Contact us: hello@geeksforgeeks.org






FOLLOW US











© Lazyr0ar 2022