एंड्रॉइड में सर्कल बैकग्राउंड के साथ टिक मार्क कैसे बनाएं?

एंड्रॉइड में वेक्टर से सर्कल बैकग्राउंड वाला टिक मार्क (चेकमार्क) बनाना

यह ट्यूटोरियल दिखाता है कि एक हरे सर्कल में सफेद चेकमार्क वाला वेक्टर ड्रॉएबल कैसे बनाएं - सफलता/पूर्ण स्थिति के लिए आदर्श।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में File → New Project चुनें।

चरण 2: लेआउट (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/background" />
</LinearLayout>

चरण 3: वेक्टर ड्रॉएबल (drawable/background.xml)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    
    <!-- हरा सर्कल बैकग्राउंड -->
    <path
        android:fillColor="#4CAF50"
        android:pathData="M12,2 C6.48,2 2,6.48 2,12 s4.48,10 10,10 10,-4.48 10,-10 S17.52,2 12,2 z" />
    
    <!-- सफेद चेकमार्क -->
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M9,16.17 L4.83,12 L3.41,13.41 L9,19 L17,7 L15.59,5.59 L9,16.17 z" />
        
</vector>

सरल संस्करण (मटेरियल डिजाइन स्टाइल)

<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#4CAF50"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
</vector>

कस्टमाइजेशन विकल्प

<!-- अलग रंग -->
<path android:fillColor="#2196F3" ... /> <!-- नीला -->
<path android:fillColor="#FF9800" ... /> <!-- नारंगी -->
<path android:fillColor="#F44336" ... /> <!-- लाल (क्रॉस के लिए) -->

<!-- आकार बदलें -->
android:width="48dp"
android:height="48dp"

<!-- स्ट्रोक के साथ -->
<path
    android:fillColor="#4CAF50"
    android:strokeColor="#2E7D32"
    android:strokeWidth="1"
    android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />

उपयोग केस

• फॉर्म वैलिडेशन सफलता
• टू-डू लिस्ट पूर्ण आइटम
• परमिशन ग्रांटेड इंडिकेटर
• डाउनलोड/सिंक पूर्ण
• चेकबॉक्स रिप्लेसमेंट

प्रोग्रामेटिक रंग बदलना

// Java
Drawable drawable = ContextCompat.getDrawable(this, R.drawable.check_circle);
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable, ContextCompat.getColor(this, R.color.my_color));
imageView.setImageDrawable(drawable);

ऐप टेस्ट करें

चलाएं - हरे सर्कल में सफेद चेकमार्क 100x100dp में दिखेगा।