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

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

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

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

• बॉटम शीट
• साइड शीट
• Search

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

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

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

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

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

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

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

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

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

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

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

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