How to create or generate QR (Quick Response) Code in your Android App? – complete source code

In this video it shows the steps to develop your QR Code generator App in Android Studio. It uses zxing library which is included in the App by adding the dependencies in the build.gradle file (App level) for the ‘com.google.zxing:core:3.2.1’ implementation.

In this tutorial a very simple layout has been designed with one Text Box/ plain text field to enter the string which needs to be converted in the QR Code.

It uses the ImageViewer to display the QR code which is generated in your App in Bitmap format.

We hope you like this video. For any query, suggestions or appreciations we will be glad to hear from you at: programmerworld1990@gmail.com.

Source Code:

package com.example.myqrcodegenerator;

import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;

import com.google.zxing.BarcodeFormat;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.QRCodeWriter;

public class MainActivity extends AppCompatActivity {
    private EditText editText;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editText = findViewById(R.id.editText);
        imageView = findViewById(R.id.imageView);
    }

    public void QRCodeButton(View view){
        QRCodeWriter qrCodeWriter = new QRCodeWriter();
        try {
            BitMatrix bitMatrix = qrCodeWriter.encode(editText.getText().toString(), BarcodeFormat.QR_CODE, 200, 200);
            Bitmap bitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.RGB_565);
            for (int x = 0; x<200; x++){
                for (int y=0; y<200; y++){
                    bitmap.setPixel(x,y,bitMatrix.get(x,y)? Color.BLACK : Color.WHITE);
                }
            }
            imageView.setImageBitmap(bitmap);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="150dp"
        android:layout_marginTop="83dp"
        android:onClick="QRCodeButton"
        android:text="@string/qr_code"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="85dp"
        android:layout_marginTop="52dp"
        android:ems="10"
        android:hint="@string/enter_the_text_here"
        android:inputType="textPersonName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"
        android:autofillHints="" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginStart="105dp"
        android:layout_marginTop="85dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        app:srcCompat="?attr/actionBarDivider"
        android:contentDescription="@string/todo" />
</androidx.constraintlayout.widget.ConstraintLayout>
apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    defaultConfig {
        applicationId "com.example.myqrcodegenerator"
        minSdkVersion 28
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'

    implementation 'com.google.zxing:core:3.2.1'
}

Screenshots of the QR Scanner (used on real phone):

Enter the String “Hello World” Which will be scanned and shown by your QR reader:

Screenshot_2019-12-14-06-27-36-104_com.android.camera.jpg
Screenshot_2019-12-14-06-26-50-752_com.xiaomi.scanner

Enter any website address, Example: https://programmerworld.co and it will give you an option to browse to that website directly.

Screenshot_2019-12-14-06-32-25-575_com.android.camera
Screenshot_2019-12-14-06-32-36-539_com.xiaomi.scanner

17 comments

  1. hello. i read one of the comment on to add more than one edit text to generate qr code but im still not clear with it. can you give an example for me? thank you

    1. Steps are simple. You can add more than one edit text boxes in the App’s layout. Then you can create local variables in Java of type EditText. Associate these local variables to the individual edit text boxes added in the layout using the findViewById API.

      Once the local variables in the java, referring to the widgets in the layout, is ready then get/ fetch the text from the Edit Text boxes using the getText API as mentioned below:

      editText.getText().toString()

      Then you can concatenate (Add) the multiple texts obtained from various edit texts and use this final version of the string in the generation of your QR code.

      Good Luck
      Programmer World

      1. hello. i get what you stated above and already create new edit text. for example if i create 2 edit text, variable etext1 and etext2, but where can i put for another editText.getText().toString() in this coding?

        try {
        BitMatrix bitMatrix = qrCodeWriter.encode(etext1.getText().toString(), BarcodeFormat.QR_CODE, 200, 200);
        Bitmap bitmap = Bitmap.createBitmap(200, 200, Bitmap.Config.RGB_565);

        for(int x = 0; x< 200; x++){
        for (int y = 0; y< 200; y++){
        bitmap.setPixel(x,y,bitMatrix.get(x,y)? Color.BLACK:Color.WHITE);
        }
        }

        thank you for replying!

  2. Add “etext2.getText().toString()” in the below line of the code:

    BitMatrix bitMatrix = qrCodeWriter.encode(etext1.getText().toString() + etext2.getText().toString(), BarcodeFormat.QR_CODE, 200, 200);

    Please do the changes as shown in the above and it should work.

    Good Luck
    Programmer World

    1. ah! thank you its working now! may i know if theres any ways to make the qr code image at other interface while insert the data in other interface?

      1. If you mean another layout then of course it is possible. You can just print the QR image obtained from the conversion to the other layout (to the desired interface).

        I hope above helps.

        Cheers
        Programmer World

      2. ah yes another layout. first layout for insert data, click the button, which will go to other layout where the image of qr code that carry the data in before layout will appear

      3. I already answered this in my previous comment. Copying my response again below for reference:

        “If you mean another layout then of course it is possible. You can just print the QR image obtained from the conversion to the other layout (to the desired interface).”

        Cheers
        Programmer World

      4. is there any coding to do that? bc i try mix with other onclicklistener (because my plan is i store my data in firebase and while that i can get qr code)

  3. No, there is no specific code. You have to just set the right widget with this image you obtained from the QR code in the below line:

    imageView.setImageBitmap(bitmap);

    Good Luck
    Programmer World

    1. hello. i have tried to put only this coding imageview.setimagebitmap(bitmap) on other interface but it wont work out. can you help me to solve this? it shows blank.

  4. I hope you are doing the above in the same Class and not in different Class files. Anyway, if possible then can you please copy the code here. I will have a look.

    Cheers
    Programmer World

    1. Yes, of course. There are multiple ways to do it. The simplest approach will be to form one single string of all these entries and then use that to generate the QR code.

      Other way will be to create separate QR for each entry and then merge the QR codes into one. This approach is not recommended as it is more complex and not very efficient.

      Good Luck
      Programmer World

    1. Yes, of course. There are multiple ways to do it.

      The simplest approach will be to form one single string of all these entries and then use that to generate the QR code.

      Other way will be to create separate QR for each entry and then merge the QR codes into one. This approach is not recommended as it is more complex and not very efficient.

      Good Luck
      Programmer World

Leave a Reply

%d bloggers like this: