डिवाइस के मुताबिक बदलने वाले आइकॉन

अडैप्टिव आइकॉन या AdaptiveIconDrawable अलग-अलग डिवाइस की क्षमता और उपयोगकर्ता के आधार पर, यह कॉन्टेंट अलग-अलग दिख सकता है थीम पर बने वीडियो होते हैं. अडैप्टिव आइकॉन का इस्तेमाल मुख्य रूप से, होम स्क्रीन पर मौजूद लॉन्चर में किया जाता है. हालांकि, इनका इस्तेमाल शॉर्टकट, सेटिंग ऐप्लिकेशन, शेयर करने वाले डायलॉग, और खास जानकारी वाली स्क्रीन पर. अडैप्टिव आइकॉन का इस्तेमाल, Android के सभी डिवाइसों के नाप या आकार के लिए किया जाता है.

बिटमैप के विपरीत इमेज, अडैप्टिव आइकॉन से ये अलग-अलग उदाहरणों के हिसाब से खुद को ढालें:

• अलग-अलग आकार: अडैप्टिव आइकॉन पर कई तरह के आकार दिख सकते हैं अलग-अलग डिवाइस मॉडल पर काम करते हैं. उदाहरण के लिए, यह कोई गोल आकार दिखा सकता है एक OEM डिवाइस पर रखें और स्क्वायरल (वर्गाकार और मंडली) में दिखाई देता है. हर डिवाइस के OEM को एक मास्क देना होगा, जिसे सिस्टम, सभी अडैप्टिव आइकॉन को एक ही आकार वाले रेंडर करने के लिए करता है.

  

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

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

  

  दूसरी इमेज. इन विज़ुअल इफ़ेक्ट के उदाहरण: अडैप्टिव आइकॉन.

  ध्यान दें: ऐनिमेशन वाले विज़ुअल इफ़ेक्ट, उस लॉन्चर की मदद से जनरेट किए जाते हैं जिस पर यह सुविधा काम करती है. विज़ुअल एक लॉन्चर के हिसाब से इफ़ेक्ट अलग-अलग हो सकते हैं.

• उपयोगकर्ता की थीम का इस्तेमाल: Android 13 (एपीआई लेवल 33) के साथ उपयोगकर्ता थीम कर सकते हैं अपने हिसाब से आइकॉन में बदलाव कर सकते हैं. अगर कोई उपयोगकर्ता थीम वाले ऐप्लिकेशन आइकॉन को चालू करता है, तो सिस्टम सेटिंग में थीम वाले आइकॉन टॉगल होते हैं और लॉन्चर इसके साथ काम करता है सुविधा के अनुसार, सिस्टम उपयोगकर्ता के चुने हुए वॉलपेपर के रंग का इस्तेमाल करता है और रंग तय करने के लिए थीम.

  

  तीसरी इमेज. अडैप्टिव आइकॉन, उपयोगकर्ता के वॉलपेपर और थीम के मुताबिक हो.

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

  • अगर उपयोगकर्ता थीम वाले ऐप्लिकेशन आइकॉन चालू नहीं करता है.
  • अगर आपके ऐप्लिकेशन में एक ही रंग का ऐप्लिकेशन आइकॉन मौजूद नहीं है.
  • अगर लॉन्चर में थीम वाले ऐप्लिकेशन आइकॉन काम नहीं करते.

अडैप्टिव आइकॉन डिज़ाइन करें

यह पक्का करने के लिए कि अडैप्टिव आइकॉन, अलग-अलग आकार, विज़ुअल इफ़ेक्ट, और उपयोगकर्ता थीम के आधार पर तय किया गया है, तो डिज़ाइन इन ज़रूरी शर्तों के मुताबिक होना चाहिए:

• आपको आइकन के कलर वर्शन के लिए दो लेयर देनी होंगी: पहली लेयर के का इस्तेमाल करें. ये लेयर, वेक्टर या बिट मैप, हालांकि वेक्टर को प्राथमिकता दी जाती है.

  

  चौथी इमेज. फ़ोरग्राउंड का इस्तेमाल करके तय किए गए अडैप्टिव आइकॉन और बैकग्राउंड लेयर के साथ काम करता है. इमेज में दिखाया गया 66x66 सेफ़ ज़ोन एरिया है जिसे OEM की ओर से तय किए गए आकार के मास्क से कभी क्लिप न किया गया हो.

  

  पांचवी इमेज. इसका एक उदाहरण कि फ़ोरग्राउंड और बैकग्राउंड की लेयर पर एक गोल मास्क लगा दिया गया है.

• अगर आपको ऐप्लिकेशन के आइकॉन की उपयोगकर्ता थीम को इस्तेमाल करने की सुविधा देनी है, तो आइकॉन का मोनोक्रोम वर्शन.

  

  छठी इमेज. एक मोनोक्रोमैटिक आइकॉन लेयर (बाईं ओर) रंग की झलक के उदाहरण (दाएं).

• सभी लेयर का साइज़ 108x108 dp रखें.

• साफ़ किनारों वाले आइकॉन इस्तेमाल करें. लेयर में मास्क या बैकग्राउंड नहीं होना चाहिए गहरे हिस्सों को हल्का किया जा सकता है.

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

लेयर के चारों किनारों में से हर एक के लिए बाहरी 18 डीपी को सिर्फ़ इस तरह से रखा जाता है मास्किंग और विज़ुअल इफ़ेक्ट बनाने के लिए, जैसे कि पैरालैक्स या पल्सिंग.

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

Android Studio का इस्तेमाल करके अडैप्टिव आइकॉन बनाने का तरीका जानने के लिए, हमारा Android ऐप्लिकेशन देखें Figma का आइकॉन टेंप्लेट या लॉन्चर बनाने के लिए Android Studio का दस्तावेज़ आइकॉन. साथ ही, ब्लॉग पोस्ट डिज़ाइनिंग अडैप्टिव देखें आइकॉन को अपनाएं.

अपने ऐप्लिकेशन में अडैप्टिव आइकॉन जोड़ें

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

android:roundIcon एट्रिब्यूट का इस्तेमाल करना ज़रूरी नहीं है. लॉन्चर इसका इस्तेमाल करते हैं गोल आइकॉन वाले ऐप्लिकेशन. ये तब भी मददगार हो सकते हैं, जब आपके ऐप्लिकेशन के आइकॉन में इसके डिज़ाइन के मुख्य हिस्से के तौर पर, सर्कुलर बैकग्राउंड. ऐसे लॉन्चर के लिए ज़रूरी है कि android:roundIcon पर गोल मास्क लागू करके ऐप्लिकेशन आइकॉन जनरेट करें गारंटी की मदद से, अपने ऐप्लिकेशन आइकॉन के लुक को ऑप्टिमाइज़ किया जा सकता है. इसके लिए उदाहरण के लिए, लोगो को थोड़ा बड़ा करके और पक्का करें कि काटे जाने पर, गोल बैकग्राउंड में फ़ुल ब्लीड है.

नीचे दिया गया कोड स्निपेट इन दोनों एट्रिब्यूट को दिखाता है, लेकिन ज़्यादातर ऐप्लिकेशन सिर्फ़ android:icon बताएं:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

इसके बाद, अडैप्टिव आइकॉन को res/mipmap-anydpi-v26/ic_launcher.xml पर सेव करें. इस्तेमाल की जाने वाली चीज़ें <adaptive-icon> एलिमेंट का इस्तेमाल करके फ़ोरग्राउंड, बैकग्राउंड, और आपके आइकॉन के लिए मोनोक्रोमैटिक लेयर रिसॉर्स. <foreground>, <background> और <monochrome> इनर एलिमेंट, दोनों के साथ काम करते हैं वेक्टर और बिटमैप इमेज.

यहां दिए गए उदाहरण में, <foreground>, <background>, और <adaptive-icon> में <monochrome> एलिमेंट:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

ड्रॉएबल को एलिमेंट के तौर पर भी तय किया जा सकता है. इसके लिए, आपको <foreground>, <background>, और <monochrome> एलिमेंट. नीचे दिए गए स्निपेट, फ़ोरग्राउंड ड्रॉ करने लायक सुविधा की मदद से ऐसा करने का एक उदाहरण दिखाता है.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

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

• स्टैटिक शॉर्टकट के लिए, <adaptive-icon> एलिमेंट का इस्तेमाल करें.
• डायनमिक शॉर्टकट के लिए, createWithAdaptiveBitmap() तरीका होता है.

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

अन्य संसाधन

डिज़ाइन सेटअप के बारे में अतिरिक्त जानकारी के लिए, अडैप्टिव आइकॉन लागू करने पर.

• Figma कम्यूनिटी पेज का टेंप्लेट
• Android के अडैप्टिव आइकॉन के बारे में जानकारी
• अडैप्टिव आइकॉन डिज़ाइन करना
• अडैप्टिव आइकॉन को लागू करना
• Android Studio में ऐप्लिकेशन के आइकॉन बनाना
• Google Play पर आइकॉन के डिज़ाइन की खासियतें