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

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

खास बातें

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

परिचय

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

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

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

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

VectorDrawable, स्टैटिक ड्रॉएबल ऑब्जेक्ट को तय करता है. एसवीजी फ़ॉर्मैट की तरह ही, हर वेक्टर ग्राफ़िक को ट्री हैरारकी के तौर पर तय किया जाता है. यह 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>
  • ऐनिमेटर की एक्सएमएल फ़ाइलें, जिनका इस्तेमाल AnimatedVectorDrawable की एक्सएमएल फ़ाइल में किया जाता है: 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) से पहले के वर्शन वाले डिवाइसों पर, ड्रॉ करने लायक वेक्टर और ड्रॉ करने लायक ऐनिमेटेड वेक्टर का इस्तेमाल करने के लिए या Android 7.0 (एपीआई लेवल 24) से पहले के वर्शन पर fillColor, fillType, और strokeColor फ़ंक्शन का इस्तेमाल करने के लिए, VectorDrawableCompat और AnimatedVectorDrawableCompat, दो सपोर्ट लाइब्रेरी के ज़रिए उपलब्ध हैं: क्रमशः support-vector-drawable और animated-vector-drawable.

Android Studio 1.4 में, ड्रॉ करने लायक वेक्टर के लिए सीमित तौर पर काम करने की सुविधा जोड़ी गई है. इसके लिए, बिल्ड के समय 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 पैकेज में कई सुविधाएं जोड़ी गई हैं, ताकि ड्रॉ करने लायक वेक्टर का इस्तेमाल करना आसान हो सके. सबसे पहले, ImageView या ImageButton और FloatingActionButton जैसी सब-क्लास के साथ android.support.v7.appcompat पैकेज का इस्तेमाल करने पर, ड्रॉ करने लायक वेक्टर के साथ-साथ 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) इसका इस्तेमाल, एक पाथ को दूसरे पाथ में बदलने के लिए किया जाता है.
  • Path Interpolation इसका इस्तेमाल, 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>