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

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

प्रमुख बिंदु

  • ड्रॉ करने लायक वेक्टर, एक वेक्टर ग्राफ़िक होता है. इसे एक्सएमएल फ़ाइल में, पॉइंट, लाइनों, और कर्व के सेट के तौर पर दिखाया जाता है. साथ ही, इसमें रंग की जानकारी भी शामिल होती है.
  • वेक्टर ड्रॉबल को स्केल किया जा सकता है. इसका मतलब है कि डिसप्ले क्वालिटी में कोई बदलाव किए बिना, इनका साइज़ बदला जा सकता है. इससे उन्हें 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 एक स्टैटिक ड्रॉबल के बारे में बताता है ऑब्जेक्ट है. SVG फ़ॉर्मैट की तरह ही, हर वेक्टर ग्राफ़िक को ट्री के क्रम में दिखाया जाता है. यह path और group ऑब्जेक्ट से बना होता है. हर path में ऑब्जेक्ट के आउटलाइन की ज्यामिति होती है और group में बदलाव की जानकारी शामिल है. सभी पाथ बनाए गए हैं उसी क्रम में होना चाहिए जिसमें वे एक्सएमएल फ़ाइल में दिखते हैं.

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

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

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

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

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

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

GroovyKotlin
// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}
 
// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}
ग्रूवी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"
    }
}
 
// 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 और इसके बाद के वर्शन में ये सुविधाएं काम करती हैं:

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

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

  • पाथ के साथ-साथ आगे बढ़ें ज्यामिति ऑब्जेक्ट आस-पास हो सकता है, ऐनिमेशन के हिस्से के तौर पर, आर्बिट्रेरी पाथ पर.

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

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

  • वेक्टरड्रॉएबल की एक्सएमएल फ़ाइल: 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 टैग अलग-अलग संसाधन बनाता है और ऐनिमेशन वाले वेक्टर में उनका रेफ़रंस देता है. इस तरीके के लिए बिल्ड टूल 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>