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

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

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

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

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

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

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

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

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

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

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

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

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

    मोनोक्रोमैटिक आइकॉन लेयर का उदाहरण दिखाती हुई इमेज (बाईं ओर मौजूद इमेज)
और रंग की झलक (सही इमेज). मोनोक्रोमैटिक लेयर में 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> इनर एलिमेंट, दोनों के साथ काम करते हैं वेक्टर और बिटमैप इमेज.

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

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

अन्य संसाधन

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