वेक्टर ड्रॉएबल की खास जानकारी

Compose का इस्तेमाल करके मैसेज लिखना
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर सुझाया जाता है. Compose में ग्राफ़िक दिखाने का तरीका जानें.
ImageVector →

प्रमुख बिंदु

  • ड्रॉ करने लायक वेक्टर, एक वेक्टर ग्राफ़िक होता है. इसे एक्सएमएल फ़ाइल में, पॉइंट, लाइनों, और कर्व के सेट के तौर पर दिखाया जाता है. साथ ही, इसमें रंग की जानकारी भी शामिल होती है.
  • वेक्टर ड्रॉबल को स्केल किया जा सकता है. इसका मतलब है कि डिसप्ले क्वालिटी में कोई बदलाव किए बिना, इनका साइज़ बदला जा सकता है. इसलिए, इन्हें Android ऐप्लिकेशन में इस्तेमाल करना सबसे सही होता है. इससे, आपकी APK फ़ाइलों का साइज़ कम करने और परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलती है.
  • Android Studio में वेक्टर ड्रॉबल बनाने के लिए, अपने प्रोजेक्ट में ड्रॉबल फ़ोल्डर पर राइट क्लिक करें और नया > वेक्टर ऐसेट चुनें. SVG फ़ाइलों को वेक्टर ड्रॉबल के तौर पर, Android Studio में भी इंपोर्ट किया जा सकता है.
Google Bard की मदद से 24 जुलाई, 2023 को जनरेट की गई खास जानकारी

परिचय

VectorDrawable एक वेक्टर ग्राफ़िक है, जिसे एक्सएमएल फ़ाइल में पॉइंट, लाइनों, और कर्व के सेट के तौर पर परिभाषित किया गया है. साथ ही, इसमें रंग की जानकारी भी शामिल होती है. वेक्टर ड्रॉबल का इस्तेमाल करने का मुख्य फ़ायदा यह है कि इमेज को स्केल किया जा सकता है. इसकी क्वालिटी में बदलाव किए बिना, इसे स्केल किया जा सकता है. इसका मतलब है कि एक ही फ़ाइल को अलग-अलग स्क्रीन डेंसिटी के लिए, इमेज की क्वालिटी में बदलाव किए बिना उसका साइज़ बदला जाता है. इससे APK फ़ाइलें छोटी हो जाती हैं और डेवलपर को कम रखरखाव करना पड़ता है. ऐनिमेशन के लिए वैक्टर इमेज का इस्तेमाल भी किया जा सकता है. इसके लिए, हर डिसप्ले रिज़ॉल्यूशन के लिए कई इमेज के बजाय, कई एक्सएमएल फ़ाइलों का इस्तेमाल करें.

इस पेज और नीचे दिए गए वीडियो में, एक्सएमएल में वेक्टर ड्रॉबल बनाने का तरीका बताया गया है. Android Studio, SVG फ़ाइलों को वेक्टर ड्रॉबल फ़ॉर्मैट में भी बदल सकता है. इसके बारे में मल्टी-डेंसिटी वेक्टर ग्राफ़िक्स जोड़ें में बताया गया है.

Android 5.0 (एपीआई लेवल 21) पहला ऐसा वर्शन था जिसमें VectorDrawable और AnimatedVectorDrawable के साथ वेक्टर ड्रॉबल का आधिकारिक तौर पर इस्तेमाल किया जा सकता था. हालांकि, Android की सहायता लाइब्रेरी की मदद से, पुराने वर्शन में भी वेक्टर ड्रॉबल का इस्तेमाल किया जा सकता है. इस लाइब्रेरी में VectorDrawableCompat और AnimatedVectorDrawableCompat क्लास मौजूद होती हैं.

VectorDrawable क्लास के बारे में जानकारी

VectorDrawable, स्टैटिक ड्रॉबल ऑब्जेक्ट के बारे में बताता है. SVG फ़ॉर्मैट की तरह ही, हर वेक्टर ग्राफ़िक को ट्री के क्रम में दिखाया जाता है. यह path और group ऑब्जेक्ट से बना होता है. हर path में ऑब्जेक्ट की आउटलाइन की ज्यामिति होती है और group में ट्रांसफ़ॉर्मेशन की जानकारी होती है. सभी पाथ, एक्सएमएल फ़ाइल में दिखने के क्रम में ही दिखाए जाते हैं.

पहली इमेज. वेक्टर ड्रॉबल ऐसेट की हैरारकी का सैंपल

वेक्टर ऐसेट स्टूडियो टूल की मदद से, प्रोजेक्ट में एक्सएमएल फ़ाइल के तौर पर वेक्टर ग्राफ़िक जोड़ने का आसान तरीका मिलता है.

एक्सएमएल का उदाहरण

यहां VectorDrawable एक्सएमएल फ़ाइल का एक सैंपल दिया गया है, जो चार्जिंग मोड में बैटरी की इमेज को रेंडर करती है. 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

यह एक्सएमएल, नीचे दी गई इमेज को रेंडर करता है:

AnimatedVectorDrawable क्लास के बारे में जानकारी

AnimatedVectorDrawable, वेक्टर ग्राफ़िक की प्रॉपर्टी में ऐनिमेशन जोड़ता है. ऐनिमेशन वाले वेक्टर ग्राफ़िक को तीन अलग-अलग रिसोर्स फ़ाइलों के तौर पर या पूरी ड्रॉबल फ़ाइल के तौर पर एक्सएमएल फ़ाइल में सेट किया जा सकता है. बेहतर तरीके से समझने के लिए, दोनों तरीकों पर एक नज़र डालें: एक से ज़्यादा एक्सएमएल फ़ाइलें और एक एक्सएमएल फ़ाइल.

एक से ज़्यादा एक्सएमएल फ़ाइलें

इस तरीके का इस्तेमाल करके, तीन अलग-अलग एक्सएमएल फ़ाइलें तय की जा सकती हैं:

  • VectorDrawable एक्सएमएल फ़ाइल.
  • AnimatedVectorDrawable एक्सएमएल फ़ाइल, जिसमें टारगेट VectorDrawable, ऐनिमेट करने के लिए टारगेट पाथ और ग्रुप, प्रॉपर्टी, और ObjectAnimator ऑब्जेक्ट या AnimatorSet ऑब्जेक्ट के तौर पर तय किए गए ऐनिमेशन की जानकारी होती है.
  • ऐनिमेशन वाली एक्सएमएल फ़ाइल.

एक से ज़्यादा एक्सएमएल फ़ाइलों का उदाहरण

यहां दी गई एक्सएमएल फ़ाइलों में, वेक्टर ग्राफ़िक का ऐनिमेशन दिखाया गया है.

  • VectorDrawable की एक्सएमएल फ़ाइल: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • AnimatedVectorDrawable की एक्सएमएल फ़ाइल: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • ऐनिमेट की गई वेक्टर ड्रॉअबल की एक्सएमएल फ़ाइल में इस्तेमाल की जाने वाली ऐनिमेशन एक्सएमएल फ़ाइलें: rotation.xml और path_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

    <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>

एक एक्सएमएल फ़ाइल

इस तरीके का इस्तेमाल करके, एक्सएमएल बंडल फ़ॉर्मैट की मदद से, मिलती-जुलती एक्सएमएल फ़ाइलों को एक ही एक्सएमएल फ़ाइल में मर्ज किया जा सकता है. ऐप्लिकेशन बनाते समय, aapt टैग अलग-अलग संसाधन बनाता है और ऐनिमेशन वाले वेक्टर में उनका रेफ़रंस देता है. इस तरीके के लिए, Build Tools 24 या उसके बाद के वर्शन की ज़रूरत होती है. साथ ही, इसका आउटपुट पुराने सिस्टम के साथ काम करता है.

एक एक्सएमएल फ़ाइल का उदाहरण 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

वेक्टर ड्रॉबल के लिए, पुराने सिस्टम के साथ काम करने की सुविधा का समाधान

Android 5.0 (एपीआई लेवल 21) से पहले के वर्शन वाले प्लैटफ़ॉर्म पर वेक्टर ड्रॉबल और ऐनिमेटेड वेक्टर ड्रॉबल की सुविधाएं इस्तेमाल करने के लिए, VectorDrawableCompat और AnimatedVectorDrawableCompat का इस्तेमाल किया जा सकता है.इसके लिए, दो सहायता लाइब्रेरी उपलब्ध हैं: support-vector-drawable और animated-vector-drawable.fillColorfillTypestrokeColor

Android Studio 1.4 में, वेक्टर drawables के साथ काम करने की सुविधा को सीमित तौर पर उपलब्ध कराया गया है. इसके लिए, ऐप्लिकेशन बनाने के समय PNG फ़ाइलें जनरेट की जाती हैं. हालांकि, वेक्टर ड्रॉबल और ऐनिमेटेड वेक्टर ड्रॉबल की सहायता वाली लाइब्रेरी, आसानी से इस्तेमाल की जा सकती हैं और ये कई डिवाइसों पर काम करती हैं. यह एक सहायता लाइब्रेरी है, इसलिए इसका इस्तेमाल Android 2.1 (एपीआई लेवल 7 और उसके बाद के वर्शन) से लेकर Android के सभी प्लैटफ़ॉर्म वर्शन के साथ किया जा सकता है. अपने ऐप्लिकेशन को वेक्टर की सहायता वाली लाइब्रेरी का इस्तेमाल करने के लिए कॉन्फ़िगर करने के लिए, ऐप्लिकेशन मॉड्यूल में अपनी build.gradle फ़ाइल में vectorDrawables एलिमेंट जोड़ें.

vectorDrawables एलिमेंट को कॉन्फ़िगर करने के लिए, इस कोड स्निपेट का इस्तेमाल करें:

Groovy

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Groovy

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

Android 4.0 (एपीआई लेवल 14) और इसके बाद के वर्शन पर चलने वाले सभी डिवाइसों पर, VectorDrawableCompat और AnimatedVectorDrawableCompat का इस्तेमाल किया जा सकता है. Android, ड्रॉबल को जिस तरह लोड करता है उससे यह तय होता है कि एक्सएमएल फ़ाइल जैसी हर जगह, ड्रॉबल आईडी स्वीकार करने पर वेक्टर ड्रॉबल लोड हो पाएंगे या नहीं. android.support.v7.appcompat पैकेज में कई सुविधाएं जोड़ी गई हैं, ताकि वेक्टर ड्रॉबल का इस्तेमाल आसानी से किया जा सके. सबसे पहले, android.support.v7.appcompat पैकेज को ImageView के साथ या ImageButton और FloatingActionButton जैसे सबक्लास के साथ इस्तेमाल करने पर, android:src के लिए उपलब्ध वेक्टर ड्रॉबल के साथ-साथ किसी भी अन्य ड्रॉबल का रेफ़रंस देने के लिए, नए app:srcCompat एट्रिब्यूट का इस्तेमाल किया जा सकता है: 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

रनटाइम के दौरान ड्रॉबल बदलने के लिए, पहले की तरह ही setImageResource() तरीके का इस्तेमाल किया जा सकता है. AppCompat और app:srcCompat का इस्तेमाल करके, अपने ऐप्लिकेशन में वेक्टर ड्रॉबल को इंटिग्रेट करने का सबसे आसान तरीका है.

Support Library 25.4.0 और इसके बाद के वर्शन में ये सुविधाएं काम करती हैं:

  • पाथ मॉर्फ़िंग (PathType evaluator) इसका इस्तेमाल, एक पाथ को दूसरे पाथ में बदलने के लिए किया जाता है.
  • पाथ इंटरपोलेशन इसका इस्तेमाल, सिस्टम से तय किए गए इंटरपोलटर (जैसे, LinearInterpolator) के बजाय, किसी फ़्लेक्सिबल इंटरपोलटर (पाथ के तौर पर दिखाया जाता है) को तय करने के लिए किया जाता है.

Support Library 26.0.0-beta1 और इसके बाद के वर्शन में ये सुविधाएं काम करती हैं:

  • पाथ के साथ मूव करना किसी ऐनिमेशन के हिस्से के तौर पर, ज्यामिति ऑब्जेक्ट को किसी भी पाथ पर मूव किया जा सकता है.

सहायता लाइब्रेरी का इस्तेमाल करने वाली कई एक्सएमएल फ़ाइलों का उदाहरण

यहां दी गई एक्सएमएल फ़ाइलों में, वेक्टर ग्राफ़िक को ऐनिमेट करने के लिए, एक से ज़्यादा एक्सएमएल फ़ाइलों का इस्तेमाल करने का तरीका बताया गया है.

  • VectorDrawable की एक्सएमएल फ़ाइल: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • AnimatedVectorDrawable की एक्सएमएल फ़ाइल: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • ऐनिमेशन वाली एक्सएमएल फ़ाइल, जिसका इस्तेमाल AnimatedVectorDrawable की एक्सएमएल फ़ाइल में किया जाता है: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

एक एक्सएमएल फ़ाइल

नीचे दी गई एक्सएमएल फ़ाइल में, किसी वेक्टर ग्राफ़िक को ऐनिमेट करने के लिए, एक एक्सएमएल फ़ाइल का इस्तेमाल करने का तरीका बताया गया है. ऐप्लिकेशन बनाते समय, aapt टैग अलग-अलग संसाधन बनाता है और ऐनिमेशन वाले वेक्टर में उनका रेफ़रंस देता है. इस तरीके के लिए, Build Tools 24 या उसके बाद के वर्शन की ज़रूरत होती है. साथ ही, इसका आउटपुट पुराने सिस्टम के साथ काम करता है.

सहायता लाइब्रेरी का इस्तेमाल करने वाली एक एक्सएमएल फ़ाइल का उदाहरण 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>