Create a Stylish QR Code Generator App with Advanced UI in Android

TechCraft4u July 30, 2025

Advance Level QR Code Generator App बनाने की पूरी जानकारी



इस पोस्ट में हम एक ऐसा Android एप्लीकेशन बनाएंगे जो किसी भी टेक्स्ट या लिंक को स्टाइलिश QR कोड में बदल देगा। ये पूरा प्रोजेक्ट एडवांस यूआई के साथ डिजाइन किया गया है, जिसमें हम rounded buttons, glowing effect और glass background का भी इस्तेमाल करेंगे।

📁 Project Structure

आपको नीचे दिया गया पूरा फोल्डर स्ट्रक्चर फॉलो करना होगा:

      Project Root/
│
├── 📁 java/
│ └── 📁 com/
│ └── 📁 yourapp/
│ └── MainActivity.java
│
├── 📁 res/
│ ├── 📁 layout/
│ │ └── main.xml 
│ │
│ └── 📁 drawable/
│ └── btn_rounded.xml
  └── glass_background.xml
  └── glow_circle.xml
  └── gradient_button.xml
  └── input_border.xml
│
├── 📁 libs/
│ └── zxing-core-3.5.0.jar 

│
├── AndroidManifest.xml 
│ └── Permissions
  └── android.permission.WRITE_EXTERNAL_STORAGE
  └── android.permission.READ_EXTERNAL_STORAGE
│  
│  
└── dependencies {
implementation 'com.google.zxing:core:3.5.0'
}

📱 Step 1: XML Layout Setup

यहां हम यूज़र इंटरफेस डिजाइन करेंगे जिसमें एक EditText, एक Generate QR बटन और एक ImageView रहेगा जहां पर QR कोड दिखाई देगा।

📌 XML Layout पेस्ट करें: res/layout/main.xml

      
      	<RelativeLayout
	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:background="#0F0F1A">
	<LinearLayout
		android:id="@+id/cardInput"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginLeft="20dp"
		android:layout_marginTop="30dp"
		android:layout_marginRight="20dp"
		android:padding="20dp"
		android:background="@drawable/glass_background"
		android:orientation="vertical"
		android:elevation="8dp"
		android:layout_centerHorizontal="true">
		<TextView
			android:id="@+id/textview2"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Enter Text to Generate QR"
			android:textSize="18sp"
			android:textStyle="bold"
			android:textColor="#FFFFFF" />
		<EditText
			android:id="@+id/inputText"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:layout_marginTop="10dp"
			android:padding="12dp"
			android:background="@drawable/input_border"
			android:textSize="14sp"
			android:textColor="#FFFFFF"
			android:hint="Enter anything..."
			android:textColorHint="#607D8B" />
	</LinearLayout>
	<Button
		android:id="@+id/btnGenerate"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginLeft="40dp"
		android:layout_marginTop="20dp"
		android:layout_marginRight="40dp"
		android:background="@drawable/gradient_button"
		android:text="GENERATE QR"
		android:textSize="14sp"
		android:textStyle="bold"
		android:textColor="#FFFFFF"
		android:textAllCaps="true"
		android:layout_below="@id/cardInput"
		android:layout_centerHorizontal="true" />
	<ImageView
		android:id="@+id/qrPreview"
		android:layout_width="240dp"
		android:layout_height="240dp"
		android:layout_marginTop="30dp"
		android:padding="15dp"
		android:background="@drawable/glow_circle"
		android:src="@drawable/default_image"
		android:scaleType="center"
		android:layout_below="@id/btnGenerate"
		android:layout_centerHorizontal="true" />
	<LinearLayout
		android:id="@+id/linear2"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginTop="20dp"
		android:gravity="center_horizontal|center_vertical"
		android:orientation="horizontal"
		android:layout_below="@id/qrPreview">
		<Button
			android:id="@+id/btnDownload"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_margin="10dp"
			android:background="@drawable/btn_rounded"
			android:text="⬇️ Download"
			android:textSize="12sp"
			android:textColor="#FFFFFF" />
		<Button
			android:id="@+id/btnShare"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_margin="10dp"
			android:background="@drawable/btn_rounded"
			android:text="📤 Share"
			android:textSize="12sp"
			android:textColor="#FFFFFF" />
	</LinearLayout>
</RelativeLayout>

🧠 Step 2: MainActivity.java

इस फाइल में पूरा QR जनरेशन का लॉजिक लिखा जाएगा। यूज़र का इनपुट लिया जाएगा और QR को ImageView में डिस्प्ले किया जाएगा।

📌 Java कोड पेस्ट करें: java/com/yourapp/MainActivity.java

      
package com.my.qr;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.*;
import android.content.Intent;
import android.provider.MediaStore;
import java.io.*;
import java.util.*;
import android.net.Uri;

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

public class MainActivity extends Activity {

    private EditText inputText;
    private ImageView qrPreview;
    private Button btnGenerate, btnDownload, btnShare;
    private Bitmap qrBitmap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(getResources().getIdentifier("main", "layout", getPackageName()));

        inputText = findViewById(getResources().getIdentifier("inputText", "id", getPackageName()));
        qrPreview = findViewById(getResources().getIdentifier("qrPreview", "id", getPackageName()));
        btnGenerate = findViewById(getResources().getIdentifier("btnGenerate", "id", getPackageName()));
        btnDownload = findViewById(getResources().getIdentifier("btnDownload", "id", getPackageName()));
        btnShare = findViewById(getResources().getIdentifier("btnShare", "id", getPackageName()));

        btnGenerate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String input = inputText.getText().toString().trim();
                if (input.isEmpty()) {
                    Toast.makeText(getApplicationContext(), "Please enter text", Toast.LENGTH_SHORT).show();
                    return;
                }
                generateQR(input);
            }
        });

        btnDownload.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (qrBitmap != null) {
                    saveToGallery(qrBitmap);
                } else {
                    Toast.makeText(getApplicationContext(), "Generate QR first", Toast.LENGTH_SHORT).show();
                }
            }
        });

        btnShare.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (qrBitmap != null) {
                    shareImage(qrBitmap);
                } else {
                    Toast.makeText(getApplicationContext(), "Generate QR first", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

    private void generateQR(String text) {
        QRCodeWriter writer = new QRCodeWriter();
        try {
            int size = 600;
            com.google.zxing.common.BitMatrix bitMatrix = writer.encode(text, BarcodeFormat.QR_CODE, size, size);
            qrBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.RGB_565);

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

            qrPreview.setImageBitmap(qrBitmap);

        } catch (Exception e) {
            Toast.makeText(getApplicationContext(), "Error generating QR", Toast.LENGTH_SHORT).show();
        }
    }

    private void saveToGallery(Bitmap bitmap) {
        String saved = MediaStore.Images.Media.insertImage(
                getContentResolver(),
                bitmap,
                "QR_" + System.currentTimeMillis(),
                "QR Code"
        );
        if (saved != null) {
            Toast.makeText(getApplicationContext(), "Saved to gallery", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(getApplicationContext(), "Save failed", Toast.LENGTH_SHORT).show();
        }
    }

    private void shareImage(Bitmap bitmap) {
        try {
            File file = new File(getExternalCacheDir(), "qr_share.png");
            FileOutputStream out = new FileOutputStream(file);
            bitmap.compress(Bitmap.CompressFormat.PNG, 100, out);
            out.flush();
            out.close();
            file.setReadable(true, false);

            Intent shareIntent = new Intent(Intent.ACTION_SEND);
            shareIntent.setType("image/png");
            shareIntent.putExtra(Intent.EXTRA_STREAM, Uri.fromFile(file));
            startActivity(Intent.createChooser(shareIntent, "Share QR via"));

        } catch (Exception e) {
            Toast.makeText(getApplicationContext(), "Share failed", Toast.LENGTH_SHORT).show();
        }
    }
}

🎨 Step 3: Drawable Files

यूआई को शानदार बनाने के लिए नीचे दिए गए XML फाइल्स को res/drawable/ में बनाएं।

  • btn_rounded.xml – गोल बटन डिजाइन के लिए
  • glass_background.xml – ब्लर बैकग्राउंड लुक
  • glow_circle.xml – QR कोड के चारों ओर ग्लोइंग रिंग
  • gradient_button.xml – सुंदर ग्रेडिएंट बटन के लिए
  • input_border.xml – इनपुट फील्ड के बॉर्डर को कस्टमाइज़ करने के लिए

XML drawable पेस्ट करें: res/drawable/btn_rounded.xml

      
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#2E86DE" />
<corners android:radius="16dp" />
</shape>

XML drawable पेस्ट करें: res/drawable/glass_background.xml

      
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#1FFFFFFF" />
<corners android:radius="16dp" />
</shape>

XML drawable पेस्ट करें: res/drawable/glow_circle.xml

      
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#202020" />
<corners android:radius="150dp" />
<stroke android:width="4dp" android:color="#40C4FF" />
</shape>

XML drawable पेस्ट करें: res/drawable/gradient_button.xml

      
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FF512F"
android:endColor="#DD2476"
android:angle="45" />
<corners android:radius="24dp" />
</shape>

XML drawable पेस्ट करें: res/drawable/input_border.xml

      
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#202030" />
<corners android:radius="12dp" />
<stroke android:width="1dp" android:color="#AAAAAA" />
</shape>

🧩 Step 4: ZXing Library (Sketchware या Studio)

QR कोड बनाने के लिए ZXing लाइब्रेरी का इस्तेमाल किया गया है।

👉 Sketchware Users:

ZXing की .jar फाइल को libs/ फोल्डर में import करें और फिर “Local Library” में जोड़ें।

👉 Android Studio Users:

app/build.gradle में नीचे दी गई dependency जोड़ें:

implementation 'com.google.zxing:core:3.5.0'

🛑 Step 5: Permissions

अगर आप QR को सेव करने का फीचर ऐड करते हैं तो आपको कुछ permissions की जरूरत पड़ेगी:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

📌 ये permissions AndroidManifest.xml में जोड़ें।

🧾 Final Result & UI Look

अब जब आप सारी फाइलें जोड़ चुके हैं, आपका ऐप कुछ इस तरह दिखेगा:



📝 Extra Features के लिए सुझाव

  • QR को गैलरी में सेव करने का विकल्प
  • Custom Color वाला QR कोड
  • QR Scanner भी जोड़ें इसी ऐप में
  • Dark Mode सपोर्ट

🔚 Conclusion

इस गाइड के जरिए आपने एक एडवांस लेवल का QR कोड जनरेटर ऐप बनाना सीखा, जिसमें प्रीमियम यूआई और Java logic दोनों शामिल हैं। अब आप इसे और भी बेहतर बना सकते हैं — बस थोड़ा creativity जोड़ें।

TechCraft4u

Posted by TechCraft4u

Post a Comment

0 Comments