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

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

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

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

  

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

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

  

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

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

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

  

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

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

  • अगर उपयोगकर्ता ने थीम वाले ऐप्लिकेशन आइकॉन की सुविधा चालू नहीं की है.
  • अगर आपके ऐप्लिकेशन में मोनोक्रोमैटिक ऐप्लिकेशन आइकॉन नहीं है और उपयोगकर्ता का डिवाइस, Android 16 QPR 2 से पहले के वर्शन पर काम करता है.
  • अगर लॉन्चर, थीम वाले ऐप्लिकेशन आइकॉन के साथ काम नहीं करता है.

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

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

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

  

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

  

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

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

  

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

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

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

• कम से कम 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> के अंदरूनी एलिमेंट, वेक्टर और बिट मैप इमेज, दोनों के साथ काम करते हैं.

यहां दिए गए उदाहरण में, <adaptive-icon> के अंदर <foreground>, <background>, और <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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</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 पर आइकॉन के डिज़ाइन की खासियतें