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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• पक्का करें कि ऐनिमेटेड आइकॉन, इन ज़रूरी शर्तों के मुताबिक हो:

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

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

स्प्लैश स्क्रीन के संसाधन

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

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

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

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

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

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

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

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

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

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

शुरू करें

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

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

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. You can use 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 से पहले खत्म होने पर.

// 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
                }
            }
        }
    )
}

// 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().

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()
    }
}

@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 का इस्तेमाल करें. आइकॉन के ऐनिमेशन की बाकी अवधि को इस तरह कैलकुलेट किया जा सकता है:

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

// 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;
}

अन्य संसाधन

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