ऐप्लिकेशन आइकॉन बनाना (व्यू)

Jetpack Compose को लागू करनाarrow_forward

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

ऐक्शन बार या टैब आइकॉन बनाना

व्यू पर आधारित लेआउट के लिए, ऐक्शन बार और टैब आइकॉन बनाने के लिए, इमेज ऐसेट स्टूडियो का इस्तेमाल करें.

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

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

इमेज ऐसेट स्टूडियो, आइकॉन को res/drawable-<density>/ डायरेक्ट्री में सही जगहों पर रखता है.

हमारा सुझाव है कि आप ऐक्शन बार और टैब आइकॉन के लिए, मटीरियल डिज़ाइन स्टाइल का इस्तेमाल करें. भले ही, आपके ऐप्लिकेशन में Android के पुराने वर्शन काम करते हों. अपने मटीरियल डिज़ाइन यूज़र इंटरफ़ेस (यूआई) को प्लैटफ़ॉर्म के पुराने वर्शन पर डिलीवर करने के लिए, appcompat और अन्य सपोर्ट लाइब्रेरी का इस्तेमाल करें.

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

इमेज ऐसेट स्टूडियो खोलने के बाद, ऐक्शन बार या टैब आइकॉन जोड़ने के लिए यह तरीका अपनाएं:

1. आइकॉन टाइप फ़ील्ड में, ऐक्शन बार और टैब आइकॉन चुनें.

2. कोई ऐसेट टाइप चुनें. इसके बाद, नीचे दिए गए फ़ील्ड में ऐसेट डालें:

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

     आइकॉन चुनें डायलॉग बॉक्स में, कोई मटेरियल आइकॉन चुनें. इसके बाद, ठीक है पर क्लिक करें.

   • पाथ फ़ील्ड में, इमेज का पाथ और फ़ाइल का नाम डालें. डायलॉग का इस्तेमाल करने के लिए, ... पर क्लिक करें.

   • टेक्स्ट फ़ील्ड में, कोई टेक्स्ट स्ट्रिंग टाइप करें और कोई फ़ॉन्ट चुनें.

   यह आइकॉन, दाईं ओर मौजूद सोर्स ऐसेट सेक्शन में दिखता है. साथ ही, यह विज़र्ड के सबसे नीचे मौजूद प्रीव्यू सेक्शन में भी दिखता है.

3. नाम और डिसप्ले के विकल्पों में बदलाव करें. यह ज़रूरी नहीं है:

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

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

   • पैडिंग - अगर आपको सोर्स ऐसेट की पैडिंग को चारों ओर से अडजस्ट करना है, तो स्लाइडर को घुमाएं. -10% से 50% के बीच की कोई वैल्यू चुनें. अगर आपने ट्रिम करें का विकल्प भी चुना है, तो वीडियो को पहले ट्रिम किया जाएगा.

   • थीम - HOLO_LIGHT या HOLO_DARK चुनें. इसके अलावा, रंग चुनें डायलॉग में कोई रंग चुनने के लिए, CUSTOM को चुनें. इसके बाद, पसंद के मुताबिक रंग फ़ील्ड पर क्लिक करें.

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

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

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

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

   आउटपुट डायरेक्ट्री सेक्शन में, इमेज और वे फ़ोल्डर दिखते हैं जिनमें वे प्रोजेक्ट विंडो के प्रोजेक्ट फ़ाइलें व्यू में दिखेंगी.

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

   इमेज ऐसेट स्टूडियो, अलग-अलग डेंसिटी के लिए drawable फ़ोल्डर में इमेज जोड़ता है.

कोड में किसी इमेज रिसोर्स का रेफ़रंस देना

आम तौर पर, अपने कोड में इमेज रिसोर्स का सामान्य तरीके से रेफ़रंस दिया जा सकता है. साथ ही, जब आपका ऐप्लिकेशन चलता है, तो डिवाइस के हिसाब से इमेज अपने-आप दिखती है:

• ज़्यादातर मामलों में, इमेज रिसॉर्स को एक्सएमएल कोड में @drawable या Java कोड में Drawable के तौर पर इस्तेमाल किया जा सकता है.

  उदाहरण के लिए, यहां दिया गया लेआउट एक्सएमएल कोड, ड्रॉअबल को ImageView में दिखाता है:

  <ImageView
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:src="@drawable/myimage" />
  

  नीचे दिया गया Java कोड, इमेज को Drawable के तौर पर वापस लाता है:

  Kotlin

  val drawable = resources.getDrawable(R.drawable.myimage, theme)

  Java

  Resources res = getResources();
  Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

  getResources() तरीका, Context क्लास में मौजूद होता है. यह यूज़र इंटरफ़ेस ऑब्जेक्ट पर लागू होता है. जैसे, ऐक्टिविटी, फ़्रैगमेंट, लेआउट, व्यू वगैरह.

• अगर आपका ऐप्लिकेशन Support Library का इस्तेमाल करता है, तो app:srcCompat स्टेटमेंट की मदद से, एक्सएमएल कोड में इमेज रिसोर्स का रेफ़रंस दिया जा सकता है. उदाहरण के लिए:

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

इमेज रिसॉर्स को सिर्फ़ मुख्य थ्रेड से ऐक्सेस किया जा सकता है.

आपके प्रोजेक्ट की res/ डायरेक्ट्री में इमेज रिसॉर्स होने के बाद, उसके रिसॉर्स आईडी का इस्तेमाल करके, उसे अपने Java कोड या XML लेआउट से रेफ़रंस किया जा सकता है. नीचे दिए गए Java कोड में, drawable/myimage.png रिसॉर्स का इस्तेमाल करने के लिए ImageView सेट किया गया है:

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

ज़्यादा जानकारी के लिए, अपने ऐप्लिकेशन के संसाधनों को ऐक्सेस करना लेख पढ़ें.