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

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

पहला डायग्राम. स्प्लैश स्क्रीन.

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

SplashScreen प्लैटफ़ॉर्म एपीआई का इस्तेमाल करने के अलावा, SplashScreen के साथ काम करने वाली लाइब्रेरी का भी इस्तेमाल किया जा सकता है. यह लाइब्रेरी, SplashScreen एपीआई को रैप करती है.

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

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

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

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

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

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

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

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

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

दूसरी इमेज में दिखाए गए इन एलिमेंट पर गौर करें:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • पक्का करें कि ऐनिमेशन वाला आइकॉन इन स्पेसिफ़िकेशन के मुताबिक हो:

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

स्प्लैश स्क्रीन के रिसॉर्स

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

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

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

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

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

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

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

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

  • थीम एट्रिब्यूट सेट करके उनकी थीम बदलें.

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

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

शुरू करें

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

ग्रूवी

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

Kotlin

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

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

अपने ऐप्लिकेशन के लिए स्प्लैश स्क्रीन को पसंद के मुताबिक बनाने के लिए, अपनी 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 का इस्तेमाल करें. इस सेटिंग को सेट करने से, स्प्लैश स्क्रीन दिखने के असल समय पर कोई असर नहीं पड़ता. हालांकि, SplashScreenView.getIconAnimationDuration का इस्तेमाल करके स्प्लैश स्क्रीन के बाहर निकलने के ऐनिमेशन को पसंद के मुताबिक बनाने पर, यह समय वापस पाया जा सकता है. ज़्यादा जानकारी के लिए, स्प्लैश स्क्रीन को लंबे समय तक स्क्रीन पर रखने के बारे में यहां दिया गया सेक्शन देखें.

    <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>
    

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

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

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

Kotlin

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

Java

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

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

Activity.getSplashScreen() की मदद से, स्प्लैश स्क्रीन के ऐनिमेशन को अपनी पसंद के मुताबिक बनाया जा सकता है.

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

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

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

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

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

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

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

Kotlin

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

Java

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

अन्य संसाधन