स्प्लैश स्क्रीन

अहम जानकारी: अगर आपने Android 11 या इससे पहले के वर्शन में कस्टम स्प्लैश स्क्रीन लागू की है, तो अपने ऐप्लिकेशन को SplashScreen कंपैट लाइब्रेरी पर माइग्रेट करें. इससे यह पक्का किया जा सकेगा कि वह Android 12 और इसके बाद के वर्शन में सही तरीके से दिखे. निर्देशों के लिए, स्प्लैश स्क्रीन को लागू करने के मौजूदा तरीके को Android 12 पर माइग्रेट करना लेख पढ़ें.

Android 12 से, ऐप्लिकेशन सिस्टम की स्प्लैश स्क्रीन के साथ लॉन्च होते हैं. इसमें लॉन्च के समय ऐप्लिकेशन में होने वाला मोशन, आपके ऐप्लिकेशन का आइकॉन दिखाने वाली स्प्लैश स्क्रीन, और आपके ऐप्लिकेशन पर ट्रांज़िशन शामिल होता है. स्प्लैश स्क्रीन एक Window है. इसलिए, यह Activity को कवर करती है.

पहली इमेज. एक स्प्लैश स्क्रीन.

स्प्लैश स्क्रीन की सुविधा, हर ऐप्लिकेशन के लॉन्च के लिए स्टैंडर्ड डिज़ाइन एलिमेंट उपलब्ध कराती है. हालांकि, इसे पसंद के मुताबिक भी बनाया जा सकता है, ताकि आपके ऐप्लिकेशन की ब्रैंडिंग यूनीक बनी रहे.

अपने ऐप्लिकेशन की स्प्लैश स्क्रीन को पसंद के मुताबिक बनाने के लिए, Jetpack SplashScreen कंपैट लाइब्रेरी का इस्तेमाल करें. यह प्लैटफ़ॉर्म SplashScreen एपीआई को रैप करता है और किसी भी ComponentActivity के साथ काम करता है. इसमें ऐसी गतिविधियां भी शामिल हैं जो setContent का इस्तेमाल करके, Compose के साथ अपना यूज़र इंटरफ़ेस (यूआई) सेट करती हैं.

स्प्लैश स्क्रीन कैसे काम करती है

जब कोई उपयोगकर्ता किसी ऐप्लिकेशन को तब लॉन्च करता है, जब ऐप्लिकेशन की प्रोसेस नहीं चल रही होती (कोल्ड स्टार्ट) या Activity नहीं बनाया जाता (वॉर्म स्टार्ट), तो ये इवेंट होते हैं:

1. सिस्टम, आपकी तय की गई थीम और ऐनिमेशन का इस्तेमाल करके स्प्लैश स्क्रीन दिखाता है.

2. ऐप्लिकेशन के तैयार होने पर, स्प्लैश स्क्रीन हट जाती है और ऐप्लिकेशन दिखने लगता है.

हॉट स्टार्ट के दौरान, स्प्लैश स्क्रीन कभी नहीं दिखती.

स्प्लैश स्क्रीन के एलिमेंट और मैकेनिक्स

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

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

दूसरी इमेज. स्प्लैश स्क्रीन के ऐसे एलिमेंट जिन्हें पसंद के मुताबिक बनाया जा सकता है.

इमेज 2 में दिखाए गए इन एलिमेंट पर ध्यान दें:

1 ऐप्लिकेशन का आइकॉन, ड्रॉ करने लायक वेक्टर होना चाहिए. यह स्टैटिक या ऐनिमेटेड हो सकता है. हालांकि, ऐनिमेशन की अवधि अनलिमिटेड हो सकती है, लेकिन हमारा सुझाव है कि यह 1,000 मिलीसेकंड से ज़्यादा न हो. लॉन्चर आइकॉन डिफ़ॉल्ट होता है.

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

3 अडैप्टिव आइकॉन की तरह ही, फ़ोरग्राउंड का एक तिहाई हिस्सा मास्क किया जाता है.

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

स्प्लैश स्क्रीन के डाइमेंशन

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

• ब्रैंड इमेज: यह 200×80 डीपी होनी चाहिए.
• आइकॉन के बैकग्राउंड के साथ ऐप्लिकेशन का आइकॉन: यह 240×240 डीपी का होना चाहिए और 160 डीपी व्यास वाले सर्कल में फ़िट होना चाहिए.
• बिना आइकॉन बैकग्राउंड वाला ऐप्लिकेशन का आइकॉन: यह 288×288 डीपी का होना चाहिए और 192 डीपी व्यास वाले सर्कल में फ़िट होना चाहिए.

उदाहरण के लिए, अगर किसी इमेज का पूरा साइज़ 300×300 डीपी है, तो आइकॉन को 200 डीपी के व्यास वाले सर्कल में फ़िट होना चाहिए. सर्कल के बाहर मौजूद हर चीज़ छिप जाती है (मास्क हो जाती है).

तीसरी इमेज. सॉलिड और पारदर्शी बैकग्राउंड के लिए, स्प्लैश स्क्रीन आइकॉन के डाइमेंशन.

स्प्लैश स्क्रीन के ऐनिमेशन और लॉन्च सीक्वेंस

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

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

चौथी इमेज. लॉन्च का क्रम.

1. एंटर ऐनिमेशन: इसमें सिस्टम व्यू से लेकर स्प्लैश स्क्रीन तक शामिल है. इसे सिस्टम कंट्रोल करता है और इसमें बदलाव नहीं किया जा सकता.

2. स्प्लैश स्क्रीन (सीक्वेंस के "इंतज़ार" वाले हिस्से के दौरान दिखाई जाती है): स्प्लैश स्क्रीन को पसंद के मुताबिक बनाया जा सकता है. इससे आपको अपना लोगो ऐनिमेशन और ब्रैंडिंग जोड़ने की सुविधा मिलती है. यह ज़रूरी है कि यह इस पेज पर बताई गई ज़रूरी शर्तों को पूरा करे, ताकि यह सही तरीके से काम कर सके.

3. एग्ज़िट ऐनिमेशन: इसमें वह ऐनिमेशन शामिल होता है जो स्प्लैश स्क्रीन को छिपाता है. अगर आपको इसे पसंद के मुताबिक बनाना है, तो SplashScreenViewProvider व्यू और इसके आइकॉन का इस्तेमाल करें. इन पर कोई भी ऐनिमेशन चलाया जा सकता है. इसके लिए, ट्रांसफ़ॉर्म, ओपैसिटी, और कलर की सेटिंग का इस्तेमाल करें. इस मामले में, ऐनिमेशन पूरा होने पर स्प्लैश स्क्रीन को मैन्युअल तरीके से हटाएं.

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

स्प्लैश स्क्रीन के ऐनिमेशन से जुड़ी ज़रूरी शर्तें

आपकी स्प्लैश स्क्रीन इन शर्तों के मुताबिक होनी चाहिए:

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

• पक्का करें कि ऐनिमेटेड आइकॉन इन शर्तों को पूरा करता हो:

  • फ़ॉर्मैट: आइकॉन, AnimatedVectorDrawable (AVD) एक्सएमएल फ़ॉर्मैट में होना चाहिए.
  • डाइमेंशन: एवीडी आइकॉन का साइज़, अडैप्टिव आइकॉन के साइज़ से चार गुना होना चाहिए. जैसे:
    • आइकॉन का साइज़ 432 डीपी होना चाहिए. दूसरे शब्दों में, यह मास्क नहीं किए गए अडैप्टिव आइकॉन के 108 डीपी साइज़ से चार गुना होना चाहिए.
    • इमेज का अंदरूनी दो-तिहाई हिस्सा, लॉन्चर आइकॉन पर दिखता है. यह 288 डीपी होना चाहिए. दूसरे शब्दों में, यह 72 डीपी का चार गुना होना चाहिए, जो अडैप्टिव आइकॉन के अंदरूनी मास्क किए गए हिस्से को बनाता है.
  • अवधि: हमारा सुझाव है कि फ़ोन पर यह अवधि 1,000 मि॰से॰ से ज़्यादा न हो. देरी से शुरू होने वाले ऐनिमेशन का इस्तेमाल किया जा सकता है. हालांकि, यह 166 मि॰से॰ से ज़्यादा नहीं होना चाहिए. अगर ऐप्लिकेशन के स्टार्टअप का समय 1,000 मि॰से॰ से ज़्यादा है, तो लूपिंग ऐनिमेशन का इस्तेमाल करें.

• स्प्लैश स्क्रीन को हटाने के लिए सही समय तय करें. ऐसा तब होता है, जब आपका ऐप्लिकेशन अपना पहला फ़्रेम दिखाता है. स्प्लैश स्क्रीन को ज़्यादा समय तक स्क्रीन पर बनाए रखने के बारे में सेक्शन में बताए गए तरीके से, इसे अपनी पसंद के मुताबिक बनाया जा सकता है.

स्प्लैश स्क्रीन से जुड़े संसाधन

पांचवीं इमेज. एवीडी का उदाहरण.

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

• ऐनिमेशन की Adobe After Effects प्रोजेक्ट फ़ाइल.
• एक्सपोर्ट की गई फ़ाइनल एवीडी एक्सएमएल फ़ाइल.
• ऐनिमेशन का उदाहरण दिखाने वाला GIF.

इन फ़ाइलों को डाउनलोड करने का मतलब है कि आप Google की सेवा की शर्तों से सहमत हैं.

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

अपने ऐप्लिकेशन में स्प्लैश स्क्रीन को पसंद के मुताबिक बनाना

अगर windowBackground आपकी थीम में windowBackground के लिए एक ही रंग का इस्तेमाल किया गया है, तो डिफ़ॉल्ट रूप से SplashScreen में भी उसी रंग का इस्तेमाल किया जाता है. स्प्लैश स्क्रीन को पसंद के मुताबिक बनाने के लिए, ऐप्लिकेशन की थीम में एट्रिब्यूट जोड़ें.

अपने ऐप्लिकेशन की स्प्लैश स्क्रीन को पसंद के मुताबिक बनाने के लिए, इनमें से कोई भी तरीका अपनाएं:

• थीम के एट्रिब्यूट सेट करें, ताकि उसका लुक बदला जा सके.

• इसे ज़्यादा समय तक स्क्रीन पर रखें.

• स्प्लैश स्क्रीन को खारिज करने के लिए, ऐनिमेशन को पसंद के मुताबिक बनाएं.

शुरू करें

SplashScreen की कोर लाइब्रेरी, एपीआई 23 से लेकर सभी डिवाइसों पर Android 12 की स्प्लैश स्क्रीन उपलब्ध कराती है. इसे अपने प्रोजेक्ट में जोड़ने के लिए, अपनी build.gradle फ़ाइल में यह स्निपेट जोड़ें:

Groovy

dependencies {
    implementation "androidx.core:core-splashscreen:1.2.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.2.0")
}

इसके बाद, स्प्लैश स्क्रीन की ऐसी थीम बनाएं जो Theme.SplashScreen से इनहेरिट की गई हो. साथ ही, postSplashScreenTheme को उस थीम पर सेट करें जिसका इस्तेमाल ऐक्टिविटी बाद में करती है. इसके बाद, अपने मेनिफ़ेस्ट में स्प्लैश स्क्रीन की थीम लागू करें (स्प्लैश स्क्रीन के मौजूदा सेटअप को Android 12 पर माइग्रेट करना देखें). इसके बाद, super.onCreate() को कॉल करने से पहले, अपनी शुरुआती ऐक्टिविटी में installSplashScreen() को कॉल करें. इसके बारे में, यहां दिए गए सेक्शन में उदाहरणों के साथ बताया गया है.

स्प्लैश स्क्रीन का लुक बदलने के लिए, कोई थीम सेट करें

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

1. बैकग्राउंड को किसी एक रंग से भरने के लिए, windowSplashScreenBackground का इस्तेमाल करें:

   <item name="android:windowSplashScreenBackground">@color/...</item>
   

2. शुरुआती विंडो के बीच में मौजूद आइकॉन को बदलने के लिए, windowSplashScreenAnimatedIcon का इस्तेमाल करें.

   सिर्फ़ Android 12 (एपीआई लेवल 32) को टारगेट करने वाले ऐप्लिकेशन के लिए, यह तरीका अपनाएं:

   अगर ऑब्जेक्ट को AnimationDrawable और AnimatedVectorDrawable की मदद से ऐनिमेट और ड्रॉ किया जा सकता है, तो शुरुआती विंडो दिखाते समय ऐनिमेशन चलाने के लिए, windowSplashScreenAnimationDuration को सेट करें. Android 13 के लिए इसकी ज़रूरत नहीं है, क्योंकि अवधि का पता सीधे AnimatedVectorDrawable से चलता है.

   <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
   

3. स्प्लैश स्क्रीन के आइकॉन के ऐनिमेशन की अवधि बताने के लिए, windowSplashScreenAnimationDuration का इस्तेमाल करें. इस सेटिंग को सेट करने से, स्प्लैश स्क्रीन दिखने के असल समय पर कोई असर नहीं पड़ता. हालांकि, SplashScreenViewProvider.iconAnimationDurationMillis का इस्तेमाल करके, स्प्लैश स्क्रीन के एग्ज़िट ऐनिमेशन को पसंद के मुताबिक बनाते समय, इसे वापस लाया जा सकता है. ज़्यादा जानकारी के लिए, स्प्लैश स्क्रीन को ज़्यादा समय तक स्क्रीन पर बनाए रखने के बारे में यहां दिया गया सेक्शन देखें.

   <item name="android:windowSplashScreenAnimationDuration">1000</item>
   

4. स्प्लैश स्क्रीन आइकॉन के पीछे बैकग्राउंड सेट करने के लिए, windowSplashScreenIconBackgroundColor का इस्तेमाल करें. यह तब काम आता है, जब विंडो के बैकग्राउंड और आइकॉन के बीच का कंट्रास्ट कम हो.

   <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
   

5. windowSplashScreenBrandingImage का इस्तेमाल करके, स्प्लैश स्क्रीन पर सबसे नीचे दिखाई जाने वाली इमेज सेट की जा सकती है. हालांकि, डिज़ाइन से जुड़े दिशा-निर्देशों में ब्रैंडिंग इमेज का इस्तेमाल न करने का सुझाव दिया गया है.

   <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
   

6. windowSplashScreenBehavior का इस्तेमाल करके यह तय किया जा सकता है कि Android 13 और इसके बाद के वर्शन में, आपका ऐप्लिकेशन स्प्लैश स्क्रीन पर हमेशा आइकॉन दिखाए या नहीं. डिफ़ॉल्ट वैल्यू 0 होती है. इससे स्प्लैश स्क्रीन पर आइकॉन दिखता है. ऐसा तब होता है, जब लॉन्चिंग गतिविधि splashScreenStyle को SPLASH_SCREEN_STYLE_ICON पर सेट करती है. इसके अलावा, अगर लॉन्चिंग गतिविधि कोई स्टाइल तय नहीं करती है, तो सिस्टम के व्यवहार का पालन किया जाता है. अगर आपको कभी भी खाली स्प्लैश स्क्रीन नहीं दिखानी है और हमेशा ऐनिमेशन वाला आइकॉन दिखाना है, तो इसे icon_preferred वैल्यू पर सेट करें.

   <item name="android:windowSplashScreenBehavior">icon_preferred</item>
   

स्प्लैश स्क्रीन को ज़्यादा समय तक स्क्रीन पर रखना

जैसे ही आपका ऐप्लिकेशन अपना पहला फ़्रेम दिखाता है, स्प्लैश स्क्रीन हट जाती है. अगर आपको कम डेटा लोड करना है, जैसे कि लोकल डिस्क से एसिंक्रोनस तरीके से इन-ऐप्लिकेशन सेटिंग लोड करना, तो setKeepOnScreenCondition का इस्तेमाल करें. इससे डेटा लोड होने तक, स्प्लैश स्क्रीन को स्क्रीन पर बनाए रखा जा सकता है. हर फ़्रेम को ड्रॉ करने से पहले, शर्त का आकलन किया जाता है. इसलिए, इसे तेज़ी से पूरा करें, ताकि यूज़र इंटरफ़ेस (यूआई) ब्लॉक न हो.

अगर आपकी शुरुआती गतिविधि, ड्रॉइंग से पहले खत्म हो जाती है, तो आपको कोई शर्त सेट करने की ज़रूरत नहीं है. उदाहरण के लिए, कॉन्टेंट व्यू सेट न करने और onResume से पहले खत्म होने पर.

override fun onCreate(savedInstanceState: Bundle?) {
    // Install the splash screen before calling super.onCreate().
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Keep the splash screen on-screen until the initial data is ready.
    // The condition is checked each time the app is about to draw a frame.
    splashScreen.setKeepOnScreenCondition { !viewModel.isReady.value }

    setContent {
        MyApp()
    }
}
SplashScreenSnippets.kt

स्प्लैश स्क्रीन को खारिज करने के लिए, ऐनिमेशन को पसंद के मुताबिक बनाएं

setOnExitAnimationListener की मदद से, स्प्लैश स्क्रीन के ऐनिमेशन को अपनी पसंद के मुताबिक बनाया जा सकता है. लिसनर को एक SplashScreenViewProvider मिलता है, जो आपको ऐनिमेट करने के लिए स्प्लैश स्क्रीन व्यू देता है. ऐनिमेशन खत्म होने पर, remove() को कॉल करें.

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenViewProvider ->
        val splashScreenView = splashScreenViewProvider.view
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenViewProvider.remove at the end of your custom
        // animation.
        slideUp.doOnEnd { splashScreenViewProvider.remove() }

        // Run your animation.
        slideUp.start()
    }

    setContent {
        MyApp()
    }
}
SplashScreenSnippets.kt

इस कॉलबैक के शुरू होने पर, स्प्लैश स्क्रीन पर ऐनिमेटेड वेक्टर ड्रॉएबल शुरू हो जाता है. ऐप्लिकेशन लॉन्च होने में लगने वाले समय के आधार पर, ड्रॉएबल अपने ऐनिमेशन के बीच में हो सकता है. ऐनिमेशन शुरू होने का समय जानने के लिए, SplashScreenViewProvider.iconAnimationStartMillis का इस्तेमाल करें. आइकॉन के ऐनिमेशन की बची हुई अवधि को इस तरह कैलकुलेट किया जा सकता है:

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenViewProvider.iconAnimationDurationMillis
// Get the start time of the animation, in milliseconds since the epoch.
val animationStart = splashScreenViewProvider.iconAnimationStartMillis
// Calculate the remaining duration of the animation.
val remainingDuration =
    (animationDuration - (System.currentTimeMillis() - animationStart))
        .coerceAtLeast(0L)
SplashScreenSnippets.kt

अन्य संसाधन

• स्प्लैश स्क्रीन के मौजूदा सेटअप को Android 12 और उसके बाद के वर्शन पर माइग्रेट करना
• Now in Android ऐप्लिकेशन में, स्प्लैश स्क्रीन को असल में लागू करने का तरीका दिखाया गया है