अनुमानित बैक ऐनिमेशन के लिए सहायता जोड़ें

सिस्टम बैक एपीआई का इस्तेमाल करते समय, ऐप्लिकेशन में ऐनिमेशन पाने और कस्टम ट्रांज़िशन की सुविधा का इस्तेमाल करने का विकल्प चुना जा सकता है.

पहला वीडियो: पीछे जाने पर झलक दिखाने वाला ऐनिमेशन

इस सुविधा का इस्तेमाल करने पर, आपको होम पेज पर वापस जाने, ऐप्लिकेशन में मौजूद अलग-अलग गतिविधि देखने, और अलग-अलग ऐप्लिकेशन पर काम करने से जुड़े ऐनिमेशन दिखते हैं.

मटीरियल कॉम्पोनेंट के ऐनिमेशन पाने के लिए, मटीरियल कॉम्पोनेंट की डिपेंडेंसी को MDC Android के v1.10.0 पर अपग्रेड किया जा सकता है. जैसे:

• बॉटम शीट
• साइड शीट
• खोजें

ज़्यादा जानकारी के लिए, GitHub पर मटेरियल कॉम्पोनेंट डेवलपर गाइडेंस देखें.

इस वीडियो में, Android Settings ऐप्लिकेशन का इस्तेमाल करके, पीछे जाने पर झलक दिखाने वाले ऐनिमेशन का एक छोटा उदाहरण दिखाया गया है. इसमें होम पेज पर वापस जाने और ऐप्लिकेशन में मौजूद अलग-अलग गतिविधि का ऐनिमेशन दिखाया गया है.

1. ऐनिमेशन में, उपयोगकर्ता पिछली सेटिंग वाली स्क्रीन पर वापस जाने के लिए, पीछे की ओर स्वाइप करता है. यह अलग-अलग गतिविधि वाले ऐनिमेशन का एक उदाहरण है.
2. अब पिछली स्क्रीन पर, उपयोगकर्ता फिर से स्वाइप करना शुरू करता है. इससे उसे होम स्क्रीन के वॉलपेपर की झलक दिखती है. यह होम पेज पर वापस जाने वाले ऐनिमेशन का एक उदाहरण है.
3. उपयोगकर्ता दाईं ओर स्वाइप करता रहता है. इससे, विंडो के छोटे होकर होम स्क्रीन पर मौजूद आइकॉन में बदलने का ऐनिमेशन दिखता है.
4. उपयोगकर्ता अब पूरी तरह से होम स्क्रीन पर वापस आ गया है.

पीछे जाने पर झलक दिखाने की सुविधा जोड़ने के तरीके के बारे में ज़्यादा जानें.

इन-ऐप्लिकेशन ट्रांज़िशन और ऐनिमेशन को पसंद के मुताबिक जोड़ना

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

Progress API का इस्तेमाल करके कस्टम ट्रांज़िशन जोड़ना

AndroidX Activity 1.8.0-alpha01 या इसके बाद के वर्शन में, Predictive Back Progress API का इस्तेमाल किया जा सकता है. इससे, ऐप्लिकेशन में 'वापस जाने के लिए अनुमानित जेस्चर' के लिए कस्टम ऐनिमेशन बनाए जा सकते हैं. Progress API, व्यू को ऐनिमेट करने में मददगार होते हैं. हालांकि, फ़्रैगमेंट के बीच ट्रांज़िशन को ऐनिमेट करने में इनकी सीमाएं होती हैं. हमने OnBackPressedCallback में handleOnBackProgressed, handleOnBackCancelled, और handleOnBackStarted तरीके जोड़े हैं. इनकी मदद से, उपयोगकर्ता के स्वाइप बैक करने के दौरान ऑब्जेक्ट को ऐनिमेट किया जा सकता है. अगर आपको सिस्टम या Material कॉम्पोनेंट के डिफ़ॉल्ट ऐनिमेशन से ज़्यादा बदलाव करने हैं, तो इन तरीकों का इस्तेमाल करें.

हमारा मानना है कि ज़्यादातर ऐप्लिकेशन, पुराने सिस्टम के साथ काम करने वाले AndroidX API का इस्तेमाल करेंगे. हालांकि, OnBackAnimationCallback इंटरफ़ेस में भी इसी तरह के प्लैटफ़ॉर्म एपीआई उपलब्ध हैं. इन्हें Android 14 Developer Preview 1 और इसके बाद के वर्शन में टेस्ट किया जा सकता है.

ध्यान दें: ऐप्लिकेशन में दिखने वाले कस्टम ट्रांज़िशन और ऐनिमेशन डिज़ाइन करने का तरीका जानें.

AndroidX ट्रांज़िशन के साथ Progress API का इस्तेमाल करना

प्रोग्रेस एपीआई का इस्तेमाल, Android 14 और इसके बाद के वर्शन पर AndroidX Transitions 1.5.0-alpha01 या इसके बाद के वर्शन के साथ किया जा सकता है. इससे, पीछे जाने पर झलक दिखाने वाले ट्रांज़िशन बनाए जा सकते हैं.

1. जब उपयोगकर्ता वापस स्वाइप करता है, तब ट्रांज़िशन चलाने के लिए beginDelayedTransition के बजाय TransitionManager#controlDelayedTransition का इस्तेमाल करें.
2. handleOnBackStarted में ट्रांज़िशन बनाएं.
3. handleOnBackProgressed में, बैक इवेंट के साथ ट्रांज़िशन चलाएं. इसके लिए, currentFraction को BackEvent.progress से जोड़ें. इससे पता चलता है कि उपयोगकर्ता ने कितनी बार स्वाइप किया है.
4. उपयोगकर्ता के handleOnBackPressed में वापस जाने के लिए जेस्चर करने के बाद, ट्रांज़िशन पूरा करें.
5. आखिर में, handleOnBackCancelled में ट्रांज़िशन की स्थिति को रीसेट करें.

यहां दिए गए वीडियो, Kotlin कोड, और एक्सएमएल में, OnBackPressedCallback का इस्तेमाल करके बनाए गए दो बॉक्स के बीच कस्टम ट्रांज़िशन दिखाया गया है:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  

<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

पीछे जाने पर झलक दिखाने वाले ट्रांज़िशन के साथ काम करते समय, इन बातों का ध्यान रखें:

• isSeekingSupported का इस्तेमाल करके देखें कि ट्रांज़िशन में, पीछे जाने की झलक दिखाने वाली सुविधा काम करती है या नहीं.
• कस्टम ट्रांज़िशन में, सही वैल्यू दिखाने के लिए isSeekingSupported को बदलें.
• हर ऐनिमेशन के लिए एक कंट्रोलर बनाएं.
• AndroidX ट्रांज़िशन के साथ, पीछे जाने पर झलक दिखाने वाले ट्रांज़िशन की सुविधा काम करती है. हालांकि, फ़्रेमवर्क ट्रांज़िशन के साथ यह सुविधा काम नहीं करती. फ़्रेमवर्क ट्रांज़िशन से माइग्रेट करें. इसके बजाय, Animator और AndroidX ट्रांज़िशन का इस्तेमाल करें.
• पीछे जाने पर झलक दिखाने वाले ट्रांज़िशन की सुविधा, Android 14 और इसके बाद के वर्शन वाले डिवाइसों पर काम करती है. यह सुविधा, Android के पुराने वर्शन पर काम नहीं करती.
• एक्सएमएल सीन की मदद से बनाए गए ट्रांज़िशन भी काम करते हैं. handleOnBackStarted में, controlDelayedTransition के नतीजे के बजाय TransitionManager.createSeekController के नतीजे को TransitionSeekController के तौर पर सेट करें.

Android 14 और इसके बाद के वर्शन पर, कस्टम गतिविधि ट्रांज़िशन जोड़ना

यह पक्का करने के लिए कि Android 14 और इसके बाद के वर्शन पर, कस्टम ऐक्टिविटी ट्रांज़िशन के लिए पीछे जाने पर झलक दिखाने वाली सुविधा काम करे, overridePendingTransition के बजाय overrideActivityTransition का इस्तेमाल करें. इसका मतलब है कि जब उपयोगकर्ता वापस स्वाइप करता है, तब ट्रांज़िशन ऐनिमेशन चलता है.

यह कैसे काम करता है, इसका उदाहरण देने के लिए, मान लें कि पिछली गतिविधियों में गतिविधि B, गतिविधि A के ऊपर है. कस्टम गतिविधि के ऐनिमेशन को इस तरह मैनेज किया जाता है:

• गतिविधि B के onCreate तरीके में, खोलने या बंद करने के ट्रांज़िशन को चलाएं.
• जब उपयोगकर्ता गतिविधि B पर जाता है, तब OVERRIDE_TRANSITION_OPEN का इस्तेमाल करें. जब उपयोगकर्ता स्वाइप करके वापस गतिविधि A पर जाता है, तब OVERRIDE_TRANSITION_CLOSE का इस्तेमाल करें.

• OVERRIDE_TRANSITION_CLOSE तय करते समय enterAnim, ऐक्टिविटी A में शामिल होने का ऐनिमेशन होता है और exitAnim, ऐक्टिविटी B से बाहर निकलने का ऐनिमेशन होता है.

  ध्यान दें: अगर exitAnim सेट नहीं है या 0 पर सेट है, तो इसके बजाय, पिछले वीडियो में दिखाया गया अलग-अलग गतिविधि वाला डिफ़ॉल्ट ऐनिमेशन चलता है.

फ़्रैगमेंट के साथ, पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर की सुविधा जोड़ी गई

फ़्रैगमेंट के साथ पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर की सुविधा लागू करने के दो तरीके हैं.

मौजूदा एपीआई का इस्तेमाल करना

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

इन बातों का ध्यान रखें:

• Transitions 1.5.0 या इसके बाद का वर्शन और Fragments 1.7.0 या इसके बाद का वर्शन इंपोर्ट करें. फ़्रैगमेंट में पीछे जाने पर झलक दिखाने वाला हाथ का जेस्चर की सुविधा का ज़्यादातर हिस्सा, ट्रांज़िशन पर निर्भर करता है. ट्रांज़िशन की मदद से ऐनिमेशन को खोजा जा सकता है. यह सुविधा सिर्फ़ ट्रांज़िशन 1.5.0 या इसके बाद के वर्शन में उपलब्ध है.
• पिछली ऐक्टिविटी को मैनेज करने के लिए, फ़्रैगमेंट का इस्तेमाल करें. इसके लिए, FragmentManager या नेविगेशन कॉम्पोनेंट का इस्तेमाल करें. अगर बैक स्टैक को खुद मैनेज किया जाता है, तो पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर की सुविधा काम नहीं करती. उन बैक स्टैक से माइग्रेट करें जिनके बारे में FragmentManager को जानकारी नहीं है.
• कुछ लाइब्रेरी में, पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर की सुविधा काम करती है. पक्का करने के लिए, दस्तावेज़ देखें.
• Animator क्लास और AndroidX Transition लाइब्रेरी का इस्तेमाल किया जा सकता है.
• Animation क्लास और फ़्रेमवर्क Transition लाइब्रेरी का इस्तेमाल नहीं किया जा सकता.
• झलक दिखाने वाले ऐनिमेशन की सुविधा, सिर्फ़ Android 14 या इसके बाद के वर्शन वाले डिवाइसों पर काम करती है.

इन स्थितियों में, पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर के क्रॉस-फ़्रैगमेंट का इस्तेमाल करें:

• नेविगेशन कॉम्पोनेंट में ऐनिमेशन जोड़ना.
• setCustomAnimations की मदद से ऐनिमेट करें.
• setEnterTransition, setExitTransition, setReenterTransition, और setReturnTransition की मदद से, ऑब्जेक्ट को सीन में शामिल करने और हटाने के ट्रांज़िशन को ऐनिमेट करें.
• setSharedElementEnterTransition और setSharedElementReturnTransition की मदद से, शेयर किए गए एलिमेंट के ट्रांज़िशन को ऐनिमेट करें.

मटेरियल मोशन के कुछ कॉम्पोनेंट, 1.12.02-alpha02 या इसके बाद के वर्शन में, पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर के ऐनिमेशन की सुविधा काम करती है. इनमें MaterialFadeThrough, MaterialSharedAxis, और MaterialFade शामिल हैं.

कॉलबैक का इस्तेमाल करना

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

OnBackPressedCallback बनाएं. handleOnBackProgressed के अंदर, फ़्रैगमेंट को स्केल और शिफ़्ट करें. इसके बाद, पिछली गतिविधियों से पॉप करें. इसके बाद, शेयर किए गए एलिमेंट के ट्रांज़िशन को setSharedElementReturnTransition का इस्तेमाल करके, कॉलबैक के बाहर चलाएं.

ज़्यादा जानकारी के लिए, GitHub पर कोड का सैंपल देखें.

ज़रूरी शर्तें

targetSdkVersion और compileSdkVersion, डिवाइस के वर्शन, डिपेंडेंसी, मेनिफ़ेस्ट फ़्लैग, और फ़्रैगमेंट फ़्लैग से क्या कंट्रोल किया जाता है, यह समझने के लिए यहां दी गई टेबल देखें. इस टेबल में कोड से जुड़ी ज़रूरी शर्तों के बारे में बताया गया है.

ध्यान दें: Android 15 और उसके बाद के वर्शन में, 'डेवलपर के लिए सेटिंग और टूल' अब उपलब्ध नहीं है. सिस्टम के ऐनिमेशन, जैसे कि होम स्क्रीन पर वापस जाना, एक टास्क से दूसरे टास्क पर जाना, और एक गतिविधि से दूसरी गतिविधि पर जाना अब उन ऐप्लिकेशन के लिए दिखते हैं जिन्होंने पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर की सुविधा चालू की है.

कैटगरी	ऐनिमेशन	compileSdk	targetSdk	डिवाइस का वर्शन	android:enableOnBackInvokedCallback	डिपेंडेंसी
सिस्टम ऐनिमेशन	होम पेज पर वापस जाएं	33	कोई भी	35	सही	कोई नहीं
	क्रॉस-ऐक्टिविटी	34	कोई भी	35	सही	कोई नहीं
	अलग-अलग काम	34	कोई भी	35	सही	कोई नहीं
प्लैटफ़ॉर्म	कस्टम क्रॉस-ऐक्टिविटी	34	कोई भी	35	सही	कोई नहीं
	Progress API Platform	34	कोई भी	34	सही	कोई नहीं
मटीरियल कॉम्पोनेंट	बॉटम शीट	34	कोई भी	34	सही	Material Component 1.10.0
	साइड शीट	34	कोई भी	34	सही	Material Component 1.10.0
	नेविगेशन पैनल	34	कोई भी	34	सही	Material Component 1.10.0
	खोजें	34	कोई भी	34	सही	Material Component 1.10.0
Jetpack Animations	AndroidX क्रॉस-फ़्रैगमेंट को पसंद के मुताबिक बनाना	34	कोई भी	34	सही	AndroidX Fragment 1.7
	AndroidX ट्रांज़िशन को पसंद के मुताबिक बनाना	34	कोई भी	34	सही	AndroidX ट्रांज़िशन 1.5
	Progress API Jetpack	34	कोई भी	34	सही	AndroidX Activity 1.8

अतिरिक्त संसाधन

• पीछे जाने पर झलक दिखाने वाले हाथ के जेस्चर के कोड के सैंपल
• सिस्टम बैक वीडियो के लिए बुनियादी बातें
• Android वीडियो के लिए आने वाले समय में उपलब्ध होने वाली सुविधाएं