मल्टी-डेंसिटी वेक्टर ग्राफ़िक जोड़ें

Android Studio में, Vector Asset Studio नाम का एक टूल शामिल होता है. इसकी मदद से, Material आइकॉन जोड़े जा सकते हैं. साथ ही, स्केलेबल वेक्टर ग्राफ़िक (एसवीजी) और Adobe Photoshop Document (PSD) फ़ाइलों को वेक्टर ड्रॉएबल संसाधनों के तौर पर अपने प्रोजेक्ट में इंपोर्ट किया जा सकता है. बिटमैप के बजाय वेक्टर ड्रॉएबल का इस्तेमाल करने से, आपके APK का साइज़ कम हो जाता है. ऐसा इसलिए होता है, क्योंकि इमेज की क्वालिटी में कोई बदलाव किए बिना, एक ही फ़ाइल का साइज़ अलग-अलग स्क्रीन डेंसिटी के हिसाब से बदला जा सकता है. Android के पुराने वर्शन में, वेक्टर ड्रॉएबल का इस्तेमाल नहीं किया जा सकता. हालांकि, Vector Asset Studio, बिल्ड के समय आपके वेक्टर ड्रॉएबल को हर स्क्रीन डेंसिटी के लिए अलग-अलग बिटमैप साइज़ में बदल सकता है.

वेक्टर ऐसेट स्टूडियो के बारे में जानकारी

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

Jetpack Compose के साथ वेक्टर ड्रॉएबल का इस्तेमाल करने के लिए, आपको कम से कम एपीआई लेवल को Android 5.0 (एपीआई लेवल 21) और इसके बाद के वर्शन पर सेट करना होगा.

Android 4.4 (एपीआई लेवल 20) और इससे पहले के वर्शन पर, वेक्टर ड्रॉएबल काम नहीं करते. अगर आपका न्यूनतम एपीआई लेवल इनमें से किसी एपीआई लेवल पर सेट है, तो Vector Asset Studio का इस्तेमाल करते समय आपके पास दो विकल्प होते हैं: पोर्टेबल नेटवर्क ग्राफ़िक (पीएनजी) फ़ाइलें जनरेट करें (डिफ़ॉल्ट रूप से) या AndroidX में बैकवर्ड कंपैटिबिलिटी तकनीक का इस्तेमाल करें.

पुराने सिस्टम के साथ काम करने की सुविधा के लिए, Vector Asset Studio, वेक्टर ड्रॉएबल की रास्टर इमेज जनरेट करता है. वेक्टर और रास्टर ड्रॉएबल को APK में एक साथ पैकेज किया जाता है. Kotlin कोड में वेक्टर ड्रॉएबल को Drawable या एक्सएमएल कोड में @drawable के तौर पर इस्तेमाल किया जा सकता है. जब आपका ऐप्लिकेशन चलता है, तो एपीआई लेवल के हिसाब से, उससे जुड़ी वेक्टर या रास्टर इमेज अपने-आप दिख जाती है.

अगर आपको सिर्फ़ वेक्टर ड्रॉएबल का इस्तेमाल करना है, तो AndroidX 1.0.0 या इसके बाद के वर्शन का इस्तेमाल करें. इस तकनीक का इस्तेमाल करने के लिए, आपको Vector Asset Studio चलाने से पहले अपनी build.gradle फ़ाइल में बदलाव करना होगा. इसके बारे में AndroidX में बताया गया है. AndroidX में मौजूद VectorDrawableCompat क्लास की मदद से, Android 2.1 (एपीआई लेवल 7) और इसके बाद के वर्शन में VectorDrawable की सुविधा इस्तेमाल की जा सकती है.

वेक्टर ग्राफ़िक के इस्तेमाल किए जा सकने वाले टाइप

Google की मटीरियल डिज़ाइन स्पेसिफ़िकेशन में, मटीरियल आइकॉन दिए गए हैं. इनका इस्तेमाल अपने Android ऐप्लिकेशन में किया जा सकता है. वेक्टर ऐसेट स्टूडियो की मदद से, Material आइकॉन चुने, इंपोर्ट किए, और उनका साइज़ बदला जा सकता है. साथ ही, ओपैसिटी और दाईं से बाईं ओर (आरटीएल) मिररिंग सेटिंग तय की जा सकती है.

वेक्टर ऐसेट स्टूडियो में, अपनी SVG और PSD फ़ाइलें भी इंपोर्ट की जा सकती हैं. SVG, वर्ल्ड वाइड वेब कंसोर्टियम (W3C) का XML पर आधारित ओपन स्टैंडर्ड है. PSD फ़ाइल फ़ॉर्मैट, Adobe Photoshop की सुविधाओं के साथ काम करता है. वेक्टर ऐसेट स्टूडियो, ज़रूरी मानकों के साथ काम करता है. हालांकि, इसमें SVG और PSD की सभी सुविधाएं उपलब्ध नहीं हैं. SVG या PSD फ़ाइल तय करने पर, Vector Asset Studio तुरंत यह जानकारी देता है कि ग्राफ़िक्स कोड काम करता है या नहीं. यह फ़ाइल को एक्सएमएल फ़ाइल में बदलता है. इस फ़ाइल में VectorDrawable कोड होता है. अगर आपको गड़बड़ियां मिलती हैं, तो आपको यह पुष्टि करनी चाहिए कि आपका वेक्टर ड्रॉएबल, उम्मीद के मुताबिक दिख रहा है या नहीं. पीएसडी फ़ाइलों के लिए उपलब्ध सुविधाओं के बारे में ज़्यादा जानने के लिए, पीएसडी फ़ाइलों के लिए सहायता और पाबंदियां लेख पढ़ें.

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

SVG और PSD फ़ाइलों के लिए ध्यान देने वाली बातें

वेक्टर ड्रॉएबल, सामान्य आइकॉन के लिए सही होता है. मटेरियल आइकॉन से, इस तरह की इमेज के अच्छे उदाहरण मिलते हैं जो किसी ऐप्लिकेशन में वेक्टर ड्रॉएबल के तौर पर अच्छी तरह से काम करती हैं. इसके उलट, ऐप्लिकेशन लॉन्च करने के कई आइकॉन में काफ़ी जानकारी होती है. इसलिए, वे रास्टर इमेज के तौर पर बेहतर काम करते हैं.

वेक्टर ड्रॉएबल को शुरू में लोड करने में, सीपीयू के ज़्यादा साइकल लग सकते हैं. हालांकि, ऐसा रास्टर इमेज के साथ नहीं होता. इसके बाद, दोनों के बीच मेमोरी के इस्तेमाल और परफ़ॉर्मेंस में कोई अंतर नहीं होता. हमारा सुझाव है कि वेक्टर इमेज का साइज़ ज़्यादा से ज़्यादा 200 x 200 dp तक सीमित रखें. ऐसा न करने पर, इमेज को रेंडर होने में ज़्यादा समय लग सकता है.

हालांकि, वेक्टर ड्रॉएबल में एक या उससे ज़्यादा रंगों का इस्तेमाल किया जा सकता है, लेकिन कई मामलों में आइकॉन को काले रंग (android:fillColor="#FF000000") में रखना सही होता है. इस तरीके का इस्तेमाल करके, लेआउट में रखे गए वेक्टर ड्रॉएबल में टिंट जोड़ा जा सकता है. इससे आइकॉन का रंग, टिंट के रंग में बदल जाता है. अगर आइकॉन का रंग काला नहीं है, तो आइकॉन का रंग, रंगत के रंग के साथ मिल सकता है.

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

नीचे दी गई टेबल में, बैकवर्ड कंपैटिबिलिटी के लिए इस्तेमाल की जा सकने वाली दो तकनीकों के बारे में खास जानकारी दी गई है:

तकनीक APK में मौजूद ड्रॉएबल VectorDrawable के एक्सएमएल एलिमेंट वर्शन फ़्लैग बनाना ऐप्लिकेशन कोड
PNG जनरेट करना वेक्टर और रास्टर कुछ सुविधाएं काम करती हैं

SVG: Android plugin for Gradle 1.5.0 या इसके बाद का वर्शन

PSD: Android Studio 2.2 या इसके बाद का वर्शन

 डिफ़ॉल्ट कोडिंग की कई तकनीकों के साथ काम करता है
AndroidX 1.0 या इसके बाद का वर्शन वेक्टर पूरी मदद Gradle 3.2 या इसके बाद के वर्शन के लिए Android प्लगिन Support Library के स्टेटमेंट ज़रूरी हैं कोडिंग की कुछ तकनीकों के साथ काम करता है

वेक्टर ड्रॉएबल का इस्तेमाल करने से, छोटा APK बनाया जा सकता है. हालांकि, वेक्टर ड्रॉएबल को पहली बार लोड होने में ज़्यादा समय लग सकता है.

PNG जनरेट करना

Android 5.0 (एपीआई लेवल 21) और इसके बाद के वर्शन में, वेक्टर ड्रॉएबल की सुविधा मिलती है. अगर आपके ऐप्लिकेशन का कम से कम एपीआई लेवल कम है, तो Vector Asset Studio आपके प्रोजेक्ट में वेक्टर ड्रॉएबल फ़ाइल जोड़ता है. साथ ही, बिल्ड के समय Gradle, अलग-अलग रिज़ॉल्यूशन पर पीएनजी रास्टर इमेज बनाता है. Gradle, build.gradle फ़ाइल में डोमेन के हिसाब से तय की गई भाषा (डीएसएल) की generatedDensities प्रॉपर्टी से तय की गई PNG डेंसिटी जनरेट करता है.

Android 5.0 (एपीआई लेवल 21) और इसके बाद के वर्शन के लिए, Vector Asset Studio VectorDrawable के सभी एलिमेंट के साथ काम करता है. Android 4.4 (एपीआई लेवल 20) और इससे पहले के वर्शन के साथ काम करने के लिए, Vector Asset Studio इन XML एलिमेंट के साथ काम करता है:

<vector>

  • android:width
  • android:height
  • android:viewportWidth
  • android:viewportHeight
  • android:alpha

<group>

  • android:rotation
  • android:pivotX
  • android:pivotY
  • android:scaleX
  • android:scaleY
  • android:translateX
  • android:translateY

<path>

  • android:pathData
  • android:fillColor
  • android:strokeColor
  • android:strokeWidth
  • android:strokeAlpha
  • android:fillAlpha
  • android:strokeLineCap
  • android:strokeLineJoin
  • android:strokeMiterLimit

Vector Asset Studio से जनरेट किए गए एक्सएमएल कोड को बदला जा सकता है. हालांकि, ऐसा करना सबसे सही तरीका नहीं है. कोड में वैल्यू बदलने से कोई समस्या नहीं होनी चाहिए. हालांकि, इसके लिए ज़रूरी है कि वैल्यू मान्य और स्टैटिक हों. अगर आपको एक्सएमएल एलिमेंट जोड़ने हैं, तो आपको यह पक्का करना होगा कि वे आपके कम से कम एपीआई लेवल के हिसाब से काम करते हों.

AndroidX

इस तकनीक के लिए, AndroidX 1.0 या इसके बाद के वर्शन और Android Plugin for Gradle 3.2 या इसके बाद के वर्शन की ज़रूरत होती है. साथ ही, इसमें सिर्फ़ वेक्टर ड्रॉएबल का इस्तेमाल किया जाता है. AndroidX में मौजूद VectorDrawableCompat क्लास की मदद से, Android 2.1 (एपीआई लेवल 7) और इसके बाद के वर्शन में VectorDrawable की सुविधा दी जा सकती है.

Vector Asset Studio का इस्तेमाल करने से पहले, आपको अपनी build.gradle फ़ाइल में यह स्टेटमेंट जोड़ना होगा:

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

शानदार

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

वेक्टर ऐसेट स्टूडियो चलाना

वेक्टर ऐसेट स्टूडियो शुरू करने के लिए:

  1. Android Studio में, Android ऐप्लिकेशन प्रोजेक्ट खोलें.

  2. प्रोजेक्ट विंडो में, Android व्यू को चुनें.

  3. res फ़ोल्डर पर राइट क्लिक करें और New > Vector Asset को चुनें.

    प्रोजेक्ट के कुछ अन्य व्यू और फ़ोल्डर में भी यह मेन्यू आइटम मौजूद है.

    वेक्टर ऐसेट स्टूडियो दिखता है.

    पहली इमेज. वेक्टर ऐसेट स्टूडियो.

  4. अगर इसके बजाय, Need Newer Android Plugin for Gradle डायलॉग दिखता है, तो Gradle के वर्शन को इस तरह ठीक करें:

    1. फ़ाइल > प्रोजेक्ट स्ट्रक्चर चुनें.

    2. प्रोजेक्ट स्ट्रक्चर डायलॉग बॉक्स में, प्रोजेक्ट चुनें.

    3. Android Plugin Version फ़ील्ड में, Android Plugin for Gradle के वर्शन को 1.5.0 या इसके बाद के वर्शन पर बदलें. इसके बाद, OK पर क्लिक करें.

      Gradle, प्रोजेक्ट को सिंक करता है.

    4. प्रोजेक्ट विंडो के Android व्यू में, res फ़ोल्डर पर राइट क्लिक करें. इसके बाद, नया > वेक्टर ऐसेट को चुनें.

      वेक्टर ऐसेट स्टूडियो दिखता है.

  5. वेक्टर ग्राफ़िक इंपोर्ट करने की प्रोसेस जारी रखें.

वेक्टर ग्राफ़िक इंपोर्ट करना

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

मटीरियल आइकॉन जोड़ना

वेक्टर ऐसेट स्टूडियो खोलने के बाद, Material आइकॉन को इस तरह जोड़ा जा सकता है:

  1. वेक्टर ऐसेट स्टूडियो में, क्लिप आर्ट चुनें.

  2. क्लिप आर्ट फ़ील्ड में, बटन पर क्लिक करें.

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

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

    कोई Material आइकॉन चुनें और ठीक है पर क्लिक करें. यह आइकॉन, वेक्टर ड्रॉएबल की झलक में दिखता है.

  4. आपके पास संसाधन का नाम, साइज़, ओपैसिटी, और दाईं से बाईं ओर (आरटीएल) दिखने वाली मिररिंग सेटिंग बदलने का विकल्प होता है:

    • नाम - अगर आपको डिफ़ॉल्ट नाम का इस्तेमाल नहीं करना है, तो नया नाम डालें. अगर प्रोजेक्ट में उस संसाधन का नाम पहले से मौजूद है, तो Vector Asset Studio अपने-आप एक यूनीक नाम बना देता है. इसके लिए, वह नाम के आखिर में कोई संख्या जोड़ देता है. नाम में सिर्फ़ छोटे अक्षर, अंडरस्कोर, और अंक शामिल किए जा सकते हैं.

    • बदलाव करें - अगर आपको इमेज के साइज़ में बदलाव करना है, तो यह विकल्प चुनें. नया साइज़ टाइप करने पर, बदलाव झलक वाले हिस्से में दिखता है.

      डिफ़ॉल्ट रूप से यह 24 x 24 डीपी होता है. इसकी जानकारी मटीरियल डिज़ाइन की खास बातों में दी गई है. डिफ़ॉल्ट सेटिंग पर वापस जाने के लिए, चेकबॉक्स से चुने हुए का निशान हटाएं.

    • ओपैसिटी - इमेज की ओपैसिटी को अडजस्ट करने के लिए, स्लाइडर का इस्तेमाल करें. बदलाव, झलक वाले सेक्शन में दिखता है.

    • आरटीएल लेआउट के लिए, अपने-आप मिरर होने की सुविधा चालू करें - अगर आपको लेआउट के दाईं से बाईं ओर होने पर, बाईं से दाईं ओर के बजाय मिरर इमेज दिखानी है, तो यह विकल्प चुनें. उदाहरण के लिए, कुछ भाषाओं को दाईं से बाईं ओर पढ़ा जाता है. अगर आपके पास ऐरो आइकॉन है, तो इस मामले में आपको इसकी मिरर इमेज दिखानी पड़ सकती है. ध्यान दें कि अगर किसी पुराने प्रोजेक्ट पर काम किया जा रहा है, तो आपको अपने ऐप्लिकेशन के मेनिफ़ेस्ट में android:supportsRtl="true" भी जोड़ना पड़ सकता है. ऑटो-मिररिंग की सुविधा, Android 5.0 (एपीआई लेवल 21) और इसके बाद के वर्शन पर काम करती है. साथ ही, यह AndroidX के साथ भी काम करती है.

  5. आगे बढ़ें पर क्लिक करें.

  6. मॉड्यूल और संसाधन डायरेक्ट्री को बदलने का विकल्प:

    • Res Directory - वह संसाधन सोर्स सेट चुनें जिसमें आपको वेक्टर ड्रॉएबल जोड़ना है: src/main/res, src/debug/res, src/release/res या उपयोगकर्ता के तय किए गए सोर्स सेट. मुख्य सोर्स सेट, सभी बिल्ड वैरिएंट पर लागू होता है. इसमें डीबग और रिलीज़ शामिल हैं. डीबग और रिलीज़ सोर्स सेट, मुख्य सोर्स सेट को बदल देते हैं. साथ ही, ये किसी बिल्ड के एक वर्शन पर लागू होते हैं. डीबग सोर्स सेट का इस्तेमाल सिर्फ़ डीबग करने के लिए किया जाता है. नया सोर्स सेट तय करने के लिए, फ़ाइल > प्रोजेक्ट स्ट्रक्चर > ऐप्लिकेशन > बिल्ड टाइप चुनें. उदाहरण के लिए, बीटा सोर्स सेट तय किया जा सकता है. साथ ही, आइकॉन का ऐसा वर्शन बनाया जा सकता है जिसमें नीचे दाएं कोने में "बीटा" टेक्स्ट शामिल हो. ज़्यादा जानकारी के लिए, बिल्ड वैरिएंट कॉन्फ़िगर करना लेख पढ़ें.

    आउटपुट डायरेक्ट्री एरिया में, वेक्टर ड्रॉएबल और वह डायरेक्ट्री दिखती है जहां यह दिखेगा.

  7. पूरा करें पर क्लिक करें.

    वेक्टर ऐसेट स्टूडियो, app/src/main/res/drawable/ फ़ोल्डर में मौजूद प्रोजेक्ट में, वेक्टर ड्रॉएबल को तय करने वाली एक्सएमएल फ़ाइल जोड़ता है. प्रोजेक्ट विंडो के Android व्यू में, जनरेट की गई वेक्टर एक्सएमएल फ़ाइल को drawable फ़ोल्डर में देखा जा सकता है.

  8. प्रोजेक्ट बनाएं.

    अगर कम से कम एपीआई लेवल Android 4.4 (एपीआई लेवल 20) या इससे पहले का है और आपने AndroidX तकनीक चालू नहीं की है, तो Vector Asset Studio, PNG फ़ाइलें जनरेट करता है. प्रोजेक्ट विंडो के प्रोजेक्ट फ़ाइलें व्यू में, जनरेट की गई PNG और एक्सएमएल फ़ाइलों को app/build/generated/res/pngs/debug/ फ़ोल्डर में देखा जा सकता है.

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

SVG या PSD फ़ाइल इंपोर्ट करना

वेक्टर ऐसेट स्टूडियो खोलने के बाद, SVG या PSD फ़ाइल को इस तरह इंपोर्ट किया जा सकता है:

  1. वेक्टर ऐसेट स्टूडियो में, लोकल फ़ाइल चुनें.

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

  2. … पर क्लिक करके, इमेज फ़ाइल चुनें .

    यह इमेज, वेक्टर ड्रॉएबल की झलक में दिखती है.

    अगर एसवीजी या PSD फ़ाइल में ऐसी सुविधाएं शामिल हैं जो काम नहीं करतीं, तो Vector Asset Studio में सबसे नीचे एक गड़बड़ी का मैसेज दिखता है. जैसा कि तीसरे फ़िगर में दिखाया गया है.

    तीसरी इमेज. वेक्टर ऐसेट स्टूडियो में कुछ गड़बड़ियां दिख रही हैं.

    अगर आपको गड़बड़ियां दिखती हैं, तो आपको यह पक्का करना होगा कि इंपोर्ट किया गया वेक्टर ड्रॉएबल सही तरीके से रेंडर हो रहा हो. गड़बड़ियां देखने के लिए, सूची को स्क्रोल करें.

    जिन एलिमेंट के साथ काम करता है उनकी सूची देखने के लिए, Vector Drawable Backward-Compatibility Solutions पर जाएं. अनुमति वाली PSD फ़ाइलों के बारे में ज़्यादा जानने के लिए, PSD फ़ाइलों के लिए सहायता और पाबंदियां लेख पढ़ें.

  3. आपके पास संसाधन का नाम, साइज़, ओपैसिटी, और दाईं से बाईं ओर (आरटीएल) दिखने वाली मिररिंग सेटिंग बदलने का विकल्प होता है:

    • नाम - अगर आपको डिफ़ॉल्ट नाम का इस्तेमाल नहीं करना है, तो नया नाम डालें. अगर प्रोजेक्ट में उस संसाधन का नाम पहले से मौजूद है, तो Vector Asset Studio अपने-आप एक यूनीक नाम बना देता है. इसके लिए, वह नाम के आखिर में कोई संख्या जोड़ देता है. नाम में सिर्फ़ छोटे अक्षर, अंडरस्कोर, और अंक शामिल किए जा सकते हैं.

    • बदलाव करें - अगर आपको इमेज का साइज़ अडजस्ट करना है, तो यह विकल्प चुनें. इसे चुनने के बाद, साइज़ बदलकर इमेज के साइज़ के बराबर हो जाता है. साइज़ बदलने पर, बदलाव झलक वाले हिस्से में दिखता है. डिफ़ॉल्ट रूप से यह 24 x 24 डीपी होता है. इसकी जानकारी मटीरियल डिज़ाइन की खास बातों में दी गई है.

    • ओपैसिटी - इमेज की ओपैसिटी को अडजस्ट करने के लिए, स्लाइडर का इस्तेमाल करें. बदलाव, झलक वाले सेक्शन में दिखता है.

    • आरटीएल लेआउट के लिए, अपने-आप मिरर होने की सुविधा चालू करें - अगर आपको लेआउट के दाईं से बाईं ओर होने पर, बाईं से दाईं ओर के बजाय मिरर इमेज दिखानी है, तो यह विकल्प चुनें. उदाहरण के लिए, कुछ भाषाओं को दाईं से बाईं ओर पढ़ा जाता है. अगर आपके पास ऐरो आइकॉन है, तो इस मामले में आपको इसकी मिरर इमेज दिखानी पड़ सकती है. ध्यान दें कि अगर किसी पुराने प्रोजेक्ट पर काम किया जा रहा है, तो आपको अपने ऐप्लिकेशन के मेनिफ़ेस्ट में android:supportsRtl="true" जोड़ना पड़ सकता है. ऑटो-मिररिंग की सुविधा, Android 5.0 (एपीआई लेवल 21) और इसके बाद के वर्शन के साथ-साथ AndroidX पर काम करती है.

  4. आगे बढ़ें पर क्लिक करें.

  5. संसाधन डायरेक्ट्री को बदलने का विकल्प:

    • Res Directory - वह संसाधन सोर्स सेट चुनें जिसमें आपको वेक्टर ड्रॉएबल जोड़ना है: src/main/res, src/debug/res, src/release/res या उपयोगकर्ता के तय किए गए सोर्स सेट. मुख्य सोर्स सेट, सभी बिल्ड वैरिएंट पर लागू होता है. इनमें डीबग और रिलीज़ शामिल हैं. डीबग और रिलीज़ सोर्स सेट, मुख्य सोर्स सेट को बदल देते हैं. साथ ही, ये किसी बिल्ड के एक वर्शन पर लागू होते हैं. डीबग सोर्स सेट का इस्तेमाल सिर्फ़ डीबग करने के लिए किया जाता है. नया सोर्स सेट तय करने के लिए, फ़ाइल > प्रोजेक्ट स्ट्रक्चर > ऐप्लिकेशन > बिल्ड टाइप चुनें. उदाहरण के लिए, बीटा सोर्स सेट तय किया जा सकता है. साथ ही, आइकॉन का ऐसा वर्शन बनाया जा सकता है जिसमें सबसे नीचे दाएं कोने में "बीटा" टेक्स्ट शामिल हो. ज़्यादा जानकारी के लिए, बिल्ड वैरिएंट कॉन्फ़िगर करना लेख पढ़ें.

    आउटपुट डायरेक्ट्री एरिया में, वेक्टर ड्रॉएबल और वह डायरेक्ट्री दिखती है जहां यह दिखेगा.

  6. पूरा करें पर क्लिक करें.

    वेक्टर ऐसेट स्टूडियो, app/src/main/res/drawable/ फ़ोल्डर में मौजूद प्रोजेक्ट में, वेक्टर ड्रॉएबल को तय करने वाली एक्सएमएल फ़ाइल जोड़ता है. प्रोजेक्ट विंडो के Android व्यू में, जनरेट की गई वेक्टर एक्सएमएल फ़ाइल को drawable फ़ोल्डर में देखा जा सकता है.

  7. प्रोजेक्ट बनाएं.

    अगर कम से कम एपीआई लेवल Android 4.4 (एपीआई लेवल 20) या इससे पहले का है और आपने AndroidX तकनीक चालू नहीं की है, तो Vector Asset Studio, PNG फ़ाइलें जनरेट करता है. प्रोजेक्ट विंडो के प्रोजेक्ट फ़ाइलें व्यू में, जनरेट की गई PNG और एक्सएमएल फ़ाइलों को app/build/generated/res/pngs/debug/ फ़ोल्डर में देखा जा सकता है.

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

Jetpack Compose में वेक्टर ऐसेट को रेफ़रंस करना

Vector Asset Studio का इस्तेमाल करके, अपने res/drawable फ़ोल्डर में कोई ऐसेट जोड़ने के बाद, उसे अपने कोड में रेफ़रंस के तौर पर इस्तेमाल किया जा सकता है.

Jetpack Compose में, अपने वेक्टर को दिखाने का सबसे सामान्य तरीका, Icon या Image कंपोज़ेबल का इस्तेमाल करना है.

Icon कंपोज़ेबल, छोटी और मोनोक्रोमैटिक ऐसेट दिखाने का स्टैंडर्ड तरीका है. इसमें Material Design के सिद्धांतों के लिए, पहले से मौजूद सहायता मिलती है. जैसे, Material 3 थीम के आधार पर डाइनैमिक टिंटिंग लागू करना और कॉन्टेंट के ब्यौरे के ज़रिए अपने-आप ऐक्सेसिबिलिटी की सुविधा चालू होना.

कंपोज़ेबल को एक्सएमएल वेक्टर ऐसेट देने के लिए, painterResource एपीआई का इस्तेमाल करें:

Icon(
    painter = painterResource(id = R.drawable.ic_speedometer),
    tint = MaterialTheme.colorScheme.primary, // Applies dynamic theme color
    contentDescription = "Current Speed", // Essential for accessibility
)

ज़्यादा जटिल और कई रंगों वाले वेक्टर के लिए, Image कंपोज़ेबल का इस्तेमाल करें:

Image(
     painter = painterResource(id = R.drawable.ic_complex_vector),
     contentDescription = null // Decorative element
)

इमेज को पसंद के मुताबिक बनाने या परफ़ॉर्मेंस को ऑप्टिमाइज़ करने जैसे अन्य मुश्किल कामों के लिए, इमेज के साथ काम करना लेख पढ़ें. वेक्टर को ऐनिमेट करने के लिए, Compose में ऐनिमेट की गई वेक्टर इमेज देखें.

Vector Asset Studio से जनरेट किए गए XML कोड में बदलाव करना

वेक्टर ड्रॉएबल के एक्सएमएल कोड में बदलाव किया जा सकता है. हालांकि, बिल्ड टाइम में जनरेट हुई PNG इमेज और उनसे जुड़े एक्सएमएल कोड में बदलाव नहीं किया जा सकता. हालांकि, हम इसका सुझाव नहीं देते.

PNG जनरेट करने की तकनीक का इस्तेमाल करते समय, Vector Asset Studio यह पक्का करता है कि वेक्टर ड्रॉएबल और PNG मैच करें. साथ ही, यह भी पक्का करता है कि मेनिफ़ेस्ट में सही कोड मौजूद हो. अगर आपने ऐसा कोड जोड़ा है जो Android 4.4 (एपीआई लेवल 20) और इससे पहले के वर्शन पर काम नहीं करता, तो आपकी वेक्टर और PNG इमेज अलग-अलग हो सकती हैं. आपको यह भी पक्का करना होगा कि मेनिफ़ेस्ट में, आपके बदलावों को लागू करने के लिए कोड मौजूद हो.

AndroidX तकनीक का इस्तेमाल न करने पर, वेक्टर एक्सएमएल फ़ाइल में बदलाव करने के लिए:

  1. प्रोजेक्ट विंडो में, drawable फ़ोल्डर में जनरेट की गई वेक्टर एक्सएमएल फ़ाइल पर दो बार क्लिक करें.

    एक्सएमएल फ़ाइल, एडिटर और झलक विंडो में दिखती है.

    चौथी इमेज. कोड एडिटर और झलक विंडो में दिखाई गई वेक्टर एक्सएमएल फ़ाइल.

  2. कम से कम एपीआई लेवल के साथ काम करने वाले XML कोड में बदलाव करें:

    • Android 5.0 (एपीआई लेवल 21) और इसके बाद के वर्शन - Vector Asset Studio, Drawable और VectorDrawable के सभी एलिमेंट के साथ काम करता है. एक्सएमएल एलिमेंट जोड़े जा सकते हैं और वैल्यू बदली जा सकती हैं. Jetpack Compose के लिए, वेक्टर ड्रॉएबल को ImageVector में लोड किया जा सकता है, ताकि उसे अपनी पसंद के मुताबिक बनाया जा सके.

    • Android 4.4 (एपीआई लेवल 20) और इससे पहले के वर्शन - Vector Asset Studio, Drawable एलिमेंट के सभी और VectorDrawable एलिमेंट के सबसेट के साथ काम करता है. सूची देखने के लिए, Vector Drawable Backward-Compatibility Solutions देखें. जनरेट किए गए कोड में वैल्यू बदली जा सकती हैं. साथ ही, इस्तेमाल किए जा सकने वाले एक्सएमएल एलिमेंट जोड़े जा सकते हैं.

  3. प्रोजेक्ट बनाएं और देखें कि वेक्टर ड्रॉएबल और उससे जुड़ी रास्टर इमेज एक जैसी दिख रही हैं या नहीं.

    ध्यान रखें कि जनरेट की गई पीएनजी इमेज, प्रीव्यू विंडो में ऐप्लिकेशन से अलग दिख सकती हैं. ऐसा अलग-अलग रेंडरिंग इंजन और बिल्ड से पहले वेक्टर ड्रॉएबल में किए गए बदलावों की वजह से हो सकता है. अगर Vector Asset Studio से बनाई गई वेक्टर एक्सएमएल फ़ाइल में कोड जोड़ा जाता है, तो Android 4.4 (एपीआई लेवल 20) और इससे पहले के वर्शन में काम न करने वाली कोई भी सुविधा, जनरेट की गई पीएनजी फ़ाइलों में नहीं दिखती. इसलिए, कोड जोड़ते समय आपको हमेशा यह देखना चाहिए कि जनरेट की गई PNG, वेक्टर ड्रॉएबल से मेल खाती हों. इसके लिए, Project विंडो के Project Files view में मौजूद PNG पर दो बार क्लिक करें. जब आपका कोड ड्रॉएबल को रेफ़र करता है, तब Code Editor के बाईं ओर के मार्जिन में भी PNG इमेज दिखती है. इसे पांचवें फ़िगर में दिखाया गया है.

    पांचवीं इमेज. कोड एडिटर के बाएं मार्जिन में दिखाई गई पीएनजी इमेज.

किसी प्रोजेक्ट से वेक्टर ड्रॉएबल मिटाना

किसी प्रोजेक्ट से वेक्टर ड्रॉएबल हटाने के लिए:

  1. प्रोजेक्ट विंडो में, जनरेट की गई वेक्टर XML फ़ाइल को मिटाएं. इसके लिए, फ़ाइल को चुनें और मिटाएं कुंजी दबाएं. इसके अलावा, बदलाव करें > मिटाएं को भी चुना जा सकता है.

    आपको सुरक्षित तरीके से मिटाएं डायलॉग दिखेगा.

  2. अगर आपको यह पता लगाना है कि प्रोजेक्ट में फ़ाइल का इस्तेमाल कहां किया गया है, तो विकल्प चुनें. इसके बाद, ठीक है पर क्लिक करें.

    Android Studio, फ़ाइल को प्रोजेक्ट और ड्राइव से मिटा देता है. हालांकि, अगर आपने प्रोजेक्ट में उन जगहों को खोजने का विकल्प चुना है जहाँ फ़ाइल का इस्तेमाल किया गया है और आपको कुछ इस्तेमाल मिले हैं, तो उन्हें देखा जा सकता है. इसके बाद, यह तय किया जा सकता है कि फ़ाइल को मिटाना है या नहीं.

  3. बिल्ड करें > क्लीन प्रोजेक्ट चुनें.

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

वेक्टर ड्रॉएबल वाला ऐप्लिकेशन डिलीवर करना

अगर आपने AndroidX तकनीक का इस्तेमाल किया है या आपका कम से कम एपीआई लेवल Android 5.0 (एपीआई लेवल 21) या उससे ज़्यादा है, तो आपके APK में वे वेक्टर ड्रॉएबल शामिल होंगे जिन्हें आपने Vector Asset Studio की मदद से जोड़ा था. अगर वेक्टर इमेज को PNG में बदल दिया जाता है, तो ये APK छोटे होंगे.

अगर आपके ऐप्लिकेशन का कम से कम एपीआई लेवल Android 4.4 (एपीआई लेवल 20) या इससे पहले का है और आपके प्रोजेक्ट में इससे जुड़े वेक्टर ड्रॉएबल और रास्टर इमेज मौजूद हैं, तो आपके पास APK फ़ाइलें डिलीवर करने के दो विकल्प हैं:

  • एक ऐसा APK बनाएं जिसमें वेक्टर ड्रॉएबल और उनसे जुड़े रास्टर इमेज, दोनों शामिल हों. इस समाधान को लागू करना सबसे आसान है.
  • अलग-अलग एपीआई लेवल के लिए अलग-अलग APK बनाएं. Android 5.0 (एपीआई लेवल 21) और इसके बाद के वर्शन के लिए, APK में रास्टर इमेज शामिल न करने पर, APK का साइज़ काफ़ी कम हो सकता है. ज़्यादा जानकारी के लिए, एक से ज़्यादा APK के साथ काम करने की सुविधा लेख पढ़ें.

PSD फ़ाइलों के लिए सहायता और पाबंदियां

Vector Asset Studio, PSD फ़ाइल की सभी सुविधाओं के साथ काम नहीं करता. यहां दी गई सूची में, PSD फ़ाइल की उन विशेषताओं के बारे में खास जानकारी दी गई है जिनका इस्तेमाल किया जा सकता है और जिनका इस्तेमाल नहीं किया जा सकता. साथ ही, इसमें फ़ाइल फ़ॉर्मैट बदलने से जुड़ी कुछ जानकारी भी दी गई है.

दस्तावेज़

काम करता है:

  • PSD फ़ाइल का कलर मोड, बिटमैप, ग्रेस्केल, इंडेक्स्ड, आरजीबी, लैब या सीएमवाईके होना चाहिए.
  • कलर डेप्थ 8, 16 या 32 बिट होनी चाहिए.

कन्वर्ज़न की जानकारी:

  • PSD दस्तावेज़ के डाइमेंशन, वेक्टर ड्रॉएबल और व्यूपोर्ट के डाइमेंशन बन जाते हैं.

काम नहीं करता है:

  • PSD फ़ाइल का कलर मोड, ड्यूटोन या मल्टीचैनल होना चाहिए.

आकार

काम करता है:

  • क्लिपिंग मास्क, अगर क्लिपिंग बेस कोई और शेप है.
  • शेप से जुड़ी कार्रवाइयां, जैसे कि मर्ज/जोड़ना, इंटरसेक्ट करना, घटाना, और बाहर करना.

काम नहीं करता है:

  • यह नियम, Photoshop के शेप में रंग भरने के लिए इस्तेमाल किया जाता है. Android 6.0 (एपीआई लेवल 23) और इससे पहले के वर्शन में, वेक्टर ड्रॉएबल सिर्फ़ nonzero fill नियम के साथ काम करते हैं. सेल्फ़-इंटरसेक्टिंग शेप में, इस सीमा की वजह से PSD और उससे जनरेट होने वाले वेक्टर ड्रॉएबल के रेंडरिंग में अंतर आ सकता है. इस समस्या को ठीक करने के लिए, वेक्टर ड्रॉएबल में मौजूद शेप पर android:fillType="evenOdd" जोड़ें. उदाहरण के लिए:

    <vector xmlns:android="https://schemas.android.com/apk/res/android"
  android:viewportHeight="168"
  android:height="24dp"
  android:viewportWidth="209"
  android:width="24dp">

  <path
      android:fillAlpha="1.0"
      android:fillColor="#000000"
      android:fillType="evenOdd"
      android:pathData="M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47"/>
</vector>

स्ट्रोक और फ़िल

काम करता है:

  • स्ट्रोक, जिनमें रंग, ओपैसिटी, चौड़ाई, जॉइन, कैप, डैश, और अलाइनमेंट शामिल हैं.
  • सॉलिड कलर फ़िल और स्ट्रोक.
  • स्ट्रोक और फ़िल किए गए रंगों को आरजीबी, लैब या सीएमवायके के तौर पर तय किया गया है.

कन्वर्ज़न की जानकारी:

  • अगर कोई स्ट्रोक डैश किया गया है, क्लिपिंग बेस का इस्तेमाल करके काटा गया है या सेंटर से अलग अलाइनमेंट का इस्तेमाल करता है, तो Vector Asset Studio उसे वेक्टर ड्रॉएबल में फ़िल शेप में बदल देता है.

काम नहीं करता है:

  • सॉलिड के अलावा, रंग भरने और स्ट्रोक करने के अन्य विकल्प, जैसे कि ग्रेडिएंट.

अपारदर्शिता

काम करता है:

  • शेप लेयर की ओपैसिटी 0 पर सेट है.

कन्वर्ज़न की जानकारी:

  • वेक्टर ऐसेट स्टूडियो, फ़िल के ऐल्फ़ा की गिनती करने के लिए, फ़िल की अपारदर्शिता को लेयर की अपारदर्शिता से गुणा करता है.
  • यह टूल, क्लिपिंग बेस (अगर कोई क्लिपिंग बेस है) की ओपैसिटी को फ़िल ऐल्फ़ा से गुणा करता है, ताकि फ़ाइनल फ़िल ऐल्फ़ा का हिसाब लगाया जा सके.
  • यह टूल, स्ट्रोक के ऐल्फ़ा की गणना करने के लिए, स्ट्रोक की अपारदर्शिता को लेयर की अपारदर्शिता से गुणा करता है.
  • यह टूल, स्ट्रोक के फ़ाइनल ऐल्फ़ा की गिनती करने के लिए, क्लिपिंग बेस (अगर कोई क्लिपिंग बेस है) की ओपैसिटी को स्ट्रोक ऐल्फ़ा से गुणा करता है.

लेयर

काम करता है:

  • कोई भी दिखने वाली शेप लेयर.

कन्वर्ज़न की जानकारी:

  • वेक्टर ऐसेट स्टूडियो, वेक्टर ड्रॉएबल फ़ाइल में लेयर के नाम सेव करता है.

काम नहीं करता है:

  • लेयर इफ़ेक्ट.
  • एडजस्टमेंट और टेक्स्ट लेयर.
  • ब्लेंडिंग मोड (अनदेखा किया गया).

SVG फ़ाइलों के लिए सहायता और पाबंदियां

Vector Asset Studio में, SVG फ़ाइल की सभी सुविधाओं का इस्तेमाल नहीं किया जा सकता. इस सेक्शन में, SVG फ़ाइल को VectorDrawable में बदलने के दौरान काम करने वाली और न करने वाली सुविधाओं के बारे में खास जानकारी दी गई है. साथ ही, फ़ाइल बदलने से जुड़ी अन्य जानकारी भी दी गई है.

इस्तेमाल की जा सकने वाली सुविधाएं

VectorDrawable, Tiny SVG 1.2 की सभी सुविधाओं के साथ काम करता है. हालांकि, text के साथ काम नहीं करता.

आकार

VectorDrawable, SVG पाथ के साथ काम करता है.

यह टूल, सर्कल, स्क्वेयर, और पॉलीगॉन जैसे प्रिमिटिव शेप को पाथ में बदलता है.

ट्रांसफ़ॉर्मेशन

यह टूल, ट्रांसफ़ॉर्मेशन मैट्रिक्स के साथ काम करता है और उन्हें सीधे चाइल्ड पाथ पर लागू करता है.

समूह

इस टूल में, ग्रुप किए गए एलिमेंट को अनुवाद करने, उनका साइज़ बदलने, और उन्हें घुमाने की सुविधा मिलती है. ग्रुप में ओपैसिटी प्रॉपर्टी काम नहीं करती.

यह टूल, चाइल्ड पाथ पर ग्रुप स्टाइल या ओपैसिटी भी लागू करता है.

भरना और स्ट्रोक करना

पाथ में सॉलिड कलर या ग्रेडिएंट (लीनियर, रेडियल या ऐंगुलर) का इस्तेमाल करके रंग भरा जा सकता है और स्ट्रोक किया जा सकता है. सिर्फ़ बीच में स्ट्रोक वाली स्टाइल का इस्तेमाल किया जा सकता है. ब्लेंड मोड काम नहीं करते. डैश वाले पाथ का इस्तेमाल नहीं किया जा सकता.

मुखौटे

इस टूल में, हर ग्रुप के लिए एक क्लिपिंग मास्क इस्तेमाल किया जा सकता है.

SVG फ़ाइल इंपोर्ट करने की सुविधा के साथ काम न करने वाली सुविधाएं

काम करने वाली सुविधाएं सेक्शन में शामिल न की गई कोई भी सुविधा काम नहीं करती. इन सुविधाओं का इस्तेमाल नहीं किया जा सकता:

  • फ़िल्टर इफ़ेक्ट: ड्रॉप शैडो, ब्लर, और कलर मैट्रिक्स जैसे इफ़ेक्ट काम नहीं करते.
  • टेक्स्ट: हमारा सुझाव है कि टेक्स्ट को शेप में बदलने के लिए, दूसरे टूल का इस्तेमाल करें.
  • पैटर्न फ़िल

अन्य संसाधन

वेक्टर ग्राफ़िक के बारे में ज़्यादा जानने के लिए, यहां दिए गए संसाधन देखें:

दस्तावेज़

कॉन्टेंट देखता है