कंटेंट पर जाएँ
charmotion
शुरू करें

iOS, Android, Expo और Flutter पर वैकल्पिक ऐप आइकन

Charmotion टीम द्वारा · अपडेट:

गाइड का कवर इलस्ट्रेशन: iOS, Android, Expo और Flutter पर Alternate App Icons, Charmotion के demo कैरेक्टर के साथ

ऐप यूज़र्स को ऑल्टरनेट आइकन में से चुनने दे सकते हैं, लेकिन सिर्फ़ वही आइकन जो ऐप में पहले से शामिल हों, और यह बदलाव एक स्थिर इमेज की जगह दूसरी स्थिर इमेज लगाता है। iOS में setAlternateIconName का इस्तेमाल होता है, जिसके आइकन सेट build के समय declare किए जाते हैं। Android में इसके लिए कोई अलग API नहीं है; ऐप आमतौर पर activity-alias entries को on/off करते हैं। Expo और Flutter, expo-alternate-app-icons जैसे plugins के ज़रिए दोनों को wrap करते हैं।

मुख्य बातें

  • हर ऑल्टरनेट आइकन ऐप के अंदर ही ship होना चाहिए; रनटाइम पर नया आइकन डाउनलोड नहीं किया जा सकता।
  • iOS पर पहले supportsAlternateIcons चेक करें, फिर setAlternateIconName कॉल करें; nil देने पर प्राइमरी आइकन वापस आ जाता है।
  • iOS के ऑल्टरनेट आइकन के अपने dark, clear और tinted वेरिएंट होने चाहिए, और वे आपके ऐप से मिलते-जुलते होने चाहिए।
  • Android पर activity-alias से आइकन बदलना एक आम पैटर्न है, कोई आधिकारिक आइकन API नहीं, और इसके कुछ साइड इफ़ेक्ट भी बताए गए हैं।
  • आइकन को बार-बार बदलना एनिमेशन नहीं है; मोशन के लिए लॉन्च इंट्रो या ऐप के अंदर मैस्कॉट इस्तेमाल करें।

पहले से कोई कैरेक्टर या लोगो है? अपने कैरेक्टर को असली ऐप स्क्रीन में देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन। यह फ़्री है, आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।

iOS पर ऑल्टरनेट ऐप आइकन कैसे काम करते हैं?

अतिरिक्त आइकन सेट अपने asset catalog में जोड़ें और उन्हें target की "Alternate App Icon Sets" build setting में लिस्ट करें; Xcode CFBundleIcons के अंदर CFBundleAlternateIcons entries बना देता है। फिर रनटाइम पर आइकन बदलें (Apple Developer Documentation):

func setIcon(_ name: String?) {
    guard UIApplication.shared.supportsAlternateIcons else { return }
    UIApplication.shared.setAlternateIconName(name) { error in
        if let error { print("Icon change failed: \(error)") }
    }
}

setIcon("IconNight")  // a declared alternate icon set
setIcon(nil)          // back to the primary icon

Completion handler UIKit की दी हुई queue पर चलता है, ज़रूरी नहीं कि main queue पर, इसलिए UI अपडेट करने से पहले main actor पर जाएँ। Apple बताता है कि यह method visionOS में चल रहे compatible iPhone और iPad ऐप में अब भी काम करता है, लेकिन visionOS SDK से बने ऐप में ऑल्टरनेट आइकन उपलब्ध नहीं हैं।

डिज़ाइन के नियम HIG से आते हैं: iOS और iPadOS में ऑल्टरनेट आइकन के अपने dark, clear और tinted वेरिएंट होने चाहिए, और ये सभी App Review से गुज़रते हैं (Apple HIG)। साथ ही guideline 2.3.8 कहती है कि ऑल्टरनेट आइकन आपके ऐप के बाकी आइकन से मिलते-जुलते होने चाहिए (App Review Guidelines)।

क्या Android पर ऐप आइकन प्रोग्रामैटिकली बदला जा सकता है?

Android में "set icon" नाम का कोई API नहीं है। ऐप जो पैटर्न आमतौर पर इस्तेमाल करते हैं, वह दो आधिकारिक हिस्सों से बना है: एक <activity-alias>, जो आपकी launcher activity को अपने android:icon और android:enabled flag के साथ एक अलग entry के रूप में दिखाता है (Android Developers), और aliases को on और off करने के लिए PackageManager.setComponentEnabledSetting।

<activity-alias
    android:name=".MainActivityNight"
    android:targetActivity=".MainActivity"
    android:icon="@mipmap/ic_launcher_night"
    android:enabled="false"
    android:exported="true">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
</activity-alias>
fun switchIcon(context: Context, enable: String, disable: String) {
    val pm = context.packageManager
    pm.setComponentEnabledSetting(ComponentName(context, enable),
        PackageManager.COMPONENT_ENABLED_STATE_ENABLED, PackageManager.DONT_KILL_APP)
    pm.setComponentEnabledSetting(ComponentName(context, disable),
        PackageManager.COMPONENT_ENABLED_STATE_DISABLED, PackageManager.DONT_KILL_APP)
}

चूँकि इससे बदलता है कि कौन-से launcher components मौजूद हैं, इसलिए व्यवहार launcher पर निर्भर करता है। डेवलपर्स ने बताया है कि आइकन बदलते समय ऐप बंद हो सकता है, और कई aliases होने पर deep links पर ध्यान देना पड़ता है (Back Market Engineering)। कई launchers पर टेस्ट करें, आइकन तब बदलें जब यूज़र settings में हो, और एक समय में ठीक एक ही alias enabled रखें।

Expo में ऐप आइकन कैसे बदलें?

Config plugin इस्तेमाल करें, क्योंकि आइकन native resources होते हैं। expo-alternate-app-icons prebuild के समय आपके आइकन native projects में कॉपी करता है और supportsAlternateIcons व setAlternateAppIcon(name) उपलब्ध कराता है, जिसमें null देने पर डिफ़ॉल्ट आइकन वापस आ जाता है (GitHub)। इसके README में Expo SDK 51+ और iOS व Android सपोर्ट लिखा है, साथ ही हर आइकन के लिए iOS की light, dark और tinted इमेज और Android का adaptive foreground और background color।

// app.json (excerpt)
["expo-alternate-app-icons", [
  { "name": "IconNight",
    "ios": { "light": "./assets/night.png", "dark": "./assets/night-dark.png", "tinted": "./assets/night-tinted.png" },
    "android": { "foregroundImage": "./assets/night-fg.png", "backgroundColor": "#0E1116" } }
]]

// in a settings screen
import { setAlternateAppIcon } from "expo-alternate-app-icons";
await setAlternateAppIcon("IconNight");

Plugin में बदलाव करने के बाद npx expo prebuild --clean चलाएँ, और development build इस्तेमाल करें: config plugins और native modules Expo Go में लागू नहीं होते (Expo)।

Flutter में ऐप आइकन कैसे बदलें?

ऐसे plugin के ज़रिए जो ऊपर बताए गए platform mechanisms को कॉल करता है। flutter_dynamic_icon_plus खुद को iOS 10.3+ और Android पर ऐप आइकन को dynamically बदलने वाला plugin बताता है (pub.dev)। फिर भी हर आइकन आपको native तरीके से declare करना होता है: iOS project में ऑल्टरनेट आइकन सेट और Android manifest में activity-alias entries, जैसा plugin के README में बताया गया है।

इस पर निर्भर होने से पहले plugin का maintenance status और खुले issues देख लें, क्योंकि आइकन बदलना platform के उस व्यवहार से जुड़ा है जो OS releases के बीच बदलता रहता है। ऊपर के दो सेक्शन में बताया गया native setup ही plugin wrap करता है, इसलिए उसे समझना हर हाल में फ़ायदेमंद है।

क्या ऑल्टरनेट आइकन बार-बार बदलकर नकली एनिमेटेड आइकन बनाया जा सकता है?

नहीं। हर बदलाव स्थिर आइकन के बीच एक सोच-समझकर किया गया बदलाव है, playback नहीं, और 2024 का वह डेमो जिसमें आइकन इतनी तेज़ी से बदले गए कि वे एनिमेटेड लगें, यूज़र को दिखने वाले confirmation को छोड़ने के लिए एक private method पर निर्भर था (9to5Mac)। Guideline 2.5.1 सिर्फ़ public APIs की अनुमति देती है। Android पर launcher components को बार-बार on/off करना launcher से टकराएगा और, ऊपर बताई गई रिपोर्टों के अनुसार, ऐप को बंद कर सकता है।

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

ऑल्टरनेट ऐप आइकन के अच्छे इस्तेमाल क्या हैं?

  • निजी पसंद: dark, light या minimal वर्ज़न, या कोई टीम या थीम, जो Apple की HIG एक स्पोर्ट्स ऐप के उदाहरण में बताती है।
  • एक खास सुविधा: सब्सक्राइबर्स के लिए या कोई माइलस्टोन पूरा करने पर अतिरिक्त आइकन।
  • मौसमी वेरिएंट, जिन्हें यूज़र खुद चुने, न कि चुपचाप बदल दिए जाएँ।

हर वेरिएंट में आपका ऐप साफ़ पहचान में आना चाहिए। Apple की HIG ऐसे आइकन से सावधान करती है जिन्हें कोई किसी दूसरे ऐप का समझ ले, और ऑल्टरनेट आइकन भी आपके प्राइमरी आइकन की तरह App Review से गुज़रते हैं।

अक्सर पूछे जाने वाले सवाल

क्या मैं अपने server से नया ऐप आइकन डाउनलोड कर सकता हूँ?

नहीं। iOS पर setAlternateIconName सिर्फ़ वही आइकन स्वीकार करता है जो build के समय app bundle में declare किए गए हों, और Android में activity-alias आइकन आपके APK या bundle के resources होते हैं। नए आइकन के लिए ऐप अपडेट ज़रूरी है।

जब कोई ऐप अपना आइकन बदलता है, तो क्या iOS यूज़र को बताता है?

हाँ। setAlternateIconName से आइकन बदलने पर यूज़र को एक confirmation दिखता है, इसीलिए 2024 के animated-icon demo को इसे skip करने के लिए API को एक private method से call करना पड़ा था। आइकन बदलने को अपनी settings स्क्रीन में यूज़र के साफ़ चुनाव से जोड़ें, और पहले supportsAlternateIcons जाँच लें।

क्या ऑल्टरनेट आइकन dark और tinted मोड सपोर्ट करते हैं?

iOS और iPadOS पर यह ज़रूरी है: Apple की HIG के अनुसार ऑल्टरनेट आइकन के अपने dark, clear और tinted वेरिएंट होने चाहिए। Android पर हर alias को monochrome layer वाला adaptive icon दें, ताकि Android 13 और उसके बाद के वर्ज़न में themed icons काम करें।

इस गाइड से झटपट जवाब

स्रोत

संबंधित गाइड