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

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

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

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

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

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

    तीन Android डिवाइसों का उदाहरण. हर डिवाइस पर अलग-अलग रंगत वाली अलग-अलग थीम दिख रही हैं: पहले डिवाइस पर गहरे रंगत वाला वॉलपेपर दिख रहा है; दूसरे डिवाइस पर सुनहरे रंगत वाला वॉलपेपर दिख रहा है; तीसरे डिवाइस पर हल्के नीले रंगत वाला हल्का ग्रे वॉलपेपर दिख रहा है. हर उदाहरण में, आइकॉन ने वॉलपेपर के रंग को अपना लिया है और वे वॉलपेपर के साथ पूरी तरह से घुलमिल गए हैं.
    तीसरी इमेज. अडैप्टिव आइकॉन, उपयोगकर्ता के वॉलपेपर और थीम से मिलते-जुलते होते हैं.

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

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

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

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

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

    फ़ोरग्राउंड लेयर (बाएं) और बैकग्राउंड लेयर (दाएं) का उदाहरण. फ़ोरग्राउंड में, 16 साइड वाला Android लोगो का आइकॉन दिखाया गया है. यह आइकॉन, 66x66 के सुरक्षित ज़ोन के बीच में है. सेफ़ ज़ोन, 108x108 कंटेनर के बीच में होता है. बैकग्राउंड में, सेफ़ ज़ोन और कंटेनर के लिए मेज़र किए गए डाइमेंशन एक जैसे दिखते हैं. हालांकि, इसमें सिर्फ़ नीला बैकग्राउंड दिखता है और कोई लोगो नहीं दिखता.
    चौथी इमेज. फ़ोरग्राउंड और बैकग्राउंड लेयर का इस्तेमाल करके बनाए गए अडैप्टिव आइकॉन. दिखाया गया 66x66 सेफ़ ज़ोन वह एरिया है जिसे ओईएम की ओर से तय किए गए शेप वाले मास्क से कभी नहीं काटा जाता.
    इस उदाहरण में, पिछली इमेज में मौजूद आइकॉन को एक गोलाकार मास्क पर ओवरले किया गया है.
    पांचवीं इमेज. इस उदाहरण में दिखाया गया है कि फ़ोरग्राउंड और बैकग्राउंड लेयर, एक साथ कैसी दिखती हैं. साथ ही, इसमें सर्कुलर मास्क को लागू किया गया है.
  • अगर आपको ऐप्लिकेशन के आइकॉन के लिए, उपयोगकर्ता की थीमिंग की सुविधा देनी है, तो आइकॉन के मोनोक्रोम वर्शन के लिए एक लेयर उपलब्ध कराएं.

    मोनोक्रोमैटिक आइकॉन लेयर (बाईं ओर) और रंग की झलक (दाईं ओर) का उदाहरण. मोनोक्रोमैटिक लेयर में, 16 साइड वाला Android लोगो दिखाया गया है. यह लोगो, 66x66 के सुरक्षित ज़ोन के बीच में है. सेफ़ ज़ोन, 108x108 कंटेनर के बीच में होता है. रंग की झलक दिखाने वाली इमेज में, इस लेयर को अलग-अलग रंग की यूज़र थीम (ऑरेंज, गुलाबी, पीला, और हरा) पर लागू करने के बाद दिखाया गया है.
    छठी इमेज. एक रंग वाली आइकॉन लेयर (बाएं) और रंग की झलक के उदाहरण (दाएं).
  • सभी लेयर का साइज़ 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> इनर एलिमेंट, वेक्टर और बिटमैप, दोनों तरह की इमेज के साथ काम करते हैं.

यहां दिए गए उदाहरण में, <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() तरीके का इस्तेमाल करें.

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

अन्य संसाधन

अनुकूलित आइकॉन को डिज़ाइन और लागू करने के बारे में ज़्यादा जानकारी के लिए, यहां दिए गए संसाधन देखें.