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

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

पहला वीडियो: प्रीडिक्टिव बैक ऐनिमेशन

ऑप्ट-इन करने के बाद, आपका ऐप्लिकेशन बैक-टू-होम, क्रॉस-ऐक्टिविटी, और क्रॉस-टास्क के लिए ऐनिमेशन दिखाता है.

मटीरियल कॉम्पोनेंट के ऐनिमेशन पाने के लिए, मटीरियल कॉम्पोनेंट की डिपेंडेंसी को 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 का इस्तेमाल किया जा सकता है. इसका मतलब है कि जब उपयोगकर्ता वापस स्वाइप करता है, तब ट्रांज़िशन ऐनिमेशन चलता है.

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

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

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

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

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

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

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

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

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

इन स्थितियों में, अनुमानित बैक क्रॉस-फ़्रैगमेंट का इस्तेमाल करें:

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

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

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

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

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

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

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

कैटगरी ऐनिमेशन 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

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