Android स्प्लैश स्क्रीन एनिमेटेड आइकन: स्पेक्स, XML और हैंडऑफ़

Android स्प्लैश स्क्रीन आइकन के स्पेसिफ़िकेशन क्या हैं?

ये Google के स्प्लैश स्क्रीन डॉक्यूमेंटेशन और androidx SplashScreen रेफ़रेंस से लिए गए हैं (Android Developers):

compat लाइब्रेरी androidx.core:core-splashscreen यही स्प्लैश API 23 से वाले डिवाइस पर लाती है, लेकिन इसका रेफ़रेंस साफ़ कहता है: API 31 से पहले प्लेटफ़ॉर्म का बर्ताव दोहराया जाता है, "Animated Vector Drawable सपोर्ट को छोड़कर" (androidx रेफ़रेंस)। एनिमेटेड drawable को res/drawable-v31 में और स्थिर वर्ज़न को res/drawable में रखें।

XML में एनिमेटेड स्प्लैश आइकन कैसे सेट करें?

आपको तीन चीज़ें चाहिए: AVD, एक starting theme, और आपकी launcher activity में एक call। यहाँ एक मिनिमल AVD है जो overshoot के साथ एक shape को पॉप-इन करता है (path को अपने आइकन के vector paths से बदलें, और उन्हें बीच के 288 dp के अंदर रखें):

<!-- res/drawable-v31/splash_icon.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
  <aapt:attr name="android:drawable">
    <vector android:width="432dp" android:height="432dp"
        android:viewportWidth="432" android:viewportHeight="432">
      <group android:name="icon" android:pivotX="216" android:pivotY="216">
        <path android:fillColor="#FFFFFF"
            android:pathData="M216,136a80,80 0 1,1 0,160a80,80 0 1,1 0,-160z" />
      </group>
    </vector>
  </aapt:attr>
  <target android:name="icon">
    <aapt:attr name="android:animation">
      <set>
        <objectAnimator android:propertyName="scaleX" android:duration="600"
            android:valueFrom="0.6" android:valueTo="1"
            android:interpolator="@android:interpolator/overshoot" />
        <objectAnimator android:propertyName="scaleY" android:duration="600"
            android:valueFrom="0.6" android:valueTo="1"
            android:interpolator="@android:interpolator/overshoot" />
      </set>
    </aapt:attr>
  </target>
</animated-vector>

compat library के साथ starting theme:

<!-- res/values/themes.xml -->
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
  <item name="windowSplashScreenBackground">@color/brand_background</item>
  <item name="windowSplashScreenAnimatedIcon">@drawable/splash_icon</item>
  <item name="windowSplashScreenAnimationDuration">600</item>
  <item name="postSplashScreenTheme">@style/Theme.App</item>
</style>

<!-- res/values-v33/themes.xml: same style, plus -->
<item name="android:windowSplashScreenBehavior">icon_preferred</item>

manifest में application या launcher activity पर android:theme="@style/Theme.App.Starting" सेट करें, फिर super.onCreate() से पहले installSplashScreen() call करें, जैसा Google की migration गाइड में दिखाया गया है (Android Developers)।

icon_preferred इसलिए मौजूद है क्योंकि Android 13 और उसके बाद, डिफ़ॉल्ट रूप से सिस्टम activity के launch होने के तरीके के आधार पर splash को बिना आइकन के दिखा सकता है। Google के अनुसार, अगर आप कभी खाली splash नहीं चाहते और हमेशा एनिमेटेड आइकन दिखाना चाहते हैं, तो इसे सेट करें।

स्प्लैश आइकन कितनी देर एनिमेट हो, यह कैसे कंट्रोल करें?

दो अलग बातें आसानी से आपस में मिल जाती हैं: आइकन कितनी देर एनिमेट होता है, और splash कितनी देर स्क्रीन पर रहती है।

• Android 12 (API 31 या 32 को target करने वाले ऐप): windowSplashScreenAnimationDuration सेट करें ताकि starting window दिखने के दौरान एनिमेशन चले। Google के अनुसार Android 13 पर यह ज़रूरी नहीं है, क्योंकि अवधि सीधे AnimatedVectorDrawable से पता चल जाती है।
• यह attribute splash को कभी लंबा नहीं करता। Google की गाइड और androidx reference दोनों कहते हैं कि splash कितनी देर दिखती है, इस पर इसका कोई असर नहीं होता; compat library में यह केवल SplashScreenViewProvider.iconAnimationDurationMillis को वैल्यू देता है।
• loading के दौरान splash को बनाए रखने के लिए, splashScreen.setKeepOnScreenCondition { !viewModel.isReady } इस्तेमाल करें। यह condition हर draw से पहले चेक होती है, इसलिए इसे हल्का रखें।

आइकन एनिमेशन के लिए 1,000 ms की सिफ़ारिश के अंदर ही रहें। अगर आपका ऐप अक्सर इससे धीमे शुरू होता है, तो एक ही मोशन को खींचने के बजाय AVD को ऐसे डिज़ाइन करें कि उसकी आखिरी स्टेट शांति से लूप हो सके या रुकी रहे। और अगर ऐप 300 ms में तैयार है, तो splash को जाने दें: कोई भी आपका ऐप उसे देखने के लिए नहीं खोलता।

splash में Lottie, GIF या PNG sequence क्यों नहीं डाल सकते?

क्योंकि सिस्टम splash को आपकी theme से starting window के रूप में बनाता है, आपकी activity के कुछ भी draw करने से पहले, और वहाँ वह केवल एक ही एनिमेटेड drawable सपोर्ट करता है: windowSplashScreenAnimatedIcon में दिया गया AnimatedVectorDrawable XML. Lottie file के लिए आपकी process में Lottie library का चलना ज़रूरी है, GIF के लिए decoder और view चाहिए, और PNG sequence बस bitmaps की एक list है। इनमें से किसी को भी theme attribute से reference नहीं किया जा सकता।

इससे यह भी पता चलता है कि AVD क्या अच्छे से कर सकता है और क्या नहीं। यह vector paths, groups और उनकी properties (rotation, scale, translation, path morphing, alpha) को एनिमेट करता है। एक flat, geometric लोगो आसानी से AVD में बदला जा सकता है। एक डिटेल वाला कैरेक्टर, ज़्यादा gradient वाला या 3D आइकन, या कोई भी raster चीज़ ठीक से नहीं बदलती, और ज़बरदस्ती करने का मतलब आमतौर पर आर्टवर्क को सरल बनाना होता है।

व्यावहारिक बँटवारा: सिस्टम splash को सरल रखें (एक स्थिर आइकन, या छोटा AVD pop-in), और रिच एनिमेशन अपने ऐप में चलाएँ, जहाँ Lottie, Rive और वीडियो सभी काम करते हैं। विकल्पों की तुलना स्प्लैश स्क्रीन के लिए Lottie बनाम Rive बनाम वीडियो में देखें।

splash से पूरे intro पर handoff कैसे करें?

एक exit listener रजिस्टर करें। इसके सेट होते ही splash अपने आप नहीं हटती, और जब आपका अपना exit एनिमेशन खत्म हो, तब आप remove() call करते हैं (androidx reference):

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        val splash = installSplashScreen()
        super.onCreate(savedInstanceState)

        splash.setOnExitAnimationListener { provider ->
            provider.view.animate()
                .alpha(0f)
                .setDuration(200L)
                .withEndAction { provider.remove() }
                .start()
        }
        setContentView(R.layout.activity_intro)  // first screen plays the intro
    }
}

पहली स्क्रीन उसी बैकग्राउंड कलर पर होती है, आइकन उसी साइज़ और उसी केंद्र में, इसलिए fade के बाद वही आइकन दिखता लगता है, जो फिर अपना पूरा intro शुरू करता है। Rive file के साथ, legacy view सीधे XML से एक launch स्टेट मशीन चला सकता है:

<app.rive.runtime.kotlin.RiveAnimationView
    android:id="@+id/intro"
    android:layout_width="240dp"
    android:layout_height="240dp"
    android:layout_gravity="center"
    app:riveResource="@raw/launch"
    app:riveStateMachine="LaunchStateMachine" />

फिर आगे बढ़ने से पहले intro की अवधि तक रुकें। Charmotion का LaunchStateMachine 2.6 सेकंड का intro एक बार चलाता है, रुके हुए आइकन पर खत्म होता है और कोई end event फ़ायर नहीं करता, इसलिए callback का इंतज़ार करने के बजाय अगला स्टेप timer से शेड्यूल करें (उदाहरण के लिए intro.postDelayed({ showHome() }, 2600)). Rive के Android docs में Rive.init(context) के साथ setup बताया गया है (Rive)।

Charmotion AnimatedVectorDrawable एक्सपोर्ट नहीं करता। इसकी फ़ाइलें इस handoff का ऐप के अंदर वाला हिस्सा संभालती हैं (.riv, ट्रांसपेरेंट WebM और HEVC MOV, MP4); सिस्टम splash का AVD आपको vector रूप में बनाना होगा या उसे स्थिर आइकन रखना होगा।

Android splash icons में सबसे ज़्यादा क्या गड़बड़ होती है?

• कटा हुआ आर्टवर्क। अंदर के दो-तिहाई circle से बाहर का content mask हो जाता है। एनिमेटेड आइकन के लिए 432 dp canvas के 288 dp के अंदर डिज़ाइन करें, या स्थिर आइकन के लिए 288 dp के 192 dp के अंदर।
• पुराने versions पर adaptive icon को splash icon के रूप में दोबारा इस्तेमाल करना। androidx reference चेतावनी देता है कि API 31 से पहले windowSplashScreenAnimatedIcon में adaptive icon crop और scale हो जाता है; इसके बजाय foreground layer और icon background color इस्तेमाल करने का सुझाव दिया गया है।
• Android 12 से नीचे एनिमेशन की उम्मीद करना। compat library वहाँ आइकन को स्थिर दिखाती है। एनिमेटेड drawable केवल drawable-v31 में रखें।
• super.onCreate() के बाद installSplashScreen() या postSplashScreenTheme का न होना, जिससे activity splash theme पर ही रह जाती है।
• startup से ज़्यादा देर चलने वाला एनिमेशन। लगभग एक सेकंड के बाद users को लगने लगता है कि वे बस एक लोगो का इंतज़ार कर रहे हैं। AVD को छोटा रखें और personality दिखाने का काम ऐप के अंदर के intro को करने दें।

iOS सहित cross-platform जानकारी के लिए ऐप लॉन्च और स्प्लैश स्क्रीन एनिमेशन देखें।

Android स्प्लैश स्क्रीन में एनिमेटेड आइकन कैसे जोड़ें

1. AVD बनाएँ. 432 dp canvas पर एक AnimatedVectorDrawable बनाएँ, जिसका दिखने वाला content बीच के 288 dp के अंदर हो और जो लगभग 1,000 ms से ज़्यादा एनिमेट न हो।
2. API level के अनुसार बाँटें. एनिमेटेड drawable को res/drawable-v31 में रखें और पुराने devices के लिए स्थिर version res/drawable में रखें।
3. starting theme बनाएँ. Theme.SplashScreen को extend करें, windowSplashScreenBackground, windowSplashScreenAnimatedIcon, windowSplashScreenAnimationDuration और postSplashScreenTheme सेट करें, और values-v33 में icon_preferred जोड़ें।
4. इसे install करें. manifest में theme लागू करें और super.onCreate() से पहले installSplashScreen() call करें।
5. handoff करें. splash को fade out करने के लिए setOnExitAnimationListener इस्तेमाल करें, फिर उसी बैकग्राउंड वाली पहली स्क्रीन पर पूरा intro चलाएँ, और ऐप दिखाने से पहले उसकी अवधि तक रुकें।

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

क्या मैं Android splash icon के रूप में Lottie file इस्तेमाल कर सकता हूँ?

नहीं। splash icon एक theme attribute से आता है, और उसका एनिमेटेड रूप AnimatedVectorDrawable ही होना चाहिए। Lottie के लिए उसकी library का आपके ऐप में चलना ज़रूरी है, इसलिए Lottie एनिमेशन को splash हटने के बाद अपनी पहली स्क्रीन पर, उसी बैकग्राउंड कलर पर चलाएँ।

क्या windowSplashScreenAnimationDuration splash को स्क्रीन पर ज़्यादा देर रखता है?

नहीं। Google के documentation के अनुसार splash screen कितनी देर दिखती है, इस पर इसका कोई असर नहीं होता। यह Android 12 को बताता है कि आइकन एनिमेशन कितनी देर चलाना है। ऐप loading के दौरान splash को रोके रखने के लिए setKeepOnScreenCondition इस्तेमाल करें।

क्या Android स्प्लैश स्क्रीन पर branding image दिखाई जा सकती है?

हाँ। बीच वाले आइकन के अलावा, स्प्लैश स्क्रीन नीचे एक वैकल्पिक branding image दिखा सकती है, जिसका साइज़ Google के documentation के अनुसार 200×80 dp है। इसे सरल रखें, क्योंकि यह उसी एक बैकग्राउंड कलर पर होती है और हर cold start पर दिखती है।

icon_preferred क्या करता है?

Android 13 और उसके बाद, android:windowSplashScreenBehavior को icon_preferred पर सेट करने से सिस्टम splash पर हमेशा आपका आइकन दिखाता है, बजाय इसके कि activity के launch होने के तरीके के आधार पर कभी-कभी खाली splash दिखाए।

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

• Android splash icon एनिमेशन कितनी देर चल सकता है?
• एनिमेटेड Android splash icon कितना बड़ा होता है?
• क्या एनिमेटेड Android splash icon Android 12 से पहले काम करता है?

स्रोत

• Splash screens, Android Developers
• Migrate your splash screen implementation to Android 12 and later, Android Developers
• SplashScreen (androidx.core:core-splashscreen), Android Developers
• AnimatedVectorDrawable, Android Developers
• Adaptive icons, Android Developers
• Android runtime, Rive