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

TechCraft4u เค…เค—เคธ्เคค 06, 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

เคช्เคฐเคธ्เคคुเคคเค•เคฐ्เคคा TechCraft4u

เคเค• เคŸिเคช्เคชเคฃी เคญेเคœें

0 เคŸिเคช्เคชเคฃिเคฏाँ